/* ============================================================================
 *  模板 B · 皮肤 + 玩法记录配色（红/绿）
 *
 *  ★ 为什么这里带着整份皮肤：这套机制是「一个模板 id 一份 theme-<id>.css」——
 *    选了 layout_b 就**不会**再引 theme-blue_plaque.css 了。所以模板自己的
 *    CSS 必须把皮肤一起带上，否则会退回默认绿皮。
 *    代价：皮肤和模板**绑在一起** —— 换皮肤要改这里。
 *
 *  本文件 = 牌匾蓝金皮肤（照抄 theme-blue_plaque.css）。
 *  ★ 玩法记录的配色**不写** —— 用 index.php 里的默认值（中→红、错→绿，
 *    徽章实心色块）。要改就改 index.php 里那几行，或者在这里覆盖。
 * ========================================================================== */

/**
 * 皮肤：中式牌匾蓝金（blue_plaque）
 *
 * 参考稿：1122315.my（新澳十点半）—— 抓取记录见 桌面\项目维护\参考稿\皮肤规格.md
 *
 * 落地方式：这份 CSS 只在「当前皮肤 = blue_plaque」时被 index.php 引入
 * （见 index.php 末尾的 is_file 判断），所以里面的规则不用加 body.theme- 前缀 ——
 * 同一时刻只会加载一套皮肤。
 *
 * 两件事：
 *   ① 重定义 :root 的皮肤变量 —— app.js 里的 text-brand / bg-card 等会跟着变；
 *   ② 重写几个语义组件的样式（牌匾标题条、导航网格、块状 Tab）。
 *
 * 变量值取自参考站的实际计算样式（Chrome CDP getComputedStyle），不是从它那
 * 40 层 !important 的样式表里读的 —— 那站静态读必错，实渲出来主色是蓝不是绿。
 */

/* ==================== 一、配色变量 ==================== */

:root {
    --c-brand-rgb:        10 92 218;     /* #0a5cda 宝蓝（参考站导航胶囊色）*/
    --c-brand-light-rgb:  61 127 232;    /* #3d7fe8 渐变亮端 */
    --c-brand-dark-rgb:   7 48 108;      /* #07306c 深藏青（参考站表头渐变暗端）*/
    --c-brand-soft-rgb:   238 244 255;   /* #eef4ff 极浅蓝底 */
    --c-page-rgb:         255 255 255;   /* 参考站页面是纯白，不是浅灰 */
    --c-card-rgb:         255 255 255;
    --c-gold-rgb:         255 215 0;     /* #FFD700 牌匾金 */
    --c-gold-soft-rgb:    255 251 230;   /* #fffbe6 */
    --c-gold-deep-rgb:    166 124 0;     /* #a67c00 金在浅底上要压深才读得清 */
}

/* ==================== 二、牌匾标题条 ====================
 *
 * 这套皮肤的记忆点全在这儿：深藏青底 + 两端金色卷草纹（一张图），
 * 金色楷体字压在正中间，带金色辉光。
 *
 * 参考站的牌匾是「一张大图 + 绝对定位文字」，我们做不到（玩法名来自数据库、随时会改），
 * 所以用「背景图 + 居中文字」实现 —— 两端纹样是图的一部分，中间留白处放字。
 *
 * 结构来自 app.js 的 PageIndex：
 *   <div class="wanfa-head vN">
 *     <div><span class="wh-badge">站点名</span><h2 class="wh-name">玩法名</h2></div>
 *     <span class="wh-id">#id</span>
 *   </div>
 * 新皮肤下把 badge + name 拼成「【站点名】玩法名」，id 隐掉。
 */

/* 变体选择器要一起写上：绿皮用 .wanfa-head.v1 / .v2 挂了三套渐变色，
   那两个选择器的特异度是 (0,2,0)，光写 .wanfa-head (0,1,0) 盖不住 ——
   表现就是"只有第一类区块变成了牌匾，另两类还是绿条"。 */
