/* ============================================================================
 *  模板 D · 照 hd7671.top（澳门财神爷）复刻
 *
 *  ★★ 这份 CSS 是**脚本生成的**（`deploy/` 里没有，是我一次性生成的）——
 *     前半段是参考站 app.css + common-draw.css 的**原样照抄**，
 *     后半段是把它的类名**映射**到我们模板用的 .wf-* 上。
 *     要改样式就改后半段的映射表，或者重新跑一次生成脚本 —— 别在中间乱插规则，
 *     因为参考站自己的规则之间有**顺序依赖**（比如最后那条把字号从 12px 提到 14px）。
 *
 *  ★ 为什么是"映射"而不是"把 JS 的类名全改掉"：
 *     我们首页/详情页共用 PlayBlock 组件，类名是 .wf-*；照着参考站改几百处类名
 *     容易漏、也容易把老模板带崩。映射只在这一份 CSS 里做，**零风险**。
 * ========================================================================== */

/* ==================== 一、皮肤变量（框架层用的几个） ====================
   index.php 里 text-brand / bg-card / text-danger 这些读的是这几个变量。 */
:root {
    --c-brand-rgb:        235 43 130;    /* #eb2b82 洋红（标题栏） */
    --c-brand-light-rgb:  247 91 165;    /* #f75ba5 渐变亮端（导航胶囊） */
    --c-brand-dark-rgb:   231 36 123;    /* #e7247b 渐变暗端 */
    --c-brand-soft-rgb:   255 240 247;   /* 主色浅底 */
    --c-page-rgb:         245 245 245;   /* 页面底（参考站是白，这里留一点灰） */
    --c-card-rgb:         255 255 255;
    --c-gold-rgb:         255 232 0;     /* #ffe800 站点名黄 */
    --c-gold-soft-rgb:    255 251 235;
    --c-gold-deep-rgb:    138 90 0;      /* #8a5a00 期号条上的深棕 */
    --c-danger-rgb:       240 25 52;     /* #f01934 结果红 */
}

/* ==================== 二、参考站原样照抄 ==================== */

/* ---- 2.1 app.css 全文 ---- */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#f2f2f2;color:#111;font-family:Arial,"Microsoft YaHei",sans-serif;font-size:14px}
a{text-decoration:none;color:inherit}

