/* ==========================================================================
   窄屏适配（响应式）

   背景：全站是原站版式的 1:1 复刻，而原站只做了 PC 一版 ——
   `#app{min-width:1170px}`，容器宽度全部写死（1170 / 1168 / 1166 / 1108 / 1000 / 998），
   整张样式表里**一条 @media 都没有**。在手机上打开就是一张 1170px 的画布，
   只能左右拖着看。

   这份文件是唯一一处对原站版式做"尺寸改写"的地方，三条原则：

     1. **桌面端一个像素都不动。** 所有规则都在 `max-width:1169px` 及以下生效，
        1170px 以上加载了等于没加载 —— compare_with_original.py 的逐像素对比不受影响。
        （scripts/verify_responsive.py 里有一条 1440px 的回归断言盯着这件事。）

     2. **只改尺寸与排布，不改配色。** 颜色仍然全部来自 original_pc.css 与
        pc_extra.css（含夜间模式），所以白天/夜间两套主题自动跟着走。

     3. **选择器深度必须与原文一致 —— 这是本文件最容易写错的地方。**
        原站的选择器很深，例如首页的号码区是
            .LotteryIndex .lotteryHall ul li .mainLottery .top .lotteryNum
        （4 个类 + 2 个类型 = 0,6,1）。这里如果图省事写成 `.lotteryNum`（0,1,0），
        优先级直接输掉，`position:absolute` 压不下去 —— 表面上"写了响应式"，
        实际一点没生效。所以下面每一条都照抄原文的选择器，靠"本文件最后加载"取胜。
        只有少数几条需要压过 `:nth-child(...)`（例如 `.hisMore>span:first-child`），
        才在前面多挂一层父级提权。

   断点的由来（都是量出来的，不是拍的）：
     · 1169px —— 原站画布 1170px，装不下就该流式；
     · 900px  —— 首页左栏内部是绝对定位：号码区实际占到 548px（498 的盒子 +
                 20px 左内边距 + `.num` 宽 528 溢出），计时区 320px，合计 868px；
                 容器窄于 868px 两块就会叠在一起，所以到这里改成上下排；
     · 680px  —— 回放弹层是 640×450 的固定白卡，更窄就装不下了；
     · 640px  —— 手机：开奖历史四列表格改卡片、字号与球号整体缩一档。
   ========================================================================== */


/* ==========================================================================
   0. 画布与顶部导航
   ========================================================================== */
@media (max-width: 1169px) {
  /* 手机上横向滚动的元凶就是这一条 min-width */
  #app { min-width: 0; }

  #app .appHeader .logo {
    width: 100%;
    max-width: 1170px;
    padding-left: 12px;
    padding-right: 12px;
  }

  /* 导航：6 个栏目 × 195px = 1170px，窄屏塞不下，改成可横向滑动的标签条。
     ⚠ 原站这条上写着 `box-sizing:content-box`（为了让 5px 下边框额外算高度），
     加上 width:100% 和左右 12px 内边距会撑出 24px 的横向溢出，必须改回 border-box。 */
  #app .appHeader ul {
    width: 100%;
    max-width: 1170px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    height: auto;
    min-height: 43px;          /* 38px 内容 + 5px 下边框 */
    padding: 0 12px;
  }
  #app .appHeader ul::-webkit-scrollbar { display: none; }
  #app .appHeader ul li {
    float: none;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    padding: 0 16px;
    white-space: nowrap;
  }
  /* ⚠ 真正决定每格宽度的是里面这层 `.whole`（原站写死 195px）——
     只改 li 是没用的，6 格还是会撑到 1338px，一屏只看得到一个半栏目。 */
  #app .appHeader ul li .whole { width: auto; }

  #app footer .bottom .son { width: 100%; max-width: 1170px; padding: 0 12px; }
}

@media (max-width: 640px) {
  #app .appHeader ul li { padding: 0 12px; font-size: 14px; }
  #app .appHeader .logo img { height: 64px; margin-top: 16px; }
  #app .appHeader .logo .date { line-height: 40px; font-size: 13px; }
  /* logo 行：日期与两个开关在 96px 高的行里挤不下，改成上下两行 */
  #app .appHeader { height: auto; }
  #app .appHeader .logo { height: auto; padding-bottom: 8px; }
  #app .appHeader .logo .date { float: none; display: block; text-align: center; }
  .pc-prefs { float: none; margin: 0 auto 8px; line-height: 28px; text-align: center; }
}


