/* ==========================================================================
   前台皮肤 · layout_g —— 4432010.work（【顶级论坛】）
   ★★ 下面每个值都是 2026-10-08 从源站用 getComputedStyle **读出来的声明值**，
      不是从截图估的（截图缩小后尺寸和颜色都会骗人）。
      采集脚本在 4432010 那个工程里：docs/research/4432010/measure*.js
   ★ 类名照源站（.constom-nav / .nav2 / .plan-item …）；因为基础样式里也有
      .item / .c1 这类短名字，所以下面凡是有冲突风险的都带上了 .plan-item 前缀。
   ========================================================================== */

/* ==========================================================================
   ★★ 2026-10-09 补：这组 CSS 变量（其它几套模板的 CSS 里本来就有，这套一直没有）。
      为什么要它 —— 弹窗（「每日推荐」那个）的颜色现在挂在这组变量上，
      这样同一个弹窗在八套模板里会**自动变成各自的主色**，而不是八套长得一模一样。
      （起因：用户「每个模板的弹窗显示都是一个弹窗窗口，那这样做多模板的意义在哪里」）

      取值都是从这套模板自己的配色里取的，不是另配的：
        #508a88  公告条那种青绿（这套里用得最多，当主色）
        #2f5d52  深青（梯表的字）
        #eef5f3  极浅青（梯表的分隔线）
        #ffd76a  牌匾上站点名那个金
        #6b3f00  那块金字底下的深棕
      ★ 想单独调这套模板的弹窗，改这里就行，别去动 index.php 里那份共用样式。
   ========================================================================== */
:root {
  --c-brand-rgb:        80 138 136;    /* #508a88 */
  --c-brand-light-rgb: 110 168 166;
  --c-brand-dark-rgb:   47 93 82;      /* #2f5d52 */
  --c-brand-soft-rgb:  238 245 243;    /* #eef5f3 */
  --c-page-rgb:        245 247 250;
  --c-card-rgb:        255 255 255;
  --c-gold-rgb:        255 215 106;    /* #ffd76a 牌匾那个金 */
  --c-gold-soft-rgb:   255 249 235;
  --c-gold-deep-rgb:   107 63 0;       /* #6b3f00 */
}

/* ---- 页壳 ----
   ★★ 2026-10-09 改：原来是 `width: 800px` **写死**（照源站抄的，源站窄屏也横向滚）。
      用户反馈「顶级论坛模板显示宽度太宽了吧」—— 手机上打开要左右滑才能看全，
      而别的模板都是自适应的。所以改成 `max-width: 800px; width: 100%`：
      宽屏上还是 800（跟源站一样的观感），窄屏就跟着屏幕走、不横向滚。
   ★ 源站那边其实也没做适配（它的 viewport 也是 width=device-width，一样会横向滚），
     所以这一处是**我们故意跟源站不一样**的地方 —— 手机上好用优先。 */
.g-shell {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  background: #fff;
  color: #333;
  font-family: "Microsoft YaHei", Arial, sans-serif;
  font-size: 14px;
  line-height: 21px;
  padding-bottom: 10px;
}

/* ==========================================================================
   1. 顶部导航（源站 .constom-nav，90px）—— **分两层**
      上面 .hander 60px：logo(181×59) | 转盘(543×59) | 返回首页(76×59)
      下面 .nav-row 30px：6 个玩法名、space-around 均分
   ========================================================================== */
.constom-nav {
  /* ★ 底色跟着裁出来的那张金龙图走（从原招牌上取的色 #5E7E71）——
     这样「龙 + 文字」拼出来跟右边的转盘区域是一个底色，看不出接缝。 */
  background: #5e7e71;
  margin-bottom: 5px;
  border-radius: 0 0 6px 6px;
}
.constom-nav .hander {
  height: 60px;
  display: flex;
}
/* ★★ 2026-10-09：顶部这一排原来是 181 + 543 + 76 = **正好 800**，全都是写死的宽。
   页壳改成自适应之后，窄屏上得让**中间那块**（转盘）跟着伸缩，
   两头的招牌和返回按钮保持原尺寸（它们里面是图和固定文字，缩了会变形）。
   ★ `min-width: 0` 不能省 —— flex 项默认 `min-width: auto`，
     会拿内容的最小宽度当下限，那样它压根缩不下去。 */