.site3-shell{width:100%;max-width:720px;margin:0 auto;background:#fff;min-height:100vh;box-shadow:0 0 16px rgba(0,0,0,.08)}
.top-card{background:#fff}
.site3-showcase-image{display:block;width:100%;height:auto}
.site3-showcase-fallback{height:148px;background:linear-gradient(135deg,#ffd8e9,#fff5cb);display:flex;flex-direction:column;align-items:center;justify-content:center;border-bottom:3px solid #ef2c83}
.fortune-title{font-size:36px;font-weight:900;color:#111;text-shadow:2px 2px 0 #fff,0 3px 0 #ffca5e}
.fortune-domain{margin-top:10px;background:#fff7db;border:2px solid #d49838;border-radius:999px;padding:4px 22px;font-weight:900;color:#111}

.quick-nav{
  position:sticky;
  top:0;
  z-index:80;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:6px;
  padding:7px 8px 6px;
  background:#fff;
  border-bottom:1px solid #f7d4e4;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.quick-nav a{height:24px;line-height:24px;text-align:center;border-radius:999px;background:linear-gradient(#f75ba5,#e7247b);color:#fff;font-size:12px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}

.notice-strip{height:30px;line-height:30px;text-align:center;padding:0 8px;border-top:1px solid #f7d4e4;border-bottom:1px solid #f7d4e4;background:#fff;color:#111;font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.site-tabs{display:grid;grid-template-columns:repeat(4,1fr);padding:12px 10px 10px;background:#fff;border-bottom:1px solid #eceff5}
.tab-btn{height:52px;border:1px solid #d6dbe6;background:#f8fafc;color:#111;cursor:pointer;font-size:12px;font-weight:800;border-right:0;border-radius:0}
.tab-btn:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px}
.tab-btn:last-child{border-right:1px solid #d6dbe6;border-top-right-radius:8px;border-bottom-right-radius:8px}
.tab-btn strong{display:block;font-size:13px;line-height:18px}
.tab-btn span{display:block;font-size:12px;line-height:16px;color:#111;font-weight:800}
.tab-btn.active{background:#16b968;color:#fff;border-color:#16b968}
.tab-btn.active span{color:#fff}

.draw-card{padding:16px 12px 18px;background:#fff;border-bottom:8px solid #f2f2f2}
.draw-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.draw-meta strong{font-size:22px;color:#061130;line-height:1.1}
.draw-meta a{font-size:13px;color:#10a843;font-weight:900}
.draw-countdown{text-align:center;color:#f1182f;font-size:15px;font-weight:900;margin:4px 0 12px}
.draw-countdown b{font-size:16px}
.draw-balls{display:flex;align-items:flex-start;justify-content:center;gap:8px;flex-wrap:nowrap}
.draw-ball{width:38px;height:38px;line-height:32px;border-radius:50%;background:#fff;text-align:center;font-size:16px;font-weight:900;color:#111;border:3px solid #f0181e;box-shadow:inset 0 0 0 2px #fff}
.ball-0{border-color:#1e90ff}
.ball-1{border-color:#f0181e}
.ball-2{border-color:#17af37}
.draw-plus{height:38px;line-height:34px;font-size:26px;font-weight:900;color:#9ca3af}
.draw-next{text-align:center;margin-top:10px;color:#ff172f;font-size:12px;font-weight:900}

.content-panels{padding:0;background:#fff}
.tab-panel{display:none}
.tab-panel.active{display:block}
.image-anchor{height:0;overflow:hidden}

.site3-media-card{margin:8px 0;background:#fff;border-top:1px solid #eee;border-bottom:1px solid #eee}
.site3-media-card img{display:block;width:100%;height:auto}

.template-title-bar{height:30px;line-height:30px;background:#eb2b82;color:#fff;text-align:center;font-size:12px;font-weight:900}
.template-title-bar span{
  color:#fff000;
  font-weight:900;
}
.template-title-bar strong{
  margin-left:8px;
  color:#fff;
  font-size:13px;
  font-weight:900;
}

.template-domain{text-align:center;color:#111;font-weight:900;font-size:13px;padding:6px 8px 5px;background:#fff;border-bottom:1px solid #eee}

.text-template-block{margin-top:0;background:#fff;border-bottom:1px solid #eee;scroll-margin-top:10px}
.template-list{width:100%}
.template-row{display:grid;grid-template-columns:64px minmax(0,1fr) 68px;gap:4px;align-items:center;min-height:32px;padding:4px 8px;border-top:1px solid #efefef;font-size:12px;line-height:1.35}
.row-issue{color:#111;font-weight:900;white-space:nowrap;text-align:left}
.row-content{color:#ff003c;font-weight:900;text-align:center;word-break:break-word}
.row-result{color:#f01934;font-weight:900;text-align:right;white-space:nowrap;font-size:12px}
.tpl-prefix{color:#ee16ad!important;font-weight:900}

.large-template-block{background:#fff;border-bottom:8px solid #f2f2f2;scroll-margin-top:10px}
.large-template-block .template-title-bar{height:32px;line-height:32px;background:#eb2b82;color:#fff;text-align:center;font-size:13px;font-weight:900}
.large-template-block .template-title-bar span{color:#ffe800;margin-right:8px}
.large-template-block .template-title-bar strong{color:#fff;font-size:14px}
.large-template-block .template-domain{text-align:center;color:#111;font-weight:900;font-size:16px;padding:8px 8px 7px;background:#fff;border-bottom:1px solid #eee}
.large-template-row{background:#fff;border-bottom:1px solid #eee}
.large-period-title{min-height:38px;line-height:38px;text-align:center;background:#fff3c8;color:#8a5a00;font-size:14px;font-weight:900;border-top:1px solid #f6dd8c;border-bottom:1px solid #f2b53d}
.large-content-wrap{position:relative;min-height:108px;padding:14px 86px 14px 12px;background:#fff}
.large-content-lines{color:#ff003c;font-size:13px;line-height:2;font-weight:900;white-space:normal;word-break:break-word}
.large-result{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:#ff0000;font-size:13px;font-weight:900;white-space:nowrap}

.post-type-group{background:#fff;border-bottom:8px solid #f2f2f2;scroll-margin-top:10px}
.post-type-title{height:32px;line-height:32px;background:#eb2b82;color:#fff;text-align:center;font-size:13px;font-weight:900}
.post-type-title span{color:#ffe800;margin-right:6px}
.post-type-title strong{color:#fff}
.post-type-list{padding:0;background:#f3f3f3}
.post-type-row{display:block;margin:0;padding:0;border:0;border-bottom:1px solid #d7d7d7;background:#f3f3f3}
.post-type-link{display:grid;grid-template-columns:112px minmax(0,1fr) 52px;align-items:center;min-height:34px;padding:0 10px;color:#111}
.post-type-issue{display:block;background:transparent;color:#000;padding:0;border-radius:0;font-size:13px;font-weight:900;white-space:nowrap;overflow:visible}
.post-type-link strong{color:#ff0000;font-size:13px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.post-type-link em{display:block;color:#999;font-style:normal;text-align:right;font-size:18px;letter-spacing:1px;font-weight:900;white-space:nowrap;line-height:1}

.post-type-detail{background:#fff;border-bottom:8px solid #f2f2f2;scroll-margin-top:10px}
.post-type-detail-title{height:32px;line-height:32px;background:#eb2b82;color:#fff;text-align:center;font-size:13px;font-weight:900}
.post-type-detail-title span{color:#ffe800;margin-right:6px}
.post-type-detail-title strong{color:#fff}
.post-type-detail-row{display:grid;grid-template-columns:72px minmax(0,1fr) 68px;gap:6px;align-items:center;min-height:38px;padding:6px 8px;border-top:1px solid #eee;background:#fff}
.post-type-detail-issue{color:#111;font-size:12px;font-weight:900}
.post-type-detail-content{color:#ff003c;font-size:13px;line-height:1.7;font-weight:900;text-align:left;word-break:break-word}
.post-type-detail-result{color:#ff0000;font-size:12px;font-weight:900;text-align:right;white-space:nowrap}

.float-actions{position:fixed;right:10px;bottom:18px;z-index:50;display:flex;flex-direction:column;gap:8px}
.float-actions button{width:48px;height:48px;border:0;border-radius:50%;background:#ef2a83;color:#fff;font-size:12px;font-weight:900;box-shadow:0 4px 12px rgba(0,0,0,.24);cursor:pointer}

.notice-modal[hidden]{display:none}
.notice-modal{position:fixed;inset:0;z-index:100}
.notice-mask{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.notice-box{position:absolute;left:50%;top:50%;width:min(88vw,420px);transform:translate(-50%,-50%);background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.notice-title{background:#ef2a83;color:#fff;padding:10px;text-align:center;font-weight:900}
.notice-content{padding:16px;line-height:1.8;color:#333;max-height:50vh;overflow:auto}
.notice-close{display:block;width:calc(100% - 24px);margin:0 12px 12px;height:38px;border:0;border-radius:8px;background:#ef2a83;color:#fff;font-weight:900}

.site-footer,
.closing-text,
.demo-tip,
.post-board{display:none!important}

@media(max-width:420px){
  .site3-shell{max-width:none}
  .quick-nav{grid-template-columns:repeat(5,1fr);gap:4px;padding-left:6px;padding-right:6px}
  .quick-nav a{font-size:11px}
  .draw-ball{width:34px;height:34px;line-height:28px;font-size:14px}
  .template-row{grid-template-columns:58px minmax(0,1fr) 60px;font-size:11px;padding-left:6px;padding-right:6px}
  .large-content-wrap{padding-right:72px}
  .large-content-lines{font-size:12px}
  .large-result{right:8px;font-size:12px}
  .post-type-link{grid-template-columns:100px minmax(0,1fr) 48px;padding:0 8px}
  .post-type-link em{font-size:17px;letter-spacing:1px}
  .float-actions{right:6px}
  .float-actions button{width:42px;height:42px}
}


.bottom-image-list{display:block!important;background:#fff;border-top:8px solid #f2f2f2;padding-bottom:8px}
.bottom-image-list figure{margin:0;border-bottom:1px solid #e5e5e5}
.bottom-image-list img{display:block;width:100%;height:auto}

.post-detail-page-body{background:#fff;color:#111;font-family:Arial,"Microsoft YaHei",sans-serif}
.post-detail-page{width:100%;max-width:720px;margin:0 auto;background:#fff;min-height:100vh;padding-bottom:30px}
.post-detail-head{position:relative;height:44px;line-height:44px;border-bottom:1px solid #eee;text-align:center;color:#ef2a83}
.post-detail-head h1{margin:0;font-size:18px;font-weight:900;color:#ef2a83}
.post-detail-back{position:absolute;left:12px;top:0;height:44px;line-height:44px;font-size:28px;color:#ef2a83;font-weight:400}
.post-detail-card{width:calc(100% - 24px);margin:14px auto;border:1px solid #ff9aca;border-radius:5px;overflow:hidden;background:#fff}
.post-detail-card-title{height:34px;line-height:34px;text-align:center;background:#eb2b82;color:#fff;font-weight:900;font-size:14px}
.post-detail-card-row{min-height:42px;border-bottom:1px dashed #e6e6e6;padding:9px 10px;background:#fff}
.post-detail-card-row:last-child{border-bottom:0}
.post-detail-main{display:flex;align-items:flex-start;gap:8px;font-size:16px;font-weight:900;line-height:1.6;color:#111}
.post-detail-issue{flex:0 0 auto;color:#ff0000;white-space:nowrap}
.post-detail-content{flex:1;color:#111;word-break:break-word}
.post-detail-content .tpl-prefix{color:#ee16ad!important}
.post-detail-content div{display:inline}
.post-detail-content div+div{display:block;margin-top:2px}
.post-detail-result{margin-left:84px;color:#ff0000;font-size:13px;font-weight:900;line-height:1.5}
@media(max-width:420px){
  .post-detail-page{max-width:none}
  .post-detail-card{width:calc(100% - 18px);margin-top:12px}
  .post-detail-main{font-size:15px;gap:6px}
}
.site3-bottom-text{
  text-align:center !important;
}

.site3-bottom-text{
  text-align:center !important;
  padding:14px 10px 18px !important;
  background:#fff !important;
}

.site3-bottom-text h3{
  text-align:center !important;
  color:#ee16ad !important;
  font-size:16px !important;
  font-weight:900 !important;
  margin:0 0 8px !important;
}

.site3-bottom-text p{
  text-align:center !important;
  color:#003344 !important;
  font-size:13px !important;
  line-height:1.8 !important;
  margin:0 !important;
}
.template-desc-board{
  background:#fff;
  border-bottom:1px solid #e6d3b1;
  padding:8px 8px 7px;
  text-align:center;
  line-height:1.9;
  font-size:15px;
  font-weight:500;
}

.template-desc-board p{
  margin:0;
  color:#111;
}

.template-desc-board span{
  color:#1f58ff;
  font-weight:500;
}
/* STAGE3_SITE3_RULE_CLEAN: generated material state + hit highlight */
.hit-item{
  display:inline-block;
  background:#ffe35a;
  color:#d60000;
  border-radius:3px;
  padding:0 2px;
  font-weight:900;
}
.template-empty{
  margin:8px;
  padding:10px;
  border:1px dashed #f6b5c8;
  border-radius:6px;
  background:#fff8fb;
  color:#b91c1c;
  text-align:center;
  font-weight:800;
  line-height:1.6;
}
.template-row.is-generated .row-content,
.template-row.is-generated .row-result{
  font-weight:900;
}


/* ===== 图片模板文字层：site1-site4 统一前台叠加层 ===== */
.lhc-image-layer-template{
    position:relative;
    display:block;
    width:100%;
    overflow:hidden;
}
.lhc-image-layer-base{
    display:block;
    width:100%;
    height:auto;
}
.lhc-image-layer{
    position:absolute;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1px 2px;
    white-space:pre-line;
    word-break:break-word;
    text-shadow:0 1px 2px rgba(255,255,255,.65);
    pointer-events:none;
}
.lhc-image-layer-img{
    object-fit:contain;
}
@media(max-width:640px){
    .lhc-image-layer{
        padding:0 1px;
        text-shadow:0 1px 1px rgba(255,255,255,.7);
    }
}

/* ===== 图片模板文字层 v4 通用叠加层 ===== */
.lhc-image-layer-template{position:relative;display:block;width:100%;overflow:visible}
.lhc-image-layer-base{display:block;width:100%;height:auto}
.lhc-image-layer{position:absolute;box-sizing:border-box;display:flex;align-items:center;justify-content:center;white-space:pre-line;word-break:break-word;pointer-events:auto}
.lhc-image-layer-img{object-fit:contain}
/* ===== 图片模板文字层 v4.2 通用叠加层 ===== */
.lhc-image-layer-template{position:relative;display:block;width:100%;overflow:visible}
.lhc-image-layer-base{display:block;width:100%;height:auto}
.lhc-image-layer,.lhc-image-fixed-layer{position:absolute;box-sizing:border-box;display:flex;align-items:center;justify-content:center;white-space:pre-line;word-break:break-word;pointer-events:auto}
.lhc-image-layer-img{object-fit:contain}

/* v9.3: desktop uses 720px container; mobile remains fluid. */
.site3-shell, .post-detail-page {
  width: 100%;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.site3-shell img,
.post-detail-page img {
  max-width: 100%;
}
.float-actions {
  right: 10px;
  bottom: 18px;
}
@media(max-width:420px){
  .site3-shell,.post-detail-page{max-width:none}
  .float-actions{right:6px}
}

/* v9.5: keep site3 desktop 720px and keep floating buttons at viewport right-bottom. */
.site3-shell,.post-detail-page{width:100% !important;max-width:720px !important;margin-left:auto !important;margin-right:auto !important;}
.site3-shell img,.post-detail-page img,.site3-shell video,.post-detail-page video{max-width:100%;height:auto;}
.float-actions{position:fixed !important;right:10px !important;bottom:18px !important;left:auto !important;z-index:80 !important;}
@media(max-width:420px){.site3-shell,.post-detail-page{max-width:none !important}.float-actions{right:6px !important;bottom:18px !important}}

/* 20260519: 网站3【三期必中】按三期一组，中间一行显示资料，两边只显示期号与开奖结果 */
.site3-sanqi-bizhong .template-row .row-content{min-height:1.4em}
.site3-sanqi-bizhong .template-row .row-content:empty::before{content:"\00a0"}

/* v20260521: site3 mobile readable fonts + overflow guard. */
/* ★★ 2026-10-09 修：这一行原来是 `html, body { max-width:100%; overflow-x:hidden; }`，
   源站就那么写的、我们照抄了 —— 结果是**电脑上滚轮滚不动**（用户报的
   「财神爷模板电脑打开不能用滚轮下滑」）。
   ★ 道理：`html` 的 overflow 一旦不是 visible，`body` 的 overflow 就**不再传播到视口**，
   body 于是自己变成一个"可滚动容器"（它 scrollHeight == clientHeight，其实滚不动），
   Chrome 把滚轮交给它之后**就不冒泡给 html** —— 页面纹丝不动。
   实测反证：只把 html 这半条去掉 → 立刻能滚（scrollTop 0 → 600）；加回来 → 又滚不动。
   ★ 只留 body 那份：html 是 visible 时，**body 的 overflow-x 会传播到视口**，
     防横向溢出的效果一模一样，而滚动仍然落在 html 上、滚轮正常。
   ★ 别把这条改回 `html, body` —— 别的模板本来就没有它，只有这套抄了源站整份 CSS，
     所以这个毛病只在财神爷这套上出现（手机端不靠滚轮，才一直没被发现）。 */
body { max-width: 100%; overflow-x: hidden; }
.site3-shell { overflow-x:hidden; }
.site3-shell img,.site3-shell video,.site3-shell canvas,.site3-shell svg { max-width:100%; height:auto; }
.lhc-image-layer-template { overflow:hidden !important; max-width:100%; }
.text-template-block .template-row,
.text-template-block .row-content,
.text-template-block .row-issue,
.text-template-block .row-result,
.text-template-block .template-domain,
.text-template-block .template-desc-board,
.text-template-block .template-empty {
  font-size:14px;
  line-height:1.5;
}
.large-template-block .large-content-lines,
.large-template-block .large-result,
.post-type-detail-content,
.post-type-detail-result,
.post-type-detail-issue,
.post-detail-content,
.post-detail-result,
.post-detail-issue {
  font-size:15px;
  line-height:1.65;
}
@media(max-width:420px){
  .text-template-block .template-row,
  .text-template-block .row-content,
  .text-template-block .row-issue,
  .text-template-block .row-result,
  .text-template-block .template-domain,
  .text-template-block .template-desc-board,
  .text-template-block .template-empty {
    font-size:14px !important;
    line-height:1.5 !important;
  }
  .large-template-block .large-content-lines,
  .large-template-block .large-result,
  .post-type-detail-content,
  .post-type-detail-result,
  .post-type-detail-issue,
  .post-detail-content,
  .post-detail-result,
  .post-detail-issue {
    font-size:15px !important;
    line-height:1.65 !important;
  }
}

/* image-layer-cross-device-v2 20260615: 图片模板文字层跨设备一致显示，不改后台保存的坐标/字号/颜色 */
html,body{-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important;}
.lhc-image-layer-template[data-lhc-image-layer-template="1"],.lhc-image-layer-template{position:relative!important;display:block!important;width:100%!important;max-width:100%!important;overflow:hidden!important;-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important;}
.lhc-image-layer-base{display:block!important;width:100%!important;height:auto!important;}
.lhc-image-layer{position:absolute!important;box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;white-space:pre-line!important;word-break:keep-all!important;overflow-wrap:normal!important;word-wrap:normal!important;line-break:strict!important;max-width:none!important;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;}
.lhc-image-layer-text{unicode-bidi:plaintext;}
.lhc-image-layer-img{object-fit:contain!important;}
.lhc-image-fixed-layer{position:absolute!important;box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;}

/* image-layer-wrap-fix-v4 20260615: 诗词/长句允许换行，号码期数继续不换行 */
.lhc-image-layer-template{
  background:transparent!important;
}
.lhc-image-layer-text[data-layer-key*="poem"],
.lhc-image-layer-text[data-layer-key*="gift"],
.lhc-image-layer-text[data-layer-key*="orange"],
.lhc-image-layer-text[data-layer-key*="explain"],
.lhc-image-layer-text[data-layer-key*="desc"],
.lhc-image-layer-text[data-layer-key*="text"],
.lhc-image-layer-text[data-layer-key="one"],
.lhc-image-layer-text[data-layer-key="e1"],
.lhc-image-layer-text[data-layer-key="e2"],
.lhc-image-layer-text[data-layer-label*="诗"],
.lhc-image-layer-text[data-layer-label*="句"],
.lhc-image-layer-text[data-layer-label*="解释"],
.lhc-image-layer-text[data-layer-label*="说明"],
.lhc-image-layer-text[data-layer-label*="暗藏"],
.lhc-image-layer-text[data-layer-label*="赠"],
.lhc-image-layer-text[data-layer-label*="送区"]{
  white-space:pre-wrap!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
  word-wrap:break-word!important;
  line-break:auto!important;
}

/* image-layer-wrap-final-v5 20260615: 只允许诗词/说明/解释/赠诗等长文字换行 */
.lhc-image-layer-template{
  background:transparent!important;
}
.lhc-image-layer-text[data-long-text="1"]{
  display:block!important;
  white-space:pre-wrap!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
  word-wrap:break-word!important;
  line-break:auto!important;
}

/* image-layer-render-clean-v9 20260615 */
.lhc-image-layer-template[data-lhc-image-layer-template="1"],
.lhc-image-layer-template{
  position:relative!important;
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  overflow:hidden!important;
  background:transparent!important;
  -webkit-text-size-adjust:100%!important;
  text-size-adjust:100%!important;
}

.lhc-image-layer-base{
  display:block!important;
  width:100%!important;
  height:auto!important;
}

.lhc-image-layer-template .lhc-image-layer,
.lhc-image-layer-template .lhc-image-fixed-layer{
  position:absolute!important;
  box-sizing:border-box!important;
  transform:none!important;
  -webkit-transform:none!important;
  transform-origin:left top!important;
  -webkit-transform-origin:left top!important;
  -webkit-text-size-adjust:100%!important;
  text-size-adjust:100%!important;
}

.lhc-image-layer-template .lhc-image-layer-text{
  white-space:pre-line!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
  word-wrap:normal!important;
}

.lhc-image-layer-template .lhc-image-layer-text[data-long-text="1"]{
  display:block!important;
  white-space:pre-wrap!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
  word-wrap:break-word!important;
  line-break:auto!important;
}

.lhc-image-layer-template .lhc-image-layer-img,
.lhc-image-layer-template img.lhc-image-layer-img{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  outline:0!important;
  object-fit:contain!important;
}


/* ---- 2.2 common-draw.css 全文 ---- */

.common-draw{background:#fff;border-radius:18px;box-shadow:0 8px 24px rgba(15,23,42,.08);padding:10px;margin:12px auto;max-width:960px;color:#111827;font-family:Arial,"Microsoft YaHei",sans-serif}.common-draw *{box-sizing:border-box}.common-draw-tabs{display:flex;gap:0;background:#f6f7f9;border:1px solid #cfd7e4;border-radius:14px;overflow:hidden}.common-draw-tab{flex:1 1 0;min-width:0;cursor:pointer;border:0;border-right:1px solid #cfd7e4;background:transparent;padding:12px 6px;color:#111827;transition:.2s;font:inherit}.common-draw-tab:last-child{border-right:0}.common-draw-tab.is-active{background:linear-gradient(180deg,#22c55e,#17a34a);color:#fff}.common-draw-tab__name,.common-draw-tab__date{display:block;font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.common-draw-body{margin-top:10px;padding:14px 16px 8px;overflow:visible}.common-draw-meta{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px 16px;align-items:center}.common-draw-issue{font-weight:900;white-space:nowrap}.common-draw-issue--current{font-size:16px;color:#111827}.common-draw-issue--next{font-size:14px;color:#e11d25;text-align:left}.common-draw-countdown{font-size:14px;color:#e53935;font-weight:900;white-space:nowrap}.common-draw-history-btn{cursor:pointer;border:0;background:transparent;color:#0b9d3e;font-weight:900;padding:0;font:inherit;white-space:nowrap}.common-draw-balls{display:flex;flex-wrap:nowrap;align-items:flex-start;justify-content:center;gap:14px;margin:18px 0 10px}.common-draw-ball-item{text-align:center;min-width:58px}.common-draw-ball{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#000!important;font-weight:900;font-size:20px;border:0;box-shadow:none;background-repeat:no-repeat;background-position:center;background-size:100% 100%;text-shadow:none!important}.common-draw-ball b{color:#000!important;text-shadow:none!important;-webkit-text-fill-color:#000!important}.common-draw-ball--red{background-color:transparent;background-image:url('../img/draw/ball-red.png')}.common-draw-ball--blue{background-color:transparent;background-image:url('../img/draw/ball-blue.png')}.common-draw-ball--green{background-color:transparent;background-image:url('../img/draw/ball-green.png')}.common-draw-ball--empty{background:#f3f4f6;border:2px dashed #cbd5e1}.common-draw-ball--rolling{background:#fff7cc;border:2px solid #f59e0b;color:#000!important;animation:commonDrawPulse 1.2s ease-in-out infinite}.common-draw-ball-item em{display:block;margin-top:6px;font-size:13px;font-style:normal;color:#111827}.common-draw-plus{font-size:34px;font-weight:900;line-height:54px;color:#b6bcc7}.common-draw-footer{color:#ef4444;font-size:13px;text-align:center;font-weight:900}.common-draw-reveal{font-size:13px;text-align:right;color:#0f766e;font-weight:900;margin-top:8px}.common-draw-body[data-common-draw-stage="pre_reveal"] .common-draw-reveal,.common-draw-body[data-common-draw-stage="revealing"] .common-draw-reveal{color:#dc2626}.common-draw__empty{padding:18px;text-align:center;color:#6b7280;border:1px dashed #d1d5db;border-radius:12px}@keyframes commonDrawPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}.common-draw-modal[hidden]{display:none}.common-draw-modal{position:fixed;inset:0;z-index:9999}.common-draw-modal__mask{position:absolute;inset:0;background:rgba(15,23,42,.58)}.common-draw-modal__panel{position:relative;width:min(720px,calc(100vw - 24px));max-height:min(760px,calc(100vh - 40px));margin:20px auto;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.28)}.common-draw-modal__head{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #e5e7eb;background:#f8fafc}.common-draw-modal__head strong{font-size:17px}.common-draw-modal__head button{border:0;border-radius:999px;background:#111827;color:#fff;padding:8px 14px;font-weight:900}.common-draw-history-list{padding:12px;overflow:auto;max-height:calc(100vh - 120px)}.common-draw-history-row{border:1px solid #e5e7eb;border-radius:12px;padding:10px;margin-bottom:10px}.common-draw-history-row__top{display:flex;justify-content:space-between;gap:10px;color:#111827;font-weight:900;margin-bottom:8px}.common-draw-history-row__balls{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;overflow-x:auto;padding-bottom:5px}.common-draw-history-row__balls .common-draw-ball-item{min-width:42px}.common-draw-history-row__balls .common-draw-ball{width:38px;height:38px;font-size:15px}.common-draw-history-row__balls .common-draw-plus{line-height:38px;font-size:22px}.common-draw-history-row__balls .common-draw-ball-item em{font-size:10px;white-space:nowrap}.common-draw-history-row__footer{margin-top:6px;color:#ef4444;font-size:12px;font-weight:800}@media(max-width:720px){.common-draw{padding:10px;border-radius:12px}.common-draw-body{padding:12px 8px 8px}.common-draw-meta{grid-template-columns:1fr;gap:6px}.common-draw-issue--next{text-align:left}.common-draw-history-btn{justify-self:start}.common-draw-balls{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;justify-items:center}.common-draw-ball-item{min-width:0;width:100%}.common-draw-ball{width:min(11vw,46px);height:min(11vw,46px);min-width:38px;min-height:38px;font-size:16px}.common-draw-ball-item em{font-size:10px;white-space:nowrap}.common-draw-plus{line-height:min(11vw,46px);font-size:22px}.common-draw-tab{flex:1 1 0;min-width:0;padding:10px 4px}.common-draw-tab__name,.common-draw-tab__date{font-size:11px}}@media(min-width:900px){.common-draw-ball{width:64px;height:64px;font-size:26px}.common-draw-plus{line-height:64px;font-size:38px}.common-draw-ball-item em{font-size:16px}.common-draw-balls{gap:18px}}


/* v6 layout: current issue/countdown/history on top, next issue time always below balls. */
.common-draw .common-draw-meta{grid-template-columns:auto 1fr auto!important;gap:10px 16px!important;align-items:center!important}.common-draw .common-draw-next-line{display:block!important;margin:8px 0 0!important;text-align:center!important;color:#ef4444!important;font-size:13px!important;font-weight:900!important;line-height:1.45!important}.common-draw .common-draw-footer,.common-draw .common-draw-reveal{display:none!important}.common-draw .common-draw-ball--rolling+em{visibility:hidden!important}.common-draw .common-draw-ball b,.common-draw .common-draw-ball--red b,.common-draw .common-draw-ball--blue b,.common-draw .common-draw-ball--green b,.common-draw .common-draw-ball--rolling b{color:#000!important;text-shadow:none!important;-webkit-text-fill-color:#000!important}@media(max-width:720px){.common-draw .common-draw-meta{grid-template-columns:1fr!important}.common-draw .common-draw-next-line{text-align:center!important;font-size:12px!important}}

/* v7: 图片模板底图未加载完成前，隐藏文字/图片叠加层，避免网络慢时文字层先浮出来。 */
.lhc-image-layer-template[data-lhc-image-layer-template="1"]{background:#f8fafc;min-height:24px}
.lhc-image-layer-template[data-lhc-image-layer-template="1"].is-image-loading .lhc-image-layer-base{opacity:0}
.lhc-image-layer-template[data-lhc-image-layer-template="1"]:not(.is-image-ready) .lhc-image-layer,.lhc-image-layer-template[data-lhc-image-layer-template="1"]:not(.is-image-ready) .lhc-image-fixed-layer{visibility:hidden!important;opacity:0!important}
.lhc-image-layer-template[data-lhc-image-layer-template="1"].is-image-ready .lhc-image-layer-base,.lhc-image-layer-template[data-lhc-image-layer-template="1"].is-image-ready .lhc-image-layer,.lhc-image-layer-template[data-lhc-image-layer-template="1"].is-image-ready .lhc-image-fixed-layer{visibility:visible!important;opacity:1!important}
.lhc-image-layer-template[data-lhc-image-layer-template="1"].is-image-error .lhc-image-layer,.lhc-image-layer-template[data-lhc-image-layer-template="1"].is-image-error .lhc-image-fixed-layer{display:none!important}
.lhc-image-layer-template[data-lhc-image-layer-template="1"].is-image-error::after{content:'图片加载失败，请刷新重试';display:block;padding:12px;text-align:center;color:#b91c1c;background:#fff1f2;border:1px solid #fecdd3;border-radius:8px;font-size:14px;font-weight:700}

/* v8: tab 资料区异步补齐时只显示轻提示；已预取缓存时会本地秒切换，不会出现等待。 */
[data-lhc-material-fragment][data-lhc-material-loading="1"]{position:relative}
[data-lhc-material-fragment][data-lhc-material-loading="1"]::before{content:'资料切换中...';position:sticky;top:6px;z-index:30;display:block;width:max-content;max-width:calc(100% - 24px);margin:6px auto;padding:6px 12px;border-radius:999px;background:rgba(17,24,39,.86);color:#fff;font-size:13px;font-weight:800;line-height:1.2;box-shadow:0 6px 18px rgba(0,0,0,.18);pointer-events:none}

/* common draw tabs auto-fit enabled count 20260531 */

/* 20260615 图片模板文字层设备兼容修复：
   只锁定前台渲染，不改后台已保存的坐标/字号/颜色。
   解决部分手机浏览器字体放大、数字拆行、文字竖排/重叠问题。 */
.lhc-image-layer-template[data-lhc-image-layer-template="1"]{
  -webkit-text-size-adjust:100%!important;
  text-size-adjust:100%!important;
  max-width:100%;
  overflow:hidden!important;
}
.lhc-image-layer-template[data-lhc-image-layer-template="1"] .lhc-image-layer,
.lhc-image-layer-template[data-lhc-image-layer-template="1"] .lhc-image-fixed-layer{
  word-break:keep-all!important;
  overflow-wrap:normal!important;
  word-wrap:normal!important;
  white-space:pre-line!important;
  max-width:none;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
}
.lhc-image-layer-template[data-lhc-image-layer-template="1"] .lhc-image-layer-text{
  unicode-bidi:plaintext;
}


/* image-layer-cross-device-v2 20260615: 图片模板文字层跨设备一致显示，不改后台保存的坐标/字号/颜色 */
html,body{-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important;}
.lhc-image-layer-template[data-lhc-image-layer-template="1"],.lhc-image-layer-template{position:relative!important;display:block!important;width:100%!important;max-width:100%!important;overflow:hidden!important;-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important;}
.lhc-image-layer-base{display:block!important;width:100%!important;height:auto!important;}
.lhc-image-layer{position:absolute!important;box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;white-space:pre-line!important;word-break:keep-all!important;overflow-wrap:normal!important;word-wrap:normal!important;line-break:strict!important;max-width:none!important;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;}
.lhc-image-layer-text{unicode-bidi:plaintext;}
.lhc-image-layer-img{object-fit:contain!important;}
.lhc-image-fixed-layer{position:absolute!important;box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;}

/* image-layer-wrap-fix-v4 20260615: 诗词/长句允许换行，号码期数继续不换行 */
.lhc-image-layer-template{
  background:transparent!important;
}
.lhc-image-layer-text[data-layer-key*="poem"],
.lhc-image-layer-text[data-layer-key*="gift"],
.lhc-image-layer-text[data-layer-key*="orange"],
.lhc-image-layer-text[data-layer-key*="explain"],
.lhc-image-layer-text[data-layer-key*="desc"],
.lhc-image-layer-text[data-layer-key*="text"],
.lhc-image-layer-text[data-layer-key="one"],
.lhc-image-layer-text[data-layer-key="e1"],
.lhc-image-layer-text[data-layer-key="e2"],
.lhc-image-layer-text[data-layer-label*="诗"],
.lhc-image-layer-text[data-layer-label*="句"],
.lhc-image-layer-text[data-layer-label*="解释"],
.lhc-image-layer-text[data-layer-label*="说明"],
.lhc-image-layer-text[data-layer-label*="暗藏"],
.lhc-image-layer-text[data-layer-label*="赠"],
.lhc-image-layer-text[data-layer-label*="送区"]{
  white-space:pre-wrap!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
  word-wrap:break-word!important;
  line-break:auto!important;
}

/* image-layer-wrap-final-v5 20260615: 只允许诗词/说明/解释/赠诗等长文字换行 */
.lhc-image-layer-template{
  background:transparent!important;
}
.lhc-image-layer-text[data-long-text="1"]{
  display:block!important;
  white-space:pre-wrap!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
  word-wrap:break-word!important;
  line-break:auto!important;
}

/* image-layer-render-clean-v9 20260615 */
.lhc-image-layer-template[data-lhc-image-layer-template="1"],
.lhc-image-layer-template{
  position:relative!important;
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  overflow:hidden!important;
  background:transparent!important;
  -webkit-text-size-adjust:100%!important;
  text-size-adjust:100%!important;
}

.lhc-image-layer-base{
  display:block!important;
  width:100%!important;
  height:auto!important;
}

.lhc-image-layer-template .lhc-image-layer,
.lhc-image-layer-template .lhc-image-fixed-layer{
  position:absolute!important;
  box-sizing:border-box!important;
  transform:none!important;
  -webkit-transform:none!important;
  transform-origin:left top!important;
  -webkit-transform-origin:left top!important;
  -webkit-text-size-adjust:100%!important;
  text-size-adjust:100%!important;
}

.lhc-image-layer-template .lhc-image-layer-text{
  white-space:pre-line!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
  word-wrap:normal!important;
}

.lhc-image-layer-template .lhc-image-layer-text[data-long-text="1"]{
  display:block!important;
  white-space:pre-wrap!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
  word-wrap:break-word!important;
  line-break:auto!important;
}

.lhc-image-layer-template .lhc-image-layer-img,
.lhc-image-layer-template img.lhc-image-layer-img{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  outline:0!important;
  object-fit:contain!important;
}

/* image-layer-click-preview-v11 20260615 */
.lhc-image-layer-preview-mask-v11{
  position:fixed!important;
  left:0!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  z-index:999999!important;
  background:rgba(0,0,0,.88)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:12px!important;
  box-sizing:border-box!important;
}

.lhc-image-layer-preview-box-v11{
  position:relative!important;
  width:100%!important;
  max-width:720px!important;
  max-height:96vh!important;
  overflow:auto!important;
  background:transparent!important;
}

.lhc-image-layer-preview-close-v11{
  position:fixed!important;
  right:12px!important;
  top:8px!important;
  z-index:1000000!important;
  width:38px!important;
  height:38px!important;
  line-height:34px!important;
  border:0!important;
  border-radius:50%!important;
  background:rgba(0,0,0,.7)!important;
  color:#fff!important;
  font-size:34px!important;
  font-weight:400!important;
  text-align:center!important;
}

.lhc-image-layer-preview-clone-v11{
  width:100%!important;
  max-width:720px!important;
  margin:0 auto!important;
  background:transparent!important;
}

/* mobile-history-one-line-fit-20260617 start */
/* 手机端历史开奖：强制 6 个平码 + 加号 + 特码同一行完整显示，只改显示样式，不改开奖逻辑 */
@media (max-width: 480px){
  .common-draw-modal__panel{
    width:calc(100vw - 20px)!important;
    max-width:calc(100vw - 20px)!important;
    margin:10px auto!important;
    border-radius:14px!important;
  }
  .common-draw-modal__head{
    height:48px!important;
    padding:0 12px!important;
  }
  .common-draw-modal__head strong{
    font-size:16px!important;
    white-space:nowrap!important;
  }
  .common-draw-modal__head button{
    padding:7px 12px!important;
  }
  .common-draw-history-list{
    padding:8px!important;
  }
  .common-draw-history-row{
    padding:8px 6px!important;
    margin-bottom:8px!important;
  }
  .common-draw-history-row__top{
    margin-bottom:6px!important;
    gap:8px!important;
    font-size:16px!important;
  }
  .common-draw-history-row__balls{
    display:grid!important;
    grid-template-columns:repeat(8,minmax(0,1fr))!important;
    gap:3px!important;
    align-items:start!important;
    justify-items:center!important;
    overflow-x:visible!important;
    padding-bottom:0!important;
    width:100%!important;
  }
  .common-draw-history-row__balls .common-draw-ball-item{
    min-width:0!important;
    width:100%!important;
    text-align:center!important;
  }
  .common-draw-history-row__balls .common-draw-ball{
    width:min(8.4vw,34px)!important;
    height:min(8.4vw,34px)!important;
    min-width:29px!important;
    min-height:29px!important;
    font-size:min(3.7vw,15px)!important;
    margin:0 auto!important;
  }
  .common-draw-history-row__balls .common-draw-plus{
    display:block!important;
    width:100%!important;
    line-height:min(8.4vw,34px)!important;
    min-height:29px!important;
    font-size:18px!important;
    text-align:center!important;
  }
  .common-draw-history-row__balls .common-draw-ball-item em{
    margin-top:3px!important;
    font-size:10px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
    transform:scale(.92)!important;
    transform-origin:center top!important;
    display:block!important;
  }
  .common-draw-history-row__footer{
    font-size:12px!important;
    line-height:1.35!important;
  }
}
@media (max-width: 360px){
  .common-draw-history-row{
    padding-left:4px!important;
    padding-right:4px!important;
  }
  .common-draw-history-row__balls{
    gap:2px!important;
  }
  .common-draw-history-row__balls .common-draw-ball{
    width:min(8.2vw,31px)!important;
    height:min(8.2vw,31px)!important;
    min-width:27px!important;
    min-height:27px!important;
    font-size:12px!important;
  }
  .common-draw-history-row__balls .common-draw-plus{
    line-height:min(8.2vw,31px)!important;
    min-height:27px!important;
    font-size:16px!important;
  }
  .common-draw-history-row__balls .common-draw-ball-item em{
    font-size:9px!important;
    transform:scale(.88)!important;
  }
}
/* mobile-history-one-line-fit-20260617 end */


/* ============================================================================
 *  三、映射段 —— 把参考站的规则套到我们的 .wf-* 类名上（**脚本生成，别手改**）
 *
 *  ★ 顺序跟参考站一致：同一选择器的多条规则按原文顺序排列，
 *    所以"后面覆盖前面"这个行为跟参考站完全一样。
 * ========================================================================== */


.wf-image{margin:8px 0;background:#fff;border-top:1px solid #eee;border-bottom:1px solid #eee}
.wf-image img{display:block;width:100%;height:auto}
.wf-biaoti{height:30px;line-height:30px;background:#eb2b82;color:#fff;text-align:center;font-size:12px;font-weight:900}
.wf-biaoti span{color:#fff000; font-weight:900;}
.wf-biaoti strong{margin-left:8px; color:#fff; font-size:13px; font-weight:900;}
.wf-host{text-align:center;color:#111;font-weight:900;font-size:13px;padding:6px 8px 5px;background:#fff;border-bottom:1px solid #eee}
.wf-open-log{margin-top:0;background:#fff;border-bottom:1px solid #eee;scroll-margin-top:10px}
.wf-table{width:100%}
.wf-lines{width:100%}
.wf-blocks{width:100%}
.wf-multi{width:100%}
.wf-row{display:grid;grid-template-columns:64px minmax(0,1fr) 68px;gap:4px;align-items:center;min-height:32px;padding:4px 8px;border-top:1px solid #efefef;font-size:12px;line-height:1.35}
.wf-line{display:grid;grid-template-columns:64px minmax(0,1fr) 68px;gap:4px;align-items:center;min-height:32px;padding:4px 8px;border-top:1px solid #efefef;font-size:12px;line-height:1.35}
.wf-period{color:#111;font-weight:900;white-space:nowrap;text-align:left}
.wf-line-head{color:#111;font-weight:900;white-space:nowrap;text-align:left}
.wf-pred{color:#ff003c;font-weight:900;text-align:center;word-break:break-word}
.wf-line-pred{color:#ff003c;font-weight:900;text-align:center;word-break:break-word}
.wf-open{color:#f01934;font-weight:900;text-align:right;white-space:nowrap;font-size:12px}
.wf-line-open{color:#f01934;font-weight:900;text-align:right;white-space:nowrap;font-size:12px}
.wf-block-prefix{color:#ee16ad!important;font-weight:900}
.wf-open-log{background:#fff;border-bottom:8px solid #f2f2f2;scroll-margin-top:10px}
.wf-open-log .wf-biaoti{height:32px;line-height:32px;background:#eb2b82;color:#fff;text-align:center;font-size:13px;font-weight:900}
.wf-open-log .wf-biaoti span{color:#ffe800;margin-right:8px}
.wf-open-log .wf-biaoti strong{color:#fff;font-size:14px}
.wf-open-log .wf-host{text-align:center;color:#111;font-weight:900;font-size:16px;padding:8px 8px 7px;background:#fff;border-bottom:1px solid #eee}
.wf-block{background:#fff;border-bottom:1px solid #eee}
.wf-block-period{min-height:38px;line-height:38px;text-align:center;background:#fff3c8;color:#8a5a00;font-size:14px;font-weight:900;border-top:1px solid #f6dd8c;border-bottom:1px solid #f2b53d}
.wf-block-pred{color:#ff003c;font-size:13px;line-height:2;font-weight:900;white-space:normal;word-break:break-word}
.wf-block-open{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:#ff0000;font-size:13px;font-weight:900;white-space:nowrap}
.wf-row{grid-template-columns:58px minmax(0,1fr) 60px;font-size:11px;padding-left:6px;padding-right:6px}
.wf-line{grid-template-columns:58px minmax(0,1fr) 60px;font-size:11px;padding-left:6px;padding-right:6px}
.wf-block-pred{font-size:12px}
.wf-block-open{right:8px;font-size:12px}
.post-detail-content .wf-block-prefix{color:#ee16ad!important}
.wf-tip{background:#fff; border-bottom:1px solid #e6d3b1; padding:8px 8px 7px; text-align:center; line-height:1.9; font-size:15px; font-weight:500;}
.wf-tip p{margin:0; color:#111;}
.wf-tip span{color:#1f58ff; font-weight:500;}
.wf-hit{display:inline-block; background:#ffe35a; color:#d60000; border-radius:3px; padding:0 2px; font-weight:900;}
.wf-row.is-generated .wf-pred, .wf-row.is-generated .wf-open{font-weight:900;}
.wf-row.is-generated .wf-pred, .wf-row.is-generated .wf-line-open{font-weight:900;}
.wf-row.is-generated .wf-line-pred, .wf-row.is-generated .wf-open{font-weight:900;}
.wf-row.is-generated .wf-line-pred, .wf-row.is-generated .wf-line-open{font-weight:900;}
.wf-line.is-generated .wf-pred, .wf-line.is-generated .wf-open{font-weight:900;}
.wf-line.is-generated .wf-pred, .wf-line.is-generated .wf-line-open{font-weight:900;}
.wf-line.is-generated .wf-line-pred, .wf-line.is-generated .wf-open{font-weight:900;}
.wf-line.is-generated .wf-line-pred, .wf-line.is-generated .wf-line-open{font-weight:900;}
.wf-image{position:relative; display:block; width:100%; overflow:hidden;}
.wf-image{position:relative;display:block;width:100%;overflow:visible}
.site3-sanqi-bizhong .wf-row .wf-pred{min-height:1.4em}
.site3-sanqi-bizhong .wf-row .wf-line-pred{min-height:1.4em}
.site3-sanqi-bizhong .wf-line .wf-pred{min-height:1.4em}
.site3-sanqi-bizhong .wf-line .wf-line-pred{min-height:1.4em}
.site3-sanqi-bizhong .wf-row .wf-pred:empty::before{content:"\00a0"}
.site3-sanqi-bizhong .wf-row .wf-line-pred:empty::before{content:"\00a0"}
.site3-sanqi-bizhong .wf-line .wf-pred:empty::before{content:"\00a0"}
.site3-sanqi-bizhong .wf-line .wf-line-pred:empty::before{content:"\00a0"}
.wf-image{overflow:hidden !important; max-width:100%;}
.wf-open-log .wf-row, .wf-open-log .wf-pred, .wf-open-log .wf-period, .wf-open-log .wf-open, .wf-open-log .wf-host, .wf-open-log .wf-tip, .wf-open-log .template-empty{font-size:14px; line-height:1.5;}
.wf-open-log .wf-row, .wf-open-log .wf-pred, .wf-open-log .wf-period, .wf-open-log .wf-line-open, .wf-open-log .wf-host, .wf-open-log .wf-tip, .wf-open-log .template-empty{font-size:14px; line-height:1.5;}
.wf-open-log .wf-row, .wf-open-log .wf-line-pred, .wf-open-log .wf-period, .wf-open-log .wf-open, .wf-open-log .wf-host, .wf-open-log .wf-tip, .wf-open-log .template-empty{font-size:14px; line-height:1.5;}
.wf-open-log .wf-row, .wf-open-log .wf-line-pred, .wf-open-log .wf-period, .wf-open-log .wf-line-open, .wf-open-log .wf-host, .wf-open-log .wf-tip, .wf-open-log .template-empty{font-size:14px; line-height:1.5;}
.wf-open-log .wf-row, .wf-open-log .wf-pred, .wf-open-log .wf-line-head, .wf-open-log .wf-open, .wf-open-log .wf-host, .wf-open-log .wf-tip, .wf-open-log .template-empty{font-size:14px; line-height:1.5;}
.wf-open-log .wf-row, .wf-open-log .wf-pred, .wf-open-log .wf-line-head, .wf-open-log .wf-line-open, .wf-open-log .wf-host, .wf-open-log .wf-tip, .wf-open-log .template-empty{font-size:14px; line-height:1.5;}
.wf-open-log .wf-row, .wf-open-log .wf-line-pred, .wf-open-log .wf-line-head, .wf-open-log .wf-open, .wf-open-log .wf-host, .wf-open-log .wf-tip, .wf-open-log .template-empty{font-size:14px; line-height:1.5;}
.wf-open-log .wf-row, .wf-open-log .wf-line-pred, .wf-open-log .wf-line-head, .wf-open-log .wf-line-open, .wf-open-log .wf-host, .wf-open-log .wf-tip, .wf-open-log .template-empty{font-size:14px; line-height:1.5;}
.wf-open-log .wf-line, .wf-open-log .wf-pred, .wf-open-log .wf-period, .wf-open-log .wf-open, .wf-open-log .wf-host, .wf-open-log .wf-tip, .wf-open-log .template-empty{font-size:14px; line-height:1.5;}
.wf-open-log .wf-line, .wf-open-log .wf-pred, .wf-open-log .wf-period, .wf-open-log .wf-line-open, .wf-open-log .wf-host, .wf-open-log .wf-tip, .wf-open-log .template-empty{font-size:14px; line-height:1.5;}
.wf-open-log .wf-line, .wf-open-log .wf-line-pred, .wf-open-log .wf-period, .wf-open-log .wf-open, .wf-open-log .wf-host, .wf-open-log .wf-tip, .wf-open-log .template-empty{font-size:14px; line-height:1.5;}
.wf-open-log .wf-line, .wf-open-log .wf-line-pred, .wf-open-log .wf-period, .wf-open-log .wf-line-open, .wf-open-log .wf-host, .wf-open-log .wf-tip, .wf-open-log .template-empty{font-size:14px; line-height:1.5;}
.wf-open-log .wf-line, .wf-open-log .wf-pred, .wf-open-log .wf-line-head, .wf-open-log .wf-open, .wf-open-log .wf-host, .wf-open-log .wf-tip, .wf-open-log .template-empty{font-size:14px; line-height:1.5;}
.wf-open-log .wf-line, .wf-open-log .wf-pred, .wf-open-log .wf-line-head, .wf-open-log .wf-line-open, .wf-open-log .wf-host, .wf-open-log .wf-tip, .wf-open-log .template-empty{font-size:14px; line-height:1.5;}
.wf-open-log .wf-line, .wf-open-log .wf-line-pred, .wf-open-log .wf-line-head, .wf-open-log .wf-open, .wf-open-log .wf-host, .wf-open-log .wf-tip, .wf-open-log .template-empty{font-size:14px; line-height:1.5;}
.wf-open-log .wf-line, .wf-open-log .wf-line-pred, .wf-open-log .wf-line-head, .wf-open-log .wf-line-open, .wf-open-log .wf-host, .wf-open-log .wf-tip, .wf-open-log .template-empty{font-size:14px; line-height:1.5;}
.wf-open-log .wf-block-pred, .wf-open-log .wf-block-open, .post-type-detail-content, .post-type-detail-result, .post-type-detail-issue, .post-detail-content, .post-detail-result, .post-detail-issue{font-size:15px; line-height:1.65;}
.wf-open-log .wf-row, .wf-open-log .wf-pred, .wf-open-log .wf-period, .wf-open-log .wf-open, .wf-open-log .wf-host, .wf-open-log .wf-tip, .wf-open-log .template-empty{font-size:14px !important; line-height:1.5 !important;}
.wf-open-log .wf-row, .wf-open-log .wf-pred, .wf-open-log .wf-period, .wf-open-log .wf-line-open, .wf-open-log .wf-host, .wf-open-log .wf-tip, .wf-open-log .template-empty{font-size:14px !important; line-height:1.5 !important;}
.wf-open-log .wf-row, .wf-open-log .wf-line-pred, .wf-open-log .wf-period, .wf-open-log .wf-open, .wf-open-log .wf-host, .wf-open-log .wf-tip, .wf-open-log .template-empty{font-size:14px !important; line-height:1.5 !important;}
.wf-open-log .wf-row, .wf-open-log .wf-line-pred, .wf-open-log .wf-period, .wf-open-log .wf-line-open, .wf-open-log .wf-host, .wf-open-log .wf-tip, .wf-open-log .template-empty{font-size:14px !important; line-height:1.5 !important;}
.wf-open-log .wf-row, .wf-open-log .wf-pred, .wf-open-log .wf-line-head, .wf-open-log .wf-open, .wf-open-log .wf-host, .wf-open-log .wf-tip, .wf-open-log .template-empty{font-size:14px !important; line-height:1.5 !important;}
.wf-open-log .wf-row, .wf-open-log .wf-pred, .wf-open-log .wf-line-head, .wf-open-log .wf-line-open, .wf-open-log .wf-host, .wf-open-log .wf-tip, .wf-open-log .template-empty{font-size:14px !important; line-height:1.5 !important;}
.wf-open-log .wf-row, .wf-open-log .wf-line-pred, .wf-open-log .wf-line-head, .wf-open-log .wf-open, .wf-open-log .wf-host, .wf-open-log .wf-tip, .wf-open-log .template-empty{font-size:14px !important; line-height:1.5 !important;}
.wf-open-log .wf-row, .wf-open-log .wf-line-pred, .wf-open-log .wf-line-head, .wf-open-log .wf-line-open, .wf-open-log .wf-host, .wf-open-log .wf-tip, .wf-open-log .template-empty{font-size:14px !important; line-height:1.5 !important;}
.wf-open-log .wf-line, .wf-open-log .wf-pred, .wf-open-log .wf-period, .wf-open-log .wf-open, .wf-open-log .wf-host, .wf-open-log .wf-tip, .wf-open-log .template-empty{font-size:14px !important; line-height:1.5 !important;}
.wf-open-log .wf-line, .wf-open-log .wf-pred, .wf-open-log .wf-period, .wf-open-log .wf-line-open, .wf-open-log .wf-host, .wf-open-log .wf-tip, .wf-open-log .template-empty{font-size:14px !important; line-height:1.5 !important;}
.wf-open-log .wf-line, .wf-open-log .wf-line-pred, .wf-open-log .wf-period, .wf-open-log .wf-open, .wf-open-log .wf-host, .wf-open-log .wf-tip, .wf-open-log .template-empty{font-size:14px !important; line-height:1.5 !important;}
.wf-open-log .wf-line, .wf-open-log .wf-line-pred, .wf-open-log .wf-period, .wf-open-log .wf-line-open, .wf-open-log .wf-host, .wf-open-log .wf-tip, .wf-open-log .template-empty{font-size:14px !important; line-height:1.5 !important;}
.wf-open-log .wf-line, .wf-open-log .wf-pred, .wf-open-log .wf-line-head, .wf-open-log .wf-open, .wf-open-log .wf-host, .wf-open-log .wf-tip, .wf-open-log .template-empty{font-size:14px !important; line-height:1.5 !important;}
.wf-open-log .wf-line, .wf-open-log .wf-pred, .wf-open-log .wf-line-head, .wf-open-log .wf-line-open, .wf-open-log .wf-host, .wf-open-log .wf-tip, .wf-open-log .template-empty{font-size:14px !important; line-height:1.5 !important;}
.wf-open-log .wf-line, .wf-open-log .wf-line-pred, .wf-open-log .wf-line-head, .wf-open-log .wf-open, .wf-open-log .wf-host, .wf-open-log .wf-tip, .wf-open-log .template-empty{font-size:14px !important; line-height:1.5 !important;}
.wf-open-log .wf-line, .wf-open-log .wf-line-pred, .wf-open-log .wf-line-head, .wf-open-log .wf-line-open, .wf-open-log .wf-host, .wf-open-log .wf-tip, .wf-open-log .template-empty{font-size:14px !important; line-height:1.5 !important;}
.wf-open-log .wf-block-pred, .wf-open-log .wf-block-open, .post-type-detail-content, .post-type-detail-result, .post-type-detail-issue, .post-detail-content, .post-detail-result, .post-detail-issue{font-size:15px !important; line-height:1.65 !important;}
.wf-image[data-lhc-image-layer-template="1"],.wf-image{position:relative!important;display:block!important;width:100%!important;max-width:100%!important;overflow:hidden!important;-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important;}
.wf-image{background:transparent!important;}
.wf-image[data-lhc-image-layer-template="1"], .wf-image{position:relative!important; display:block!important; width:100%!important; max-width:100%!important; overflow:hidden!important; background:transparent!important; -webkit-text-size-adjust:100%!important; text-size-adjust:100%!important;}
.wf-image .lhc-image-layer, .wf-image .lhc-image-fixed-layer{position:absolute!important; box-sizing:border-box!important; transform:none!important; -webkit-transform:none!important; transform-origin:left top!important; -webkit-transform-origin:left top!important; -webkit-text-size-adjust:100%!important; text-size-adjust:100%!important;}
.wf-image .lhc-image-layer-text{white-space:pre-line!important; word-break:keep-all!important; overflow-wrap:normal!important; word-wrap:normal!important;}
.wf-image .lhc-image-layer-text[data-long-text="1"]{display:block!important; white-space:pre-wrap!important; word-break:normal!important; overflow-wrap:break-word!important; word-wrap:break-word!important; line-break:auto!important;}
.wf-image .lhc-image-layer-img, .wf-image img.lhc-image-layer-img{background:transparent!important; border:0!important; box-shadow:none!important; outline:0!important; object-fit:contain!important;}


/* ============================================================================
 *  四、我们这边特有的适配
 * ========================================================================== */

/* 页面容器：参考站是 max-width:720px 居中白底 —— 我们 #app 用同样的规格（覆盖 index.php 里的 640）。
   ★ 用 !important 是因为 index.php 的 #app 规则在页面 <head> 里、位置在这份 CSS **之后**？不是 ——
     index.php 的 <style> 在前、这份 <link> 在后，同特异度下后者赢，其实不用 !important。
     这里还是写上，因为 index.php 那条是 #app（特异度高），必须压过它。 */
#app {
    max-width: 720px !important;
    background: #fff;
}

/* 我们的彩种 Tab（.kj-tabs/.kj-tab）在参考站是 .site-tabs/.tab-btn —— 皮肤变量已经换了，
   这里再把形状对上（参考站是方块、选中洋红底白字）。 */
.kj-tabs { border-bottom-color: #f7d4e4; }
.kj-tab.active { color: #eb2b82; border-bottom-color: #eb2b82; }

/* 公告条：我们是 .bg-card 的灰底块，参考站是一条通栏 —— 对齐它。 */
.marquee-strip { background: #fff; border-bottom: 1px solid #f7d4e4; }

/* 右下角那两颗浮动按钮：颜色跟着洋红走（皮肤变量已换，这里只对齐参考站的观感）。 */
.to-top, .to-home { background: #eb2b82; }

/* 锚点导航：参考站叫 .quick-nav（sticky + 5 列网格），我们叫 .nav-anchor。
   上面映射段已经把 .quick-nav 的规则复制给了 .nav-anchor 吗？没有 —— .quick-nav 不在 MAP 里，
   因为我们的结构是 ul>li>a、参考站是裸 a。所以这里手写一份等价规则。 */
.nav-anchor {
    background: #fff;
    border-bottom: 1px solid #f7d4e4;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    padding: 7px 8px 6px;
}
.nav-anchor ul {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    padding: 0;
    width: auto;
}
.nav-anchor-item {
    height: 24px;
    line-height: 24px;
    border-radius: 999px;
    background: linear-gradient(#f75ba5, #e7247b);
    color: #fff !important;
    font-size: 12px;
    font-weight: 900;
    padding: 0 6px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
/* 选中的那个：参考站没有"选中态"（它只是滚动），我们用更深的洋红表示 */
.nav-anchor-item.active { background: #c9145f; }

/* ---- 导航**分组**（2026-10-08 新加）-----------------------------------------
   ★ 起因（用户原话）：「这个区域的导航按钮，看着都一样」—— 37 个胶囊同形状、
     同颜色、同大小，除了文字没有任何区别，想找"七尾中特"得从头扫到尾。
     参考站那边导航也只有一种按钮，所以这一块是**我们自己加的**，不是照抄。
   ★ 排布：**左边一列窄标签 + 右边这一类自己的按钮**。
     ★ 特意**不是**「标签单独占一行」—— 那样 5 个组得多出 5 行，
       手机上一屏全是导航；现在这样总高度跟原来基本一样（都是 8 行上下）。
   ★ 列数仍是 5（跟参考站一样），只是每行左边让出 48px 给标签。
   ★ 分组数据来自接口的 `nav_groups`（见 includes/front.php 的 f_nav_groups()），
     是**另加的一份**，原来的 `nav` 没动 —— 老模板照旧。 */
.nav-group {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 5px;
}
.nav-group + .nav-group { margin-top: 4px; }
.nav-group ul {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
    padding: 0;
    width: auto;
}
.nav-group-title {
    font-size: 11px;
    font-weight: 900;
    line-height: 1.15;
    text-align: center;
}
.nav-group-title .fa { display: block; font-size: 13px; margin-bottom: 1px; }

/* 类别配色：形状还是参考站那个胶囊（圆角、渐变、内阴影一个不动），**只换底色**。
   这样"分组"一眼看得见，又不会把参考站那身洋红拆得七零八落 ——
   生肖类特意留成参考站原本的洋红，它是最大的一类。 */
.nav-anchor-item.cat-zodiac { background: linear-gradient(#f75ba5, #e7247b); }  /* 生肖 · 洋红 */
.nav-anchor-item.cat-number { background: linear-gradient(#4f8ef7, #2563eb); }  /* 号码 · 蓝 */
.nav-anchor-item.cat-hwe    { background: linear-gradient(#f7a94f, #dd7a00); }  /* 头尾波色 · 橙 */
.nav-anchor-item.cat-poem   { background: linear-gradient(#a98bf7, #7c3aed); }  /* 特殊玩法（原「玄机诗句」）· 紫 */
.nav-anchor-item.cat-kill   { background: linear-gradient(#f76b6b, #d92b2b); }  /* 绝杀 · 红 */

.nav-group-title.cat-zodiac { color: #e7247b; }
.nav-group-title.cat-number { color: #2563eb; }
.nav-group-title.cat-hwe    { color: #dd7a00; }
.nav-group-title.cat-poem   { color: #7c3aed; }
.nav-group-title.cat-kill   { color: #d92b2b; }

/* 两列表头（我们三列表有表头，参考站没有）—— 对齐参考站的配色 */
.wf-row.wf-head { background: #eb2b82; color: #fff; }

/* 玩法区块的滚动留白：参考站是 10px，我们因为导航更高，留 46px */
.wf-open-log { scroll-margin-top: 46px; }

/* ---- 牌匾里那两格文字（参考站是 .template-title-bar 里的 span / strong，
        我们用的是 div —— 映射换不过去，这里手写一份等价的）---- */
.wf-biaoti .wf-text1 {
    color: #fff000;
    font-weight: 900;
    font-size: 13px;
}
.wf-biaoti .wf-text2 {
    margin-left: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
}

/* ---- 参考站的开奖球是图片（ball-red/blue/green.png），已经下到 assets/img/draw/ ---- */

/* ============================================================================
 *  五、分组定义块（.wf-tip）对齐参考站的 .template-desc-board
 *
 *  ★ 参考站的结构是：
 *      <div class="template-desc-board">
 *        <p><span>单笔：</span>鼠、龙、马、蛇、鸡、猪</p>
 *        <p><span>双笔：</span>虎、猴、狗、兔、羊、牛</p>
 *      </div>
 *    我们是 .wf-tip > .wf-tip-item（flex 左右分栏），**结构不一样**，
 *    映射段换不过来 —— 所以这里按它的观感（居中、每项一行、15px、行高 1.9）手写一份。
 *  ★ 组名（我们的 <b>）对齐它的 <span>：蓝色 #1f58ff、字重 500。
 * ========================================================================== */
.wf-tip,
.wf-tip-two,
.wf-tip-many {
    display: block;
    padding: 8px 8px 7px;
    text-align: center;
    line-height: 1.9;
    font-size: 15px;
    font-weight: 500;
    color: #111;
    background: #fff;
    border-bottom: 1px solid #e6d3b1;
    margin: 0;
}
.wf-tip-item {
    display: block;
    width: auto;
    padding: 0;
}
.wf-tip-item b {
    color: #1f58ff;
    font-weight: 500;
}

/* ============================================================================
 *  六、页脚（照 hd7671.top 的 .bottom-image-list + .site3-bottom-text）
 *
 *  ★ 参考站的结构是：
 *      <section class="bottom-image-list">
 *        <figure><img src=".../bottom/bottom_01.webp" alt="底部资料图片"></figure>
 *        ...（3 张）
 *        <div class="site3-bottom-text"><h3>【澳门财神爷】</h3><p>…介绍…</p></div>
 *      </section>
 *    ★ 参考站 CSS 里**有**这几条规则（而且都带 !important）—— 它们已经随上面"照抄"那一段
 *      一起进来了，**会压过下面这几条**。下面这份等于兜底 + 注释，说明这些类名是干嘛的。
 * ========================================================================== */
.bottom-image-list {
    background: #fff;
    border-top: 8px solid #f2f2f2;
}
.bottom-image-list figure { margin: 0; }
.bottom-image-list figure img { display: block; width: 100%; height: auto; }
.site3-bottom-text {
    padding: 12px 12px 18px;
    text-align: center;
    color: #666;
    font-size: 12px;
    line-height: 1.8;
}
.site3-bottom-text h3 {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 900;
    color: #eb2b82;
}
.site3-bottom-text p { margin: 0; }

/* ============================================================================
 *  七、玩法区块（PlayBlock 覆写）的配套 —— 就这几条
 *
 *  ★★ 玩法区的**结构**改由 `assets/js/tpl-layout_d.js` 里的 PlayBlock 覆写给出，
 *     它直接写的是**参考站的类名**（.template-row / .row-issue / .row-content /
 *     .large-template-row …）。那些类的样式上面「二、参考站原样照抄」里**一字不差地在**，
 *     所以这里只需要补**参考站没有、而我们多出来**的那几样东西。
 *
 *  ★ 为什么类名换回了参考站原生的、不再走 .wf-* 映射：
 *    映射那套是为「不改 JS 类名」准备的（app.js 三套模板共用，改类名会带崩老模板）；
 *    而 PlayBlock 的覆写**只在本模板生效**，直接用参考站类名反而更准 ——
 *    结构跟参考站逐字对应，中间没有任何一层翻译，将来参考站改版重跑生成脚本就同步了。
 * ========================================================================== */

/* 返回箭头（★ 我们多加的，参考站没有）。它得有个定位父级 —— 参考站的
   .template-title-bar 上没有 position，这里补一条，别的什么都不动。 */
.template-title-bar { position: relative; }

.wf-back {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
    color: #fff000;              /* 跟牌匾上那格黄字同色，不另起一个色 */
    text-decoration: none;
}

/* 命中高亮：参考站是 <mark class="hit-item">（黄底红字），
   而我们的 pc_render_pred() 输出的是 <span class="zhong">（PHP 那边改不了，也不该为皮肤改）。
   index.php 里有一条全局的 .zhong{color:#dc2626}（只变色、不加底），
   这里按参考站 .hit-item 的样子补一份 —— 前缀带类名，特异度更高，压得住那条。 */
.template-row .zhong,
.large-content-lines .zhong,
.ladder-body .zhong {
    display: inline-block;
    background: #ffe35a;
    color: #d60000;
    border-radius: 3px;
    padding: 0 2px;
    font-weight: 900;
}

/* 没传图时的提示（参考站没有这一档，是我们自己的兜底）。 */
.wf-image-empty {
    padding: 24px 12px;
    text-align: center;
    font-size: 13px;
    color: #999;
    background: #fff;
}

/* ---- 内容列对齐（2026-10-08）------------------------------------------------
   ★ 起因（用户原话）：「能够对齐显示吗？」—— 贴的是
       「六肖⑫码【羊:04.06】【鸡:07.08】【龙:09.17】
        【兔:30.38】【牛:39.40】【猪:41.46】」
     这种两行。第二行没有玩法名前缀，而参考站那句 `.row-content{text-align:center}`
     把它**单独居中**，于是两行的「【」不在同一条竖线上，看着是歪的。
   ★ 做法：内容列拆成**两列 grid** —— 左列玩法名、右列预测，右列内部左对齐。
     于是每一行的「【」都从同一条竖线开始；
     `justify-content: center` 保证**整块本身还是居中的**（参考站就是居中，这点不能丢）。
   ★ 预测是 pc_render_pred() 按 perline **预先插好 br** 的（六肖⑫码 3 个一行、
     18码中特要折行），所以这里**不去动它的换行** —— 只把"每一行从哪儿开始"给定住。
   ★ 别用 `table-layout` 或者固定列宽：玩法名长短差很多（四肖中特 4 字 /
     三期必中四肖 6 字），auto 列按内容定宽，同一个玩法内每一期都是同一条竖线。 */
.row-content {
    display: grid;
    /* ★ 两列都按内容定宽（auto），再用 justify-content 尽量把整块往中间放。
       ★ **不能用 max-width:fit-content + margin:auto**：`.row-content` 是 .template-row 的
         grid item，`justify-self` 默认 stretch 会把它**拉满整列**，于是没有剩余空间，
         auto margin 被算成 0 —— 实测宽 552px（整列宽）、左右 margin 都是 0px，
         整块贴左边（用户 2026-10-08 报的「没居中」）。
       ★ text-align:center 是让**每一行内容居中**（参考站原本也是）。
         这一条跟"行首对齐"**不冲突**：玩法名在**左边独立一列**、不占内容行的宽度，
         所以同一个玩法各行的内容宽度是一致的，居中之后行首自然对齐成一条竖线 ——
         内容行长度真不一样时（不同玩法之间）才会看出差别。
       ★ 名字那格单独拉回左对齐，别跟着居中。 */
    grid-template-columns: auto minmax(0, auto);
    justify-content: center;
    text-align: center;
    /* 名字顶对齐 —— 内容有三行时，默认的 stretch 会把「三十六码」那一格拉高，
       字号看着就跑到整块的中间去了（跟第一行不齐）。 */
    align-items: start;
}
.row-content .rc-name { white-space: nowrap; text-align: left; }
.row-content .rc-pred { min-width: 0; }
/* ★ **一行一个块** —— 哪几个片段属于同一行，由接口的 pred_lines 定（见 pc_pred_lines()），
   这里只是把「行」画成一个块。前端自己按 br 切是不行的：br 一旦被包进
   inline-block 片段里，就只在块内部换行、管不到块与块之间，「一行三个」根本不生效。 */
.row-content .rc-line { display: block; }
/* ★ **一个片段一个块** —— 这是"不许拆开"的关键。
   试过用纯 CSS 拦（word-break:keep-all、line-break:strict），**拦不住**：
   「【」是开括号，浏览器默认就允许在它后面断行，行尾正好排到它时照样拆成
   「【」+「虎:13.19】」两截（连着试了两轮都是这样）。
   display:inline-block 才是硬的 —— 这一块要么整体留在行内、要么整个掉下一行。
   ★ 右边距代替原来片段之间的空格（拆成块之后那个空格就没了）。 */
.row-content .rc-seg {
    display: inline-block;
    margin-right: 6px;
}
/* 窄屏：三个片段一行本来也放不下（430 屏内容列只有约 212px 可用）。
   把"行"降级成 inline —— 于是片段的换行交回给浏览器按容器宽度自己排，
   变成一行两个，**均匀、不头重脚轻**（宽屏挤四个那种就是这里没管好）。 */
@media (max-width: 519px) {
    .row-content .rc-line { display: inline; }
}

/* ============================================================================
 *  八、分档阶梯表（layout = ladder）—— 「九肖一码」
 *
 *  ★ 配色照**用户给的参考站截图**：黄绿底 + 黑框 + 蓝紫头。
 *    跟这套模板的洋红主调**故意不一样** —— 用户明确要「照图的绿色」。
 *  ★ 这是这套模板**专有**的块：参考站 hd7671 那边压根没有这种块，
 *    所以不走「把参考站类名映射过来」那套，直接新写 —— 类名 .ladder-*，
 *    跟 .template-* / .wf-* 都不打架。
 *  ★ 结构来自 tpl-layout_d.js 里 PlayBlock 覆写的 ladder 分支：
 *    一期挂十二档、一档一行，三列 = 期号+档名 / 内容 / 开奖结果。
 * ========================================================================== */

/* 牌匾：图里是蓝紫底 + 黄字（这套模板别处是洋红），单独给这一档换掉 */
.is-ladder .template-title-bar { background: #2d1b8f; }
.is-ladder .template-domain    { border-bottom: 1px solid #2d1b8f; }

.ladder-table {
    /* ★ 底色和边框**挪到每一期身上**了（见下面的 .ladder-period）——
       一期一块、块之间留一道白缝，这样两期才分得开。
       这里只当个容器，自己不画任何东西。 */
    background: transparent;
}
/* 一期一块。用户 2026-10-08：「两期之间的间隔不够明显，看着都连起来了」——
   原来是十二档一条条紧挨着（只有 1px 黑线），十二档之后紧接着就是下一期，
   压根看不出哪里换期了。 */
.ladder-period {
    background: #cfe36e;               /* 黄绿底 —— 照图 */
    border: 1px solid #111;
}
.ladder-period + .ladder-period { margin-top: 10px; }   /* ★ 两期之间那道缝 */
.ladder-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) 72px;
    align-items: center;
    min-height: 42px;
    border-bottom: 1px solid #111;     /* 行与行之间那条黑线，照图 */
    font-size: 14px;
    font-weight: 900;
    line-height: 1.35;
}
/* 最后一行不画下边框 —— 下面就是 .ladder-table 自己的边框，画了就成双线 */
.ladder-row:last-child { border-bottom: 0; }

.ladder-tag {
    padding: 4px 6px;
    color: #111;
    text-align: center;
    white-space: nowrap;               /* 「262期九肖一码」不许折行 */
}
.ladder-body {
    padding: 4px 6px;
    color: #e60000;                    /* 内容红字 —— 照图 */
    text-align: center;
    word-break: break-word;
}
.ladder-res {
    padding: 4px 6px;
    color: #111;
    text-align: center;
    white-space: nowrap;
}

/* 窄屏：三列挤一挤，「期号+档名」那列让出点位置，免得把内容压没了 */
@media (max-width: 519px) {
    .ladder-row {
        grid-template-columns: 78px minmax(0, 1fr) 62px;
        font-size: 12px;
        min-height: 38px;
    }
    .ladder-tag, .ladder-body, .ladder-res { padding: 3px 3px; }
}

/* ============================================================================
 *  九、牌匾上的字改成**黑色**（用户 2026-10-08 要求：模板4 的横幅字体用黑色）
 *
 *  ★ 参考站那两格字是「站点名黄字（#fff000）+ 玩法名白字」，上面「二、参考站原样照抄」
 *    那段里原样带着。但用户换上了**自己的横幅底图**（偏亮），白字/黄字压不住，
 *    要求改成黑字。
 *  ★ 所以这条**写在这一节、不去动上面照抄那段** —— 参考站原样那份保持不动，
 *    "我们改了哪一处"一眼看得出来；将来参考站改版重跑生成脚本也不会把这条冲掉。
 *  ★ 四条选择器缺一不可：`.large-template-block .template-title-bar span`（每期一块那档的牌匾）
 *    在照抄段里特异度是 (0,2,1)，只写 `.template-title-bar span`（0,1,1）**压不过它**。
 *  ★ 返回箭头（.wf-back）也一起改了 —— 它本来就压在牌匾左边，
 *    原来那个黄色在浅色横幅上基本看不见（虽然不完全算"字体"，但不改就等于坏掉了）。
 * ========================================================================== */
.template-title-bar span,
.template-title-bar strong,
.large-template-block .template-title-bar span,
.large-template-block .template-title-bar strong {
    color: #000;
}
.wf-back { color: #000; }

/* ---- 官网行里那个小图标（🚀）----
   模板 C 的那条是写死成 `.wf-host .wf-rocket` 的，而模板 D 的官网行用的是参考站的
   `.template-domain`，套不上 —— 图标和后面那串文字就黏在一起了。
   ★ 跟弹窗是同一类毛病（HTML 在、CSS 没跟过来），只是没那么显眼。 */
.template-domain .wf-rocket { margin-right: 4px; }

/* ======================================================================
   公告弹窗 · 中式斜切八边（2026-10-09 加）
   外壳：金色描边 + 切角 + 洋红标题。
     ★★ 不能用 border 做那圈描边 —— clip-path 会把边框一起裁掉；
        也不能用 drop-shadow 做投影 —— 同一元素上有 clip-path 时投影同样被裁掉。
        所以「金色描边」是「浅金底 + padding 3px + 里层再切一次角」做出来的。
   内容：居中、字大。
   ====================================================================== */
.gg-box {
    background: linear-gradient(135deg, #ffd600, #ffa000);   /* 这层就是那圈金边 */
    border: 0; border-radius: 0; padding: 3px;
    clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px),
                       calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
    box-shadow: none;
}
.gg-head {
    background: linear-gradient(135deg, #f75ba5, #e7247b);
    padding: 16px 22px 14px;
    border: 0;
    clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px),
                       calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
}
.gg-title { color: #ffee58; font-size: 17px; font-weight: 800; letter-spacing: 2px; }
.gg-close { color: #fff; }
.gg-yellow {
    background: #fffbe0; border: 2px solid #ffd600;
    border-radius: 0; margin: 16px 18px 0; padding: 13px 16px; color: #d81b60;
    box-shadow: inset 0 0 0 3px #fffbe0, inset 0 0 0 4px #ffe57f;   /* 内层第二道细金线 */
}
.gg-white  { background: #fff6fa; padding: 8px 20px 14px; color: #4a2536; }
.gg-warn   { background: #fff0f5; border: 2px solid #f7a8c9; border-radius: 0; color: #ad1457; }
.gg-footer { background: #fff6fa; color: #c98aa8; }
/* 内容排布：居中、字大 */
.gg-ln { text-align: center; }
.gg-yellow .gg-ln + .gg-ln { font-size: 15px; margin-top: 6px; }
.gg-white  .gg-ln { font-size: 14px; line-height: 2.3; }

/* 时间和网址前面那两个图标前缀是**绿皮那套的默认**（写在 index.php 里）——
   本模板不要，关掉。 */
#ggDrawTime::before, #ggOfficial::before { content: none; }