/* ==========================================================================
   1. 首页（.LotteryIndex）
   ========================================================================== */
@media (max-width: 1169px) {
  /* 轮播：原站是 1166×375 的固定画布，改成随宽度等比缩放 —— 用 aspect-ratio 锁住
     同一个比例，这样多张 banner 里最高的那张会跟桌面端一样被 overflow:hidden 裁掉，
     而不是像纯 height:auto 那样把画布撑高、在第一张下面留出一条白边。
     `.swiper,.swiper img{width:1166px}` 是共用规则，swiper 本身的宽度也要一起改。
     `font-size:0 / line-height:0` 是为了干掉 <a> 那个行内盒留下的支柱高度。 */
  .swiper { width: 100%; height: auto; aspect-ratio: 1166 / 375; font-size: 0; line-height: 0; }
  .swiper-container { height: auto; }
  .swiper-wrapper { height: auto; }
  .swiper-slide { height: auto; }
  .swiper-slide > a { display: block; }
  .swiper img { display: block; width: 100%; height: auto; }
  /* 圆点原来靠 top:345px 定位，画布变矮以后改成贴底 */
  .swiper .swiper-pagination { top: auto; bottom: 8px; }

  .LotteryIndex .lotteryHall ul,
  .LotteryIndex .lotteryHall ul li {
    width: 100%;
    max-width: 1170px;
    padding-left: 12px;
    padding-right: 12px;
  }
  /* li 上写死了 height:282px（两栏并排时的高度），堆叠以后必须放开，
     否则右栏会溢出到 li 外面去 */
  .LotteryIndex .lotteryHall ul li { height: auto; }

  /* 主卡撑满，右侧「近期开奖」落到下面 */
  .LotteryIndex .lotteryHall ul li .mainLottery { float: none; width: 100%; }
  .LotteryIndex .lotteryHall ul li .mainLottery .top { width: 100%; }
  .LotteryIndex .lotteryHall ul li .mainLottery .top .lotteryTitle { width: 100%; }
  /* 倒计时下面那条 `.check` 写死 390px 宽，而它的父级 `.lotteryTime` 只有 320px ——
     桌面端靠"它是空的、右边又没别的东西"糊过去了，窄屏就会把文档顶宽 45px。
     （里面真正有内容的只有绝对定位的 `.video`，left:170 + 87 = 257，320 装得下。） */
  .LotteryIndex .lotteryHall ul li .mainLottery .lotteryTime .check {
    width: auto;
    max-width: 100%;
    padding-left: 0;
  }

  .LotteryIndex .lotteryHall ul .postLottery {
    float: none;
    width: 100%;
    margin-top: 16px;
    border: 1px solid #dadada;
    border-radius: 4px;
    overflow: hidden;
  }
  .LotteryIndex .lotteryHall ul .postLottery .postHeader,
  .LotteryIndex .lotteryHall ul .postLottery ul { width: 100%; }
  /* 卡片化以后原来的投影会和外框叠在一起，去掉一层 */
  .LotteryIndex .lotteryHall ul .postLottery ul {
    box-shadow: none;
    -webkit-box-shadow: none;
    border: none;
    border-top: 1px solid #dadada;
  }
  :root[data-theme="dark"] #app .LotteryIndex .lotteryHall ul .postLottery ul {
    border-top-color: #2b3036;
  }
}