.constom-nav .hander .brand { flex: 0 0 auto; }
.constom-nav .hander .windmill { flex: 1 1 auto; min-width: 0; }
.constom-nav .hander .back { flex: 0 0 auto; }

/* 招牌那块：金龙（从原图裁出来的）+ 文字。
   ★ 原来这里是一整张 1280×417 的招牌图，上面烘着「好运一点通 4432010.work」，
     改不了；现在拆成「图 + HTML 文字」，文字读后台的站点标题/域名。 */
.constom-nav .hander .brand {
  width: 181px;
  height: 59px;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.constom-nav .hander .brand .dragon {
  position: absolute;
  left: -10px;
  top: -22px;
  width: 96px;
  height: auto;
}
.constom-nav .hander .brand .brand-text {
  position: relative;
  margin-left: 62px;
}
.constom-nav .hander .brand .brand-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
  color: #ffd76a;
  text-shadow: 1px 1px 0 #6b3f00, -1px -1px 0 #6b3f00, 1px -1px 0 #6b3f00, -1px 1px 0 #6b3f00;
  white-space: nowrap;
}
.constom-nav .hander .brand .brand-domain {
  font-size: 11px;
  line-height: 1.3;
  color: #fff;
  white-space: nowrap;
}
.constom-nav .hander .windmill {
  width: 543px;
  height: 59px;
}
.constom-nav .hander .windmill img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.constom-nav .hander .back {
  width: 76px;
  height: 59px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
}
.constom-nav .hander .back img {
  width: 30px;
  height: 30px;
}
.constom-nav .nav-row {
  height: 30px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.constom-nav .nav-item {
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
}

/* ==========================================================================
   2. 公告条（源站 .van-notice-bar，40px）—— 同色底、白字
   ========================================================================== */
.notice-bar {
  height: 40px;
  background: #508a88;
  color: #fff;
  font-size: 14px;
  line-height: 24px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}
.notice-bar .ico { flex-shrink: 0; }
.notice-bar .notice-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   3. 图标导航（源站 .nav2，105px）—— 浅蓝底
   ★ 源站是 5 个图标 space-around 均分；我们只放「神 算 子」三个，
     再均分就散得老远（每个间隔 260px+），所以改成**居中 + 固定间距**。
     想让它们重新均分：把 justify-content 换回 space-around、去掉 gap。
   ========================================================================== */
.nav2 {
  height: 105px;
  background: #e7f1fd;
  padding: 0 10px;
  display: flex;
  justify-content: center;
  gap: 100px;
  align-items: center;
  overflow: hidden;
}
.nav2 .nav2-item {
  position: relative;          /* 给里面那个字当定位父级 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 76px;
}
.nav2 .nav2-item img {
  width: 84px;
  height: 76px;
  object-fit: contain;
}
/* 环中间那个字。
   ★ 原来这 5 个图标（好 运 一 点 通）的字是**烘在图里的**，改不了 ——
     现在环是抠出来的底图（ring1~3.png），字用 HTML 写，换字只改模板里那个数组。
   ★ 描边用 text-shadow 仿原图那样（黑字 + 白边）。 */
.nav2 .nav2-char {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "STKaiti", "KaiTi", "楷体", "Microsoft YaHei", serif;
  font-size: 36px;
  /* ★ 跟球上那两行一个道理：字号 36 而 .g-shell 的 line-height 是 21 ——
     不显式给的话字形会溢出到行框外。这里 1 倍行高就行（它是 flex 居中的）。 */
  line-height: 1;
  font-weight: 700;
  color: #1a1a1a;
  text-shadow:
    0 0 3px #fff, 0 0 3px #fff,
    1px 1px 0 #fff, -1px -1px 0 #fff,
    1px -1px 0 #fff, -1px 1px 0 #fff;
  pointer-events: none;
}

/* ==========================================================================
   4. 开奖区（源站 .open-lottery，236px）
   ========================================================================== */
.top-open { margin: 5px 0; }
/* 彩种 tab：整条 41px、内部 padding 10px 15px 0；每格 189×31 */
.top-open .tab {
  height: 41px;
  padding: 10px 15px 0;
  display: flex;
}
/* ★★ 2026-10-09：原来是 `width: 189px` 写死（4 个就是 756，按 800 的页壳算的）。
   窄屏上会挤出容器，改成按份均分。 */
.top-open .tab .li {
  flex: 1 1 0;
  min-width: 0;
  height: 31px;
  border-radius: 5px;
  padding: 5px 0;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  background: #eee;
  color: #000;
  border: 0;
  cursor: pointer;
}
.top-open .tab .li.active {
  background: #1fb61d;
  color: #fff;
}
.top-open .last-open-wrap { background: #fff; }
/* ★ padding 是**四边 10px**（只写 padding-bottom 的话整块会矮 10px） */
.top-open .last-open { padding: 10px; }
/* 期号 / 倒计时 / 历史 那一行 */
.top-open .last-open .meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 15px;
  font-size: 14px;
}
.top-open .last-open .meta .t1 { font-weight: 700; }
.top-open .last-open .meta .count { color: red; }
.top-open .last-open .meta .count b { font-weight: 700; }
.top-open .last-open .meta .his { color: #1fb61d; text-decoration: none; }
/* 球行：7 个球 + 一个加号
   ★★ 2026-10-08 用户要求「颜色框能缩小点吗」—— 原来照 4432010 量的 103×104
   （7 个球撑满整宽、紧挨着）。现在缩到 88×88、球之间留 8px 缝、整行居中。
   要再调就改这三处：.item 的宽高、这里的 gap、以及下面两行字号（字号跟着球走）。 */
.top-open .last-open-code {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 手机上加号两边的间隙也可以小一点，把宽度让给球 */
  gap: min(8px, 1.2vw);
  /* ★ 原来写死 `height: 104px`（"行高不变，免得整块高度跟着动"）。
     改成 min-height 之后：桌面上球还是 88、这块还是至少 104（观感不变），
     手机上球缩了这块也跟着缩，不会上下空一大条。 */
  min-height: 104px;
  height: auto;
  padding-bottom: 10px;
}
/* ★★ 球是**圆角方块**不是圆形（照源站）
   ★★★ 2026-10-09 改成自适应 —— 用户报「手机端的号码球球太大了、数字和生肖挤在一起」。
      原来写死 `88×88`，可手机上 7 个球 + 加号根本放不下 616px（屏才 390），
      flex 会把**宽**压小、**高**不动 —— 实测压成了 **43×88 的细长条**，
      里面还是 29px 的字，自然全挤在一起（而且那时候号码到生肖的间距实测是 **0px**）。
      现在：宽度用 min(88px, 11vw) 跟着屏幕缩（大屏上还是 88，一个像素不变），
      `aspect-ratio: 1/1` 保证宽高一起缩、**始终是方的**；
      `flex: 0 0 auto` 是别让 flex 再自作主张压它。 */
.top-open .last-open-code .item {
  width: 88px;
  aspect-ratio: 1 / 1;
  height: auto;
  flex: 0 0 auto;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 号码和生肖之间留一点缝 —— 两行行高都等于自己的字号，不给间隙的话是紧贴的 */
  gap: min(4px, 1vw);
}
.top-open .last-open-code .item.green { background: #1fb61d; }
.top-open .last-open-code .item.red   { background: #e92323; }
.top-open .last-open-code .item.blue  { background: #2389e9; }
.top-open .last-open-code .item .num {
  font-size: 29px;
  /* ★★ 2026-10-08 修：这里必须显式给 line-height，不能让它继承 .g-shell 的 21px。
     字号比行高大出十几像素的话，字形上下会**溢出到行框外面** ——
     表现就是「号码和下面的生肖叠在一起」（用户 2026-10-08 报的「数字和文字都重叠了」）。
     ★ 用 getBoundingClientRect 量是量不出来的（行框本身只有 21px、不重叠），
       得看 computed 的字号/行高比。 */
  line-height: 1.05;      /* 比字号略大一点即可 —— 关键是**不能小于字号**（见上） */
  font-weight: 700;
  color: #fff;
}
.top-open .last-open-code .item .animal {
  font-size: 24px;
  line-height: 1.05;      /* 同上 —— 别小于字号 */
  font-weight: 700;
  color: #000;
}
.top-open .last-open-code .add {
  width: 12px;
  font-size: 16px;
  color: #000;
  text-align: center;
}
/* 开奖时间那行（红字）+ 橙底「刷新」 */
.top-open .last-time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 700;
  color: #e92323;
}
.top-open .last-time .flush {
  background: #ff9900;
  color: #fff;
  font-size: 14px;
  padding: 2px 3px;
  border-radius: 3px;
  cursor: pointer;
}

/* ==========================================================================
   5. 快捷格子（源站 .quick-link-list，343px）：4 列 grid、gap 10px
      ★ 每格 188×27 —— padding 3px 0、圆角 3px（写成 8px/4px 的话 9 行会多出 90px）
   ========================================================================== */
.quick-link-list {
  background: #fff;
  padding: 10px;
  margin: 5px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.quick-link-list .ql {
  background: #508a88;
  color: #fff;
  font-size: 14px;
  text-align: center;
  padding: 3px 0;
  border-radius: 3px;
  text-decoration: none;
  cursor: pointer;
}

/* ==========================================================================
   6. 玩法区（源站 .plan-list / .plan-item）
   ========================================================================== */
.plan-list { background: #fff; }
.g-loading { padding: 20px; text-align: center; color: #999; }

/* 表头：33px 青绿底白字，三栏 68 / auto / 80 */
.plan-item {
  margin: 0 0 6px;
}
.plan-item .wrap {
  display: flex;
  align-items: center;
  height: 33px;
  background: #508a88;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}
.plan-item .wrap .t1 { width: 68px; text-align: center; font-size: 14px; }
.plan-item .wrap .method-title { flex: 1; text-align: center; padding: 6px 10px; font-size: 14px; }
.plan-item .wrap .t3 { width: 80px; text-align: center; font-size: 14px; }

/* 行列表：白底 + 1px 青绿外框 */
.plan-item .list {
  background: #fff;
  border: 1px solid #508a88;
}
/* ★★ 一行 **min-height** 42px —— 不是 height！
   源站的行高是**内容撑出来的**（有长内容会折行变高），写死 height 会把内容裁掉。 */
.plan-item .list .item {
  min-height: 42px;
  display: flex;
  align-items: center;
}
.plan-item .list .item .item-1 { width: 100%; display: flex; }

/* ① 期号：灰 #333 / 13px。★ 三个 col 都有 padding 10px（源站量出来的）——
   少了它中间那格会多 20px 宽，预测一长就少折一行。 */
.plan-item .list .item .c1 {
  width: 58px;
  flex: 0 0 58px;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #333;
}
/* ② 预测：《 + 内容 + 》，蓝 #0000ff
   ★★ code-wrap 是 flex：`《` `》` 各是一个不许压缩的元素、内容在 .t4 里单独折行。
      写成文字节点混在一条行内流里的话，`》` 会跑到行尾白捡宽度、比源站少折一行。 */
/* ★★ 2026-10-09：`min-width: 0` 这两处（下面 .code-wrap 里还有一处）**不能省**。
   flex 项默认是 `min-width: auto` —— 它拿"内容的最小宽度"当下限，
   于是中间这列**压根缩不下去**，预测内容一长（比如「六肖⑫码【羊:04.06】…」）
   就把整行撑破、页面上横向滚。
   实测：不加这两行时，页壳压到 390 后 .c2 还是 449 宽。 */
.plan-item .list .item .c2 {
  flex: 1;
  min-width: 0;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  color: #0000ff;
}
.plan-item .list .item .c2 .code-wrap {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
  min-width: 0;          /* ★ 同上：这是 .c2 的 flex 子项，也默认缩不下去 */
}
.plan-item .list .item .c2 .t3,
.plan-item .list .item .c2 .t5 { flex-shrink: 0; }
.plan-item .list .item .c2 .t4 {
  min-width: 0;
  text-align: center;
  font-size: 14px;
}
/* ③ 结果：开出的生肖号码是红的、准/错是灰的，**中间不空格** */
.plan-item .list .item .c3 {
  width: 79px;
  flex: 0 0 79px;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #333;
}
.plan-item .list .item .c3 .open { color: #ff0000; }

/* 命中高亮：源站 <span class="bg-yellow"> = #ffff00 底 + #ff0000 字 */
.plan-item .list .item .hit {
  background: #ffff00;
  color: #ff0000;
  font-weight: 700;
}

/* ---- 分档阶梯（九肖一码）----------------------------------------------
   布局沿用 index.php 的 .wf-ladder-*（那套是给 A/B/绿皮/蓝金 兜底的基础版），
   这里只把配色调成这套模板的青绿调。
   ★ 2026-10-08：模板 G 的 PlayBlock 第一版漏了 ladder 这一档 ——
     十二档内容被当普通三列画、《》里挤成一坨，用户报「只剩数字」。 */
.g-shell .wf-ladder-period {
  border-color: #cfe3dd;
  border-radius: 4px;
}
.g-shell .wf-ladder-row {
  border-bottom-color: #eef5f3;
}
.g-shell .wf-ladder-tag { color: #2f5d52; }
.g-shell .wf-ladder-body { color: #b30000; }
.g-shell .wf-ladder-res { color: #2f5d52; }

/* ==========================================================================
   7. 页脚（源站 .footer，126px）：主色底、两段免责声明
      ★ 外层 padding 10px 0、两个 .item 各 53px（padding 5px 0 + 两行文字）
   ========================================================================== */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
  background: #508a88;
  color: #fff;
  font-size: 12px;
  line-height: 18px;
}
.footer .item {
  display: flex;
  justify-content: center;
  padding: 5px 0;
  font-size: 14px;
  line-height: 21px;
}
.footer .text { text-align: center; }

/* ==========================================================================
   8. 把 App 自带的那两颗浮动按钮藏掉
      —— 源站是左下/右下各一颗（刷新 / 回顶），我们这个模板先不画，
         留着会被基础样式那两颗盖住、跟源站对不上。
   ========================================================================== */
.theme-layout_g .float-btn,
.theme-layout_g .back-top,
.theme-layout_g .fab-wrap { display: none !important; }

/* ==========================================================================
   ★★★ 2026-10-09 补：**窄屏**下开奖球要缩小。
      用户报「手机端的号码球球太大了、数字和生肖挤在一起」。
      实测手机上（页壳 390）原来那排是 **676px 宽**，而容器只有 370 ——
      flex 会把**宽**压小、**高**不动，7 个球被压成 **43×88 的细长条**，
      里面还是 29px 的字，于是全挤在一起（号码到生肖的间距实测是 0px）。

      ★ 为什么用媒体查询、不用 vw 直接写在上面：
        `vw` 是**视口**宽，而页壳是固定宽（max-width: 800）——
        在 1440 的窗口上 11vw = 158px，min() 一取还是 88，窄屏那一档压根不生效。
        而**窄屏时页壳就等于视口**（max-width 不生效），所以媒体查询是准的。
      ★ 520px 这一档：390 屏上算出每个球 ≈ 45px、7 个球 + 加号 + 间隙 ≈ 360px，
        正好放进 370 的容器（留一点余量）。
      ★ 桌面/平板一点不受影响 —— 默认那套还是 88px、29px/24px 原样。
   ========================================================================== */
@media (max-width: 520px) {
  .top-open .last-open-code .item { width: 11vw; }
  .top-open .last-open-code .item .num    { font-size: 3.8vw; }
  .top-open .last-open-code .item .animal { font-size: 3.1vw; }
  .top-open .last-open-code .add          { width: 9px; font-size: 14px; }
}

/* ======================================================================
   公告弹窗 · 硬朗黑金（2026-10-09 加）
   外壳：全直角、黑底金字、只有金色细线。
   内容：左对齐、宽字距，每行一根金细线压着。
   ====================================================================== */
.gg-box { background: #14161a; border: 1px solid #3a3f47; border-radius: 0; box-shadow: none; }
.gg-head { background: #000; padding: 16px 20px; border-bottom: 1px solid #d4af37; }
.gg-title { color: #d4af37; letter-spacing: 3px; }
.gg-close { color: #d4af37; font-size: 22px; }
.gg-yellow {
    background: #0d0f12; border: 0; border-radius: 0;
    margin: 0; padding: 16px 20px; color: #e8c766;
    border-bottom: 1px solid #2b2f36;
}
.gg-white  { background: transparent; padding: 0 20px 8px; color: #9ba3ae; }
.gg-warn   { background: transparent; border: 0; border-left: 3px solid #d4af37; border-radius: 0; color: #8b93a0; }
.gg-footer { color: #5c636e; border-top: 1px solid #2b2f36; letter-spacing: 2px; }
/* 内容排布：左对齐、宽字距，每行一根金细线 */
.gg-ln { text-align: left; letter-spacing: 1px; }
.gg-yellow .gg-ln + .gg-ln { padding-top: 7px; }
.gg-white  .gg-ln { padding: 12px 0; border-bottom: 1px solid #22262c; font-size: 13.5px; }
.gg-white  .gg-warn { border-bottom: 0; padding-top: 13px; }

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