.wanfa-head,
.wanfa-head.v0,
.wanfa-head.v1,
.wanfa-head.v2 {
    display: flex;
    align-items: center;
    justify-content: center;       /* 原来是 space-between，牌匾要居中 */
    height: 48px;                  /* 参考站实测值 */
    padding: 0;
    background-image: url('../img/plaque-bg.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;    /* 拉伸到底 —— 两端纹样会跟着变形，参考站就是这么用的 */
    border-radius: 0;
    /* 三种变体在新皮肤下长得一样（牌匾只有一款），把绿皮的三色轮换抵消掉 */
    background-color: transparent;
}

/* 内层 flex 容器（Tailwind 的 flex items-center gap-2）—— 牌匾里两段要贴着排 */
.wanfa-head > div { gap: 0; }

/* 牌匾文字：金色 + 楷体 + 字距拉开 + 金色辉光。badge 和 name 共用同一套字。 */
.wanfa-head .wh-badge,
.wanfa-head .wh-name {
    color: #FFD700;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 4px;
    font-family: "楷体", "KaiTi", "STKaiti", "SimKai", serif;
    text-shadow: 2px 2px 5px #000, 0 0 10px rgba(255, 215, 0, .5);
    white-space: nowrap;
}

/* 站点名本来是个小徽章，牌匾里改成「【站点名】」——方括号用伪元素补，
   免得去动后台录入的站点名本身 */
.wanfa-head .wh-badge {
    background: none;
    padding: 0;
    border-radius: 0;
    line-height: 1;
}
.wanfa-head .wh-badge::before { content: '【'; }
.wanfa-head .wh-badge::after  { content: '】'; }

.wanfa-head .wh-name { line-height: 1; }

/* 右上角那个 #01 编号在牌匾上没有位置，隐掉 */
.wanfa-head .wh-id { display: none; }

/* ==================== 三、锚点导航：5 列网格胶囊 ====================
 *
 * 参考站的导航是「蓝色圆角胶囊 + 白字」铺成网格（桌面 800px 宽时 5 列）。
 * 绿皮是单行横向滚动，这里整个换掉。
 */

.nav-anchor {
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    overflow: visible;             /* 绿皮要横向滚，网格不需要 */
}

.nav-anchor ul {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    padding: 4px;
    width: auto;                   /* 绿皮是 max-content */
}

.nav-anchor-item {
    display: block;
    text-align: center;
    height: 23px;
    padding: 3px 0;
    font-size: 13px;
    line-height: 17px;
    color: #fff;
    background: #0a5cda;
    border-radius: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;       /* 玩法名太长就省略，别把格子撑破 */
}

/* 参考站的胶囊平时都是蓝的，hover 才变红 —— 我们没有 hover 态可用，
   就拿这个红当「当前锚点」的高亮色。 */
.nav-anchor-item.active { background: #da183b; }

/* ==================== 四、彩种 Tab：块状 ====================
 *
 * 参考站是「选中的黑底白字 + 其余浅灰底深灰字」的方块，不是下划线式。
 */

.kj-tabs {
    border-bottom: 0;
    gap: 1px;
}

.kj-tab {
    padding: 8px 0;
    font-size: 14px;
    border: 0;
    background: #f0f0f0;
    color: #666;
}

.kj-tab.active {
    background: #1a1a1a;
    color: #fff;
    border: 0;
    font-weight: 600;
}

/* ==================== 五、卡片 ====================
 *
 * 参考站的卡片是「白底 + 淡蓝边框 #bcd7ff + 圆角 10px + 淡阴影」。
 */

/* ★ 写成 section.wanfa-block 而不是 .wanfa-block：
   Tailwind Play CDN 是运行时把生成的样式 append 到 <head> 末尾的，
   位置在这份 <link> 之后 —— 同等特异度下它赢。加一个元素名把特异度提到 (0,1,1)，
   才盖得住模板上的 rounded-lg（8px → 10px）。 */
section.wanfa-block {
    border: 1px solid #bcd7ff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    /* 卡片顶部就是牌匾，让它的方角盖住卡片圆角 —— 牌匾两端有纹样，
       跟着圆角裁掉反而好看。overflow 保持绿皮的 hidden。 */
}

/* ==================== 六、正文排版 ====================
 *
 * 参考站表格行的实测值：行高 30px、字号 15px、正文 #333、分隔线 #e5e5e5。
 * 只调「玩法区块里的记录行」，不动别处的 slate 灰阶（那套在两套皮肤下都通用）。
 */

.wanfa-block .divide-y > div { border-color: #e5e5e5; }
.wanfa-block .divide-y > div > span:first-child { color: #b9c2cc; }

/* ============================================================================
 *  模板 C 的玩法区 —— 照参考站 4966889.com 那套
 *
 *  ★★ 2026-10-06 改版：**每个玩法一块**（参考站管这个叫 .open-log：
 *     牌匾 + 官网网址行 + 内容），一个彩种几十块一路排下来，顶上那条锚点
 *     导航跳的就是这里。区块**内部**长什么样，按玩法自己的呈现方式分五档 ——
 *     见下面「模板 C 的玩法详情」那几段的 .wf-*，首页和详情页共用一份
 *     （app.js 的 PlayBlock 组件，别再各写各的）。
 *
 *  ★ 改版前这里是一行一个玩法的绿标签列表（.gaoshoutie-box / .lvse-bq /
 *    .per / .content 那一套）—— 那其实是参考站**顶部文章区**的样子
 *    （神算子 2026278期【30码中奖】，点进去是 bbs.php?id=N），不是玩法区。
 *    用户 2026-10-06 指出「各玩法的呈现方式不对」，旧样式随之一并删掉。
 * ========================================================================== */

.title_text_liao {
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #c00;
    /* 左右留 8px：这一行现在直接贴着 #app 的边（外面那层 px-2 去掉了，见 PageIndex），
       不留一点的话标题一长就顶到屏幕边。 */
    padding: 12px 8px 8px;
}

/* 首页一屏排着几十个玩法区块。.wf-open-log 自带的 .2rem 上边距是给详情页定的
   （那一页只有一块），首页得再拉开一点，不然两块牌匾几乎贴在一起。 */
.wanfa-block + .wanfa-block { margin-top: .7rem; }

/* ============================================================================
 *  模板 C 的「玩法详情」—— 照参考站 4966889.com 的**玩法区块**（它叫 .open-log）
 *
 *  结构见 tpl-layout_c.js 的 PageWanfa：
 *    .wf-open-log > .wf-biaoti（牌匾）+ .wf-host（官网行）+ .wf-table（三列表）
 *
 *  ★ 数值逐条照抄参考站 `49tk/index-*.css` 里那几条：
 *    .open-log / .biaoti / .title-container / .text1 / .text2 / .host /
 *    .jingxuan-wubuzhong / .period-col / .box / .box2 /
 *    .color-zise / .color-red / .color-anhong / .bg-ffeb3b / .shangxuxian-000
 *    ★ 参考站的根字号就是浏览器默认的 16px，所以那边写成 rem 的值
 *      **原样搬过来就对**，不用换算。
 *
 *  ★ 唯一换掉的东西：牌匾的底图。参考站用的是它自己站的 /img/bui/title-bg.jpg，
 *    我们沿用项目里已有的 assets/img/plaque-bg.jpg（蓝金牌匾那张），
 *    跟模板 C 的皮肤是一套。其余一个数值没动。
 * ========================================================================== */

.wf-open-log {
    width: 95%;
    margin: .2rem auto 0;
}

/* ★ 这一块自带 border-box，**别指望 Tailwind 的 preflight**。
   参考站那套宽度是 期数 29% + 预测 flex:1 + 开奖 29%，还各带 padding 和右边框 ——
   content-box 下这些会全加起来，直接撑破 430px 的屏（实测：静态预览里
   「开奖结果」那一列被切掉一半）。真站点有 Tailwind 的 `*{box-sizing:border-box}` 兜着，
   但单文件预览把 CDN 脚本删了，就没这层了 —— 所以这里自己写一条，两边都对。 */
.wf-open-log,
.wf-open-log * {
    box-sizing: border-box;
}

/* ---- 牌匾：左边站点名（金色渐变字）、右边玩法名（白底半透明胶囊） ---- */
.wf-biaoti {
    position: relative;
    width: 100%;
    height: 4.2rem;
    background-image: url('../img/plaque-bg.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 返回箭头。★ 这是**我们多加的**：参考站那个区块是首页里的"一块"、不需要返回，
   我们这儿是独立路由，不留一条路会出不去（虽然右下角有「返回首页」，但那不是返回）。
   压在牌匾左边、用金色，跟牌匾同一个色系，不破坏版式。 */
.wf-back {
    position: absolute;
    left: .3rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    line-height: 1;
    color: #ffd700;
    text-decoration: none;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, .9);
}

/* 首页那几十块招牌：牌匾整块可点（点了进该玩法的详情页）—— 给个手型提示。
   详情页不加这个类（那时牌匾上没有可点的地方，加了反而误导）。 */
.wf-biaoti-link { cursor: pointer; }

.wf-title-container {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    padding: 0 3.5rem;
}

.wf-text1 {
    font-size: .8rem;
    font-weight: 900;
    letter-spacing: .1rem;
    text-align: left;
    background: linear-gradient(45deg, #ffeb3b, #ffc107);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, .8));
}

.wf-text2 {
    font-size: .8rem;
    font-weight: 900;
    letter-spacing: .1rem;
    text-align: right;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .9);
    background: rgba(255, 255, 255, .25);
    padding: .3rem .8rem;
    border-radius: .5rem;
    border: 2px solid rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, .2);
    white-space: nowrap;
}

/* ---- 官网网址行 ---- */
.wf-host {
    display: flex;
    align-items: center;
    padding: .5rem .15rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    font-size: .8rem;
}

.wf-host .wf-rocket { margin-right: .1rem; color: red; }
.wf-host .wf-hname  { font-weight: 700; color: #333; margin-right: .15rem; }
.wf-host .wf-hurl   { color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- 三列表：期数 | 预测 | 开奖结果（并排三列） ---- */
.wf-table {
    width: 100%;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: .3rem;
    overflow: hidden;
}

.wf-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #ddd;
    font-weight: 600;
}
.wf-row:last-child { border-bottom: none; }

/* 表头：橙底白字 */
.wf-row.wf-head {
    background: #ff9800;
    font-weight: 700;
    color: #fff;
}

.wf-period {
    width: 29%;
    min-width: 80px;
    padding: .4rem .2rem;
    text-align: center;
    border-right: 1px solid #ddd;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ★★ 2026-10-06：这儿**试过一版「预测 / 开奖结果上下排」又改回来了**。
   起因是用户说「显示得太紧凑了，开奖结果可以显示再下面一行」，照做之后他看了实际效果
   选了改回并排三列（原话「开奖结果怎么跑下面去了」）。
   ☆ 那一版的做法记在这儿省得再翻：加一层 `.wf-body`（flex-direction:column）把右边
     拆成上下两段、`.wf-open` 从 width:29% 改成整段 + border-top 虚线；期数格靠
     `.wf-row` 的 align-items:stretch 跨满两行。 */
.wf-pred {
    flex: 1;
    min-width: 0;
    padding: .4rem .2rem;
    text-align: center;
    border-right: 1px solid #ddd;
    font-size: 1rem;
    word-break: break-word;
}

.wf-open {
    width: 29%;
    min-width: 80px;
    padding: .4rem .2rem;
    text-align: center;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 配色三件套：期号紫、预测红、开奖结果暗红
   （参考站的 .color-zise / .color-red / .color-anhong） */
.wf-zise   { color: #b300d2; }
.wf-red    { color: red; }
.wf-anhong { color: #b30000; }

/* 「准 / 错」两个字按对错上色 —— ★ 2026-10-06 用户要求（「准字用红色，错字用绿色」）。
   ★ 直接复用**全站那套口径**（index.php 的 .color-win = #dc2626 红 / .color-lose = #16a34a 绿），
     不另起一套色值 —— 那套是 2026-10-05 定下的「中了红、错了绿」。
   ★ 别跟旁边那个混淆：`.wf-hit` 染的是**开出来的号码**（中了 → 黄底红字、错了不上色），
     这两个染的是**「准 / 错」那两个字**，两者是分开的两个 span。 */
.wf-ok-win  { color: #dc2626; }
.wf-ok-lose { color: #16a34a; }

/* 开出来的那个**中了** → 整格黄底红字（参考站的 .bg-ffeb3b.color-red）。
   错了不上色，就跟着 .wf-anhong 走 —— 跟参考站一样，"错"靠不亮来区分。 */
.wf-hit { background: #ffeb3b; color: red; }

/* ============================================================================
 *  模板 C 的「玩法详情」· 另外两种呈现（2026-10-05 加）
 *
 *  参考站 55 个玩法区块按结构分下来 5 类，三列表只占 8 个 —— 这里补上最常用的
 *  那两种：**分组定义块** 和 **一行一条**。
 *  哪个玩法用哪套，由后台「玩法管理 → 模板」定（见 f_play_layout()）。
 * ========================================================================== */

/* ---- 分组定义块（模板选 `_tip` 那两档才有）----
   参考站里每个玩法各有一套 class（.jmxc-tip / .dslx-tip / .center.blue），
   规则其实一模一样，这里并成一套。
   ★ 两组（单双肖 / 吉美凶丑 / 男肖女肖…）走**左右分栏**，跟参考站的 space-between 一致；
     三组以上（琴棋书画那四组）走**居中换行、两个一行**。 */
.wf-tip {
    margin: .2rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}

.wf-tip-two {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 .1rem;
}

.wf-tip-many {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    padding: .2rem 0;
}
.wf-tip-many .wf-tip-item { width: 50%; padding: .1rem 0; }

/* 组名蓝色 —— 参考站那几处都用 .color-1e90ff */
.wf-tip-item b { color: #1e90ff; }

/* ---- 一行一条（照参考站的 .text.juzhong）----
   2026278期 绝杀一肖:【鸡】 开:虎41 准

   ★ 判定跟三列表一样：开出来的号码**中了黄底红字**、错了不上色（.wf-hit 复用）。
   ★ 参考站里预测那一串的颜色**每个玩法不一样**（琴棋书画是紫的、十肖中特是黑的、
     绝杀一肖是默认色），没有统一口径，所以这里用中性的深色。 */
.wf-lines {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: .3rem;
    overflow: hidden;
}

.wf-line {
    text-align: center;
    padding: .3rem;
    margin: .3rem 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.6;
}

.wf-line-head { color: #333; }
/* 玩法名 —— ★ 2026-10-06 用户要求：从绿（参考站的 .color-07c160）改成**紫**，
   用跟期号同一个紫（#b300d2），整行看起来是一体的。
   ★ 绿色腾出来给「错」字用了（见下面 .wf-ok-lose）—— 绿的语义在这里就是"错了"。 */
.wf-line-name { color: #b300d2; }
.wf-line-pred { color: #111; }
/* 开奖结果黑色 —— 参考站的 .color-000。
   ★★ 2026-10-06：加了 `display:block` —— 让它**固定另起一行**。
   原来它跟预测挤在同一段里流动（都是行内片段），内容短就留在同一行、
   长了才被挤下来，于是每期的「开:xxx 准/错」位置忽上忽下；
   而下一期的期号是加粗的，正好跟在它后面，很容易看串行。
   用户原话：「显示得太紧凑了，开奖结果可以显示再下面一行」。
   首页 45 个区块里用这一档的有 28 个（最多的一档），所以这块最显眼。 */
.wf-line-open {
    display: block;
    color: #000;
}

/* 期与期之间的分隔线 —— 用户：「可以使用方框隔开吗」，三个方案里选了「只画一条横线」。
   ★★ 第一版画错了地方：加在 `.wf-line-open` 的 `border-top`，结果线落在
     **「预测」和「开奖」之间**，把那两行拆开了 —— 用户一眼看出来「**你隔错了吧**」。
     正确的是这条：画在**一期的末尾 / 下一期的开头**，让每一期自成一块，
     这样才不会把上一期的开奖结果看成下一期的。
   ★ 用相邻选择器（不是 `.wf-line` 自己的 border-bottom）—— 免得最后一期那条线
     跟 `.wf-lines` 的外框叠成双线。间距靠 `.wf-line` 自带的 `margin: .3rem 0`。 */
.wf-line + .wf-line {
    border-top: 1px solid #ddd;
}

/* ============================================================================
 *  模板 C 的「玩法详情」· 另外三档（2026-10-05 补，用户：「这三类可以做，
 *  可以不用照搬参考站」）
 *
 *    block —— 每期一块（预测分段竖排）
 *    multi —— 多列杀项表（列 = 本彩种的杀项玩法）
 *    image —— 整块图片
 *
 *  哪个玩法用哪档，后台「玩法管理 → 呈现模板」；见 play_layout_list()。
 * ========================================================================== */

/* ---- 每期一块 ----
   ★ **不照搬**参考站那类（六肖十二码是「一期四行：⑥肖/④肖/②肖/⑫码」，
     那是金字塔结构，我们的 pred_json 里没有）。按我们自己的来：一期一条、片段竖排。 */
.wf-blocks {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: .3rem;
    overflow: hidden;
}

.wf-block {
    padding: .5rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.7;
    border-bottom: 1px solid #eee;
}
.wf-block:last-child { border-bottom: none; }

/* 期号紫 —— 跟三列表那列同一个色（参考站的 .color-zise） */
.wf-block-period { color: #b300d2; font-weight: 700; }
.wf-block-pred   { color: #111; }
.wf-block-open   { color: #000; }

/* ---- 多列杀项表（layout = multi）----
   ★★ 2026-10-06 **整档重做**。原来是「一期一行、列 = 本彩种的杀项玩法」的 9 列表
      （表头橙底白字、每格固定 64px、外面套横向滚动）。问题出在列太多：
      本彩种 7 个杀项玩法 + 期数 + 开奖 = 9 列，430 宽的屏上每格只剩 ~48px ——
      「杀十码准」那格 10 个号码被折成 **4 行**，而且不左右滑根本看不全。
      用户选了「改成每期一块、杀项逐行」：每期一个小块、块里一个杀项玩法一行，
      **不用横向滑**，手机上顺着一路读下来就行。
   ★ 只影响这一档 —— 首页 45 个区块里用它的只有「绝杀一头」，详情页同理。 */
.wf-multi {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: .3rem;
    overflow: hidden;            /* 不再需要横向滚动了 */
}

.wf-mblock {
    padding: .4rem .5rem;
    border-bottom: 1px solid #eee;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.7;
}
.wf-mblock:last-child { border-bottom: none; }

/* 期号一行、居中、紫 —— 跟三列表那一列同一个色（参考站的 .color-zise） */
.wf-mblock-period {
    color: #b300d2;
    font-weight: 700;
    text-align: center;
    margin-bottom: .1rem;
}

/* 一个杀项玩法一行：左边玩法名（紫，跟「一行一条」那档一致）、右边预测 */
.wf-mblock-row {
    display: flex;
    align-items: baseline;
    gap: .2rem;
}
/* 玩法名紫 —— ★ 2026-10-06 跟「一行一条」那档一起从绿改紫（用户要求），用同一个 #b300d2 */
.wf-mblock-name { flex: none; color: #b300d2; }
.wf-mblock-pred {
    flex: 1;
    min-width: 0;
    /* ★ 还是允许折行：「杀十码准」那一格是一串 35 个字的号码（【05.10.15.…49】），
       nowrap 会把它顶出屏幕。现在整行都是它的，折行也只在它自己那一行里折。 */
    word-break: break-all;
}

/* 开奖结果一行、居中 */
.wf-mblock-open { text-align: center; color: #000; margin-top: .1rem; }

/* ---- 整块图片 ---- */
.wf-image {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: .3rem;
    overflow: hidden;
}

.wf-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* 没传图时的占位 —— 别留一片空白让人以为坏了 */
.wf-image-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: #999;
    font-size: .9rem;
    line-height: 1.8;
}

/* ======================================================================
   公告弹窗 · 深色反白（2026-10-09 加）
   外壳：整块深蓝底 + 金线 + 金字。
   内容：时间和网址各占一格，做成两张小卡（双列）。
   ====================================================================== */
.gg-box {
    background: linear-gradient(180deg, #0b1f42, #0a1730);
    border: 1px solid #c9a227; border-radius: 16px;
    box-shadow: 0 12px 34px rgba(0,0,0,.4);
}
.gg-head { background: transparent; padding: 16px 20px 12px; border-bottom: 1px solid rgba(201,162,39,.45); }
.gg-title { color: #f0d68a; letter-spacing: 1px; }
.gg-close { color: #f0d68a; }
.gg-yellow {
    background: rgba(201,162,39,.10); border: 1px solid rgba(201,162,39,.55);
    border-radius: 10px; margin: 16px 18px 0; padding: 14px 16px; color: #f5e2a8;
}
.gg-white  { background: transparent; padding: 6px 20px 14px; color: #cbd5e1; }
.gg-warn   { background: rgba(220,38,38,.16); border: 1px solid rgba(248,113,113,.45); border-radius: 8px; color: #fca5a5; }
.gg-footer { color: #64748b; }
/* 内容排布：两列网格，时间/网址各一格小卡；警告横跨整行 */
.gg-ln { text-align: left; }
.gg-white { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding-top: 14px; }
.gg-white .gg-ln {
    background: rgba(255,255,255,.05); border: 1px solid rgba(201,162,39,.38);
    border-radius: 9px; padding: 9px 10px; font-size: 12px; line-height: 1.65;
}
.gg-white .gg-warn { grid-column: 1 / -1; margin-top: 3px; }

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