/* 左栏内部：号码区 548px + 计时区 320px = 868px，再窄就会重叠 —— 到此改成上下排。 */
@media (max-width: 900px) {
  .LotteryIndex .lotteryHall ul li .mainLottery { height: auto; }
  .LotteryIndex .lotteryHall ul li .mainLottery .top { height: auto; padding-bottom: 18px; }

  .LotteryIndex .lotteryHall ul li .mainLottery .top .lotteryNum {
    position: static;
    width: 100%;
    height: auto;
    padding: 14px 16px 0;
  }
  .LotteryIndex .lotteryHall ul li .mainLottery .top .lotteryNum .lastTitle {
    width: 100%;
    margin-top: 0;
    margin-bottom: 6px;
  }
  .LotteryIndex .lotteryHall ul li .mainLottery .top .lotteryNum .num {
    width: 100%;
    height: auto;
    padding-left: 0;
    margin-top: 10px;
  }
  .LotteryIndex .lotteryHall ul li .mainLottery .top .lotteryNum .num > span { width: 100%; height: auto; }

  .LotteryIndex .lotteryHall ul li .mainLottery .lotteryTime {
    position: static;
    width: 100%;
    height: auto;
    padding: 0 16px;
  }
  .LotteryIndex .lotteryHall ul li .mainLottery .lotteryTime .leftTime { margin-top: 8px; }
  .LotteryIndex .lotteryHall ul li .mainLottery .lotteryTime .check {
    width: 100%;
    height: auto;
    padding-left: 0;
    top: 0;
    margin-top: 12px;
  }
  .LotteryIndex .lotteryHall ul li .mainLottery .lotteryTime .history { margin-left: 0; margin-top: 16px; }
  /* 「直播」按钮原站是绝对定位（left:170px）贴在倒计时右边，靠 `.check` 的
     `top:30px` 往下错位。上下排以后 `.check` 里就剩它一个绝对定位的子元素，
     盒子会塌成 0 高、被下面的「歷史開獎查詢」压上来 —— 改成走文档流。 */
  .LotteryIndex .lotteryHall ul li .mainLottery .lotteryTime .video {
    position: static;
    display: inline-block;
    left: auto;
  }
}

@media (max-width: 640px) {
  /* 大球 60px × 3 + 16px 间距，窄屏缩一档（背景图跟着 background-size 缩） */
  .LotteryIndex .lotteryHall ul li .mainLottery .top .lotteryNum .num .ball {
    width: 48px;
    height: 48px;
  }
  .LotteryIndex .lotteryHall ul li .mainLottery .top .lotteryNum .num .balls {
    width: 48px;
    height: 48px;
    line-height: 45px;
    font-size: 20px;
    background-size: 44px;
    background-position: 2px 2px;
  }
  .LotteryIndex .lotteryHall ul li .mainLottery .top .lotteryTitle {
    height: auto;
    line-height: 1.6;
    padding: 10px 16px;
  }
  .LotteryIndex .lotteryHall ul li .mainLottery .top .lotteryTitle .title { font-size: 17px; }
  .LotteryIndex .lotteryHall ul li .mainLottery .top .lotteryTitle .nextTime { float: none; display: block; }

  /* 倒计时翻牌格：桌面是 6 格 × (40+6)px + 两组 20px 间距 ≈ 330px，手机上放不下 */
  .LotteryIndex .lotteryHall ul li .mainLottery .lotteryTime .leftTime .num {
    width: 34px;
    height: 46px;
    line-height: 46px;
    font-size: 32px;
    margin-right: 4px;
  }
  .LotteryIndex .lotteryHall ul li .mainLottery .lotteryTime .leftTime .num:nth-of-type(2),
  .LotteryIndex .lotteryHall ul li .mainLottery .lotteryTime .leftTime .num:nth-of-type(5) {
    margin-right: 14px;
  }
  .LotteryIndex .lotteryHall ul li .mainLottery .lotteryTime .leftTime .dot { font-size: 32px; }
  .LotteryIndex .lotteryHall ul li .mainLottery .lotteryTime .leftTime .dot1 { left: 74px; }
  .LotteryIndex .lotteryHall ul li .mainLottery .lotteryTime .leftTime .dot2 { left: 164px; }

  /* 近期开奖：一行 80px，手机上压到 68px */
  .LotteryIndex .lotteryHall ul .postLottery ul { height: auto; }
  .LotteryIndex .lotteryHall ul .postLottery ul li { height: 68px; padding-left: 14px; }
  .LotteryIndex .lotteryHall ul .postLottery ul li .historyNum { height: 44px; }
  .LotteryIndex .lotteryHall ul .postLottery ul li .historyNum .lhcHisCode {
    height: 44px;
    line-height: 40px;
  }
}


/* ==========================================================================
   2. 开奖历史（.lotteryPost）
   ========================================================================== */
@media (max-width: 1169px) {
  .lotteryPost > .header,
  .lotteryPost > .nav,
  .lotteryPost .notice,
  .lotteryPost .help,
  .lotteryPost .hisPost {
    width: 100%;
    max-width: 1170px;
    padding-left: 14px;
    padding-right: 14px;
  }
  .lotteryPost > .header { padding: 0 14px; }

  /* 公告条原站是单行 36px 高，窄屏让它自己折行 */
  .lotteryPost .notice { height: auto; min-height: 36px; line-height: 24px; padding: 8px 14px; }
  .lotteryPost .help { padding: 15px 14px 13px; }

  .lotteryPost .hisPost > ul > li { width: 100%; }

  /* 四列：原站是 170 / 220 / 588 / 170 硬编码，合计 1148px；
     窄屏改成百分比，比例保持不变。 */
  .hisTitle,
  .hisMore,
  .lotteryPost .hisPost > ul .title,
  .lotteryPost .hisPost > ul > li .lastInfo { width: 100%; }

  .hisTitle span:first-child,
  .hisMore > span:first-child { width: 15%; }
  .hisTitle span:nth-child(2),
  .hisMore > span:nth-child(2) { width: 19%; }
  .hisTitle span:nth-child(3),
  .hisMore > span:nth-child(3) { width: 51%; }
  .hisTitle span:nth-child(4),
  .hisMore > span:nth-child(4) { width: 15%; }

  /* 「回放」按钮原来是 margin-left:42px 对着 170px 的列做居中，改成自动居中 */
  .hisMore > span:nth-child(4) .disvideo,
  .hisMore > span:nth-child(4) .video { margin-left: auto; margin-right: auto; }

  /* 年份筛选：`.title .six{margin-left:280px}` 是给原站那**一个**按钮定位的
     （pc_extra 里只给第一个按钮挂了 .six，其余年份按钮走 .pc-year）；
     这里连同 `.title` 的固定行高一起放开，让按钮自由换行。 */
  .lotteryPost .hisPost > ul .title {
    height: auto;
    padding: 12px 14px;
    line-height: 36px;
  }
  .lotteryPost .hisPost > ul .title .lotteryName { margin-right: 12px; width: auto; }
  .lotteryPost .hisPost > ul .title .six { margin-left: 0; }

  /* 分页条：原站是 flex 且不换行，22 页 × 43px = 946px，窄屏会溢出 */
  .lotteryPost .hisPost > ul .page { flex-wrap: wrap; }

  /* 最新一期：左 679+50 / 右 360+60，窄屏按比例 */
  .lotteryPost .hisPost > ul > li .lastInfo { height: auto; }
  /* ⚠ `.lastInfo` 里面两个 span 都是 float:left，原站靠写死的 height:164px 兜着；
     一旦改成 height:auto，父盒就塌成 1px（只剩那条下边框），下面的年份筛选条
     会直接叠到倒计时上面。overflow:hidden 建 BFC 把浮动收进来。 */
  .lotteryPost .hisPost > ul > li .lastInfo { overflow: hidden; }
  .lotteryPost .hisPost > ul > li .lastInfo .left {
    width: 58%;
    height: auto;
    padding: 10px 0 14px 20px;
  }
  .lotteryPost .hisPost > ul > li .lastInfo .right {
    width: 42%;
    height: auto;
    padding: 10px 0 14px 20px;
  }
  .lotteryPost .hisPost > ul > li .lastInfo .left .lastTitle,
  .lotteryPost .hisPost > ul > li .lastInfo .left .lastNum,
  .lotteryPost .hisPost > ul > li .lastInfo .right .nextTimeTitle { width: 100%; }
  .lotteryPost .hisPost > ul > li .lastInfo .right .leftTime { width: auto; }
  /* ⚠ `.leftTime` 里六个翻牌格全是 float，盒子本身高度是 0 ——
     `.lastInfo` 一旦从写死的 164px 改成 auto，它下面的 `.title`（年份筛选）就会
     被压上来盖住倒计时。overflow:hidden 建个 BFC 把浮动收进来，高度才算得对。 */
  .lotteryPost .hisPost > ul > li .lastInfo .right .leftTime { overflow: hidden; }
}

@media (max-width: 640px) {
  /* 四列表格 → 卡片：隐藏表头，每行改成「列名 + 值」竖排。
     列名走 CSS 的 content:attr(data-label)，值来自模板里的 data-label（经 t() 出繁简两版）。 */
  .hisTitle { display: none; }
  .hisMore { height: auto; padding: 10px 14px; line-height: 1.6; }
  .lotteryPost .hisPost > ul .hisMore > span {
    display: block;
    float: none;
    width: auto;
    height: auto;
    line-height: 1.9;
    text-align: left;
  }
  .lotteryPost .hisPost > ul .hisMore > span[data-label]::before {
    content: attr(data-label);
    display: inline-block;
    min-width: 72px;
    color: #9aa0a6;
    font-weight: 600;
  }
  .lotteryPost .hisPost > ul .hisMore > span:nth-child(3) span { height: auto; line-height: 1.9; }
  .lotteryPost .hisPost > ul .hisMore > span:nth-child(4) { margin-top: 6px; }
  /* 「回放」按钮原站是一张 87×34 的红色按钮图 + 一个 top:-9px 的白字 span
     （靠绝对错位把字压到图上）。卡片化以后列宽不再是 170px，那套错位就散了 ——
     这里改成正常的文字按钮。 */
  .lotteryPost .hisPost > ul .hisMore > span:nth-child(4) .video,
  .lotteryPost .hisPost > ul .hisMore > span:nth-child(4) .disvideo {
    display: inline-block;
    width: auto;
    min-width: 76px;
    height: 32px;
    line-height: 32px;
    margin: 4px 0 0;
    padding: 0 12px;
    border-radius: 4px;
    background-image: none;
    background-color: #d80011;
    text-align: center;
  }
  .lotteryPost .hisPost > ul .hisMore > span:nth-child(4) .disvideo { background-color: #a4a4a4; }
  .lotteryPost .hisPost > ul .hisMore > span:nth-child(4) .video span,
  .lotteryPost .hisPost > ul .hisMore > span:nth-child(4) .disvideo span {
    position: static;
    left: 0;
    top: 0;
    color: #fff;
    font-size: 13px;
  }

  /* 最新一期：左右两栏改成上下。
     ⚠ 必须写足 `.left` / `.right` 这两个类 —— 上面 ≤1169 那段给它们设了 58% / 42%，
     优先级比 `.lastInfo > span` 高，只改 `> span` 是压不住的（踩过：390px 下右栏
     还被挤成 42%，倒计时 6 个翻牌格被压到 123px 宽、折成三行）。 */
  .lotteryPost .hisPost > ul > li .lastInfo .left,
  .lotteryPost .hisPost > ul > li .lastInfo .right {
    display: block;
    float: none;
    width: 100%;
  }
  .lotteryPost .hisPost > ul > li .lastInfo .left { padding: 10px 14px 0; }
  .lotteryPost .hisPost > ul > li .lastInfo .right { padding: 6px 14px 14px; }
  .lotteryPost .hisPost > ul > li .lastInfo .left .lastTitle { height: auto; line-height: 1.6; }
  .lotteryPost .hisPost > ul > li .lastInfo .left .lastNum span .ball { margin-right: 12px; }
  .lotteryPost .hisPost > ul > li .lastInfo .right .leftTime .num {
    width: 34px;
    height: 46px;
    line-height: 46px;
    font-size: 32px;
    margin-right: 4px;
  }
  .lotteryPost .hisPost > ul > li .lastInfo .right .leftTime .num:nth-of-type(2),
  .lotteryPost .hisPost > ul > li .lastInfo .right .leftTime .num:nth-of-type(5) { margin-right: 14px; }
  .lotteryPost .hisPost > ul > li .lastInfo .right .leftTime .dot { font-size: 32px; }
  .lotteryPost .hisPost > ul > li .lastInfo .right .leftTime .dot1 { left: 74px; }
  .lotteryPost .hisPost > ul > li .lastInfo .right .leftTime .dot2 { left: 164px; }

  .lotteryPost .hisPost > ul .title { padding: 10px 14px; line-height: 30px; }
  .lotteryPost .hisPost > ul .title .lotteryName { display: block; margin: 0 0 6px; }
  .lotteryPost .hisPost > ul .title button { padding: 0 12px; font-size: 14px; height: 32px; line-height: 32px; }
  /* pc_extra 里给多余年份按钮加的左右间距在手机上没必要，收紧一点 */
  .lotteryPost .hisPost > ul .title button.pc-year { margin-left: 0; padding: 0 10px; }
  .lotteryPost .hisPost > ul .title button.pc-year + button.pc-year { margin-left: 6px; }
}


/* ==========================================================================
   3. 福彩图库 / 联系我们（共用 .lotteryContact）
   --------------------------------------------------------------------------
   原站 `.main` 是 1170px 且左右各 180px 内边距（图片实际显示宽 810px）。
   ========================================================================== */
@media (max-width: 1169px) {
  .lotteryContact .main {
    width: 100%;
    max-width: 1170px;
    padding: 30px 16px;
  }
  .lotteryContact .main .title { width: 100%; }
  .lotteryContact .main .article { width: 100%; height: auto; }
}

@media (max-width: 640px) {
  .lotteryContact .main { padding: 20px 12px; }
  .lotteryContact .main .title { height: auto; line-height: 1.5; font-size: 20px; padding: 6px 0; }
  .lotteryContact .main .article { font-size: 14px; line-height: 26px; }
  .pc-issue-nav { gap: 10px; font-size: 14px; }
  .pc-issue-nav strong { font-size: 17px; }
}


/* ==========================================================================
   4. 专家预测（.faq）
   --------------------------------------------------------------------------
   内联 <style> 里 `.faq .accordion` 写死 width:550px，外层 `.faq` 是 1170px 居中
   （那条在 pc_extra.css，按原站实测值补的）。
   ========================================================================== */
@media (max-width: 1169px) {
  .faq { width: 100%; }
  .faq .accordion { width: 100%; }
  .pc-disclaimer { width: auto; }
}

@media (max-width: 640px) {
  .faq { padding: 0 12px; }
  /* 一行里的「第X期 / 开机号 / 试机号 / 开奖号」是行内 flex + space-between，
     手机上会挤成一团，改成可换行 */
  .faq .accordion > div:first-child { flex-wrap: wrap; gap: 4px 14px; }
  .faq .faq-info h3 { font-size: 17px !important; padding: 12px 5px !important; }
  .pc-disclaimer { font-size: 12px; margin-bottom: 28px; }
}


/* ==========================================================================
   5. 关于我们（.lotteryUs）与 404
   ========================================================================== */
@media (max-width: 1169px) {
  .lotteryUs .header { width: 100%; max-width: 1170px; padding: 0 14px; }
  .lotteryUs .header img { width: 100%; height: auto; margin-bottom: 20px; }
  .lotteryUs .content { width: 100%; max-width: 1170px; min-height: 0; padding: 0 14px 40px; }

  .lotteryUs .content .about {
    width: 100%;
    height: auto;
    padding: 30px 20px 20px;
  }
  .lotteryUs .content .about .title { width: 100%; }

  .lotteryUs .content .gameRule { padding: 0 6px; }
  .lotteryUs .content .gameRule .title {
    width: 100%;
    height: auto;
    line-height: 1.4;
    padding: 24px 0 8px;
  }
  .lotteryUs .content .gameRule .lotteryRule { width: 100%; }
  .lotteryUs .content .gameRule .lotteryRule img { margin-left: auto; margin-right: auto; }
  .lotteryUs .content .gameRule .lotteryRule .text { width: 100%; padding: 16px 18px; }

  /* 游戏规范里的赔率表：原站写死 1000px。改成块级 + 横向滚动，
     表格按内容撑开、自己在小格子里滚，不会把文字压成一列一个字。 */
  .lotteryUs .content .gameRule .lotteryRule .text table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .lotteryUs .content .gameRule .lotteryRule .text .mark,
  .lotteryUs .content .gameRule .lotteryRule .text .marktail { width: auto; margin-left: 0; }

  .lotteryUs .content .rule { width: 100%; min-height: 0; padding: 20px 18px 0; }
  .lotteryUs .content .rule .title { width: 100%; height: auto; line-height: 1.4; padding: 8px 0 16px; }
  /* 政策页正文是一整张长图（原站按原始像素铺开），窄屏必须缩到容器宽 */
  .lotteryUs .content .rule .detailRule h1 img,
  .lotteryUs .content .rule .detailRule img { display: block; width: 100%; height: auto; }

  .lotteryError .main .header { width: 100%; max-width: 1170px; height: auto; }
  .lotteryError .main .header img { width: 100%; height: auto; }
  /* `.error` 是个空的装饰块，原站写死 569×242，窄屏直接撑满即可 */
  .lotteryError .main .error { width: 100%; }
}

@media (max-width: 900px) {
  /* 三个页签原站是 125px × 3 靠左，窄屏改成等分撑满灰底药丸 */
  .lotteryUs .header ul { display: flex; overflow: hidden; }
  .lotteryUs .header ul li { float: none; flex: 1 1 0; width: auto; min-width: 0; }
}

@media (max-width: 640px) {
  .lotteryUs .header ul li { font-size: 14px; }
  .lotteryUs .content .about { padding: 22px 14px 14px; }
  .lotteryUs .content .about .title { font-size: 20px; height: auto; line-height: 1.5; }
  .lotteryUs .content .about .text { font-size: 14px; line-height: 26px; }
  .lotteryUs .content .gameRule .title { font-size: 20px; }
  .lotteryUs .content .gameRule .lotteryRule .text { padding: 14px; font-size: 14px; line-height: 26px; }
  .lotteryUs .content .rule { padding: 16px 12px 0; }
  .lotteryUs .content .rule .title { font-size: 20px; }

  /* 404：原站那两个占位块（.header 450px / .error 242px）在手机上就是一大片空白，
     直接收掉，只留错误码那段文字。 */
  .lotteryError .main { margin-top: 16px; }
  .lotteryError .main .header,
  .lotteryError .main .error { display: none; }
  .lotteryError .main div { height: auto; padding: 20px 14px 40px; }
}


/* ==========================================================================
   6. 开奖回放弹层（.currentVideo）
   --------------------------------------------------------------------------
   原站是 640×450 的白卡，里面的 iframe（/play/）是一套 984×800 的 HTML5 动画。
   好在 play 页自带的样式里本来就有 `@media (max-width:984px){font-size:8vw}`，
   它自己会缩放 —— 所以这里只要把卡片改成满宽、给画面框一个 984:800 的比例即可。
   ========================================================================== */
@media (max-width: 680px) {
  .currentVideo .main {
    width: 100vw;
    max-width: 640px;
    height: auto;
  }
  .currentVideo .main .header {
    height: auto;
    padding: 12px 12px 8px;
    overflow: hidden;
  }
  /* 时间与号码原来靠 left:230px 错位排在标题右边，窄屏让它们各占一行 */
  .currentVideo .main .header .videoTime,
  .currentVideo .main .header .videoCode {
    display: block;
    width: 100%;
    left: 0;
    top: 0;
  }
  .currentVideo .main .header .videoCode .vtitle { left: 0; top: 0; height: auto; width: auto; }
  .currentVideo .main .header .videoCode .ball { width: 26px; height: 26px; margin-right: 4px; }
  /* 画面框原来是绝对定位居中、写死 640×360；改成文档流 + 按比例 */
  .currentVideo .main .loading,
  .currentVideo .main .loading .wrap {
    position: static;
    width: 100%;
    height: auto;
    transform: none;
    -webkit-transform: none;
    margin: 0;
    aspect-ratio: 984 / 800;
  }
  .currentVideo .main .loading { background-color: #000; }
}


/* ==========================================================================
   7. 管理后台（.admin-*，用的是 app.css 那套皮肤，不套原站版式）
   --------------------------------------------------------------------------
   后台本身已经是流式（max-width:1200px + flex-wrap），这里只处理三件事：
   顶栏在手机上太高、表格会横向溢出、表单字段太宽。
   ========================================================================== */
@media (max-width: 900px) {
  .admin-topbar-inner { padding: 8px 12px; gap: 10px 14px; }
  .admin-user { margin-left: 0; width: 100%; flex-wrap: wrap; gap: 8px 12px; }
  .admin-main { padding: 16px 12px 30px; gap: 14px; }
  .admin-nav { gap: 2px; }
  .admin-nav a { padding: 5px 10px; font-size: 13px; }
}

@media (max-width: 640px) {
  .admin-brand { font-size: 14px; }
  .admin-brand-badge { display: none; }
  .admin-nav { width: 100%; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .admin-nav a { white-space: nowrap; }

  /* 表格：宽度不够时整体横向滚动，列不再被压扁。
     （滚动容器本身在 admin.css 里是无条件定义的，这里只把列宽下限收紧。） */
  .admin-table { min-width: 540px; }

  /* 表单：一行一个字段 */
  .admin-form-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .admin-form-row .field { min-width: 0; width: 100%; }
  .admin-form-note { padding-bottom: 0; }
  .admin-field-ball { max-width: none; }
  .admin-field-time { max-width: none; }
  .admin-inline-input { width: 100%; }
  .admin-inline-form { width: 100%; }

  .card-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .admin-stat-value { font-size: 26px; }
}