/* ============================================================
 *  移动端适配（2026-10-13）—— **必须最后加载**
 *
 *  ⚠️ 为什么单独成文件：ui-abyss.css / ui-hollow.css 里对 .menu-title 用了
 *    `height:200px !important` / `font-size:96px !important`，而 CSS 里
 *    **同优先级时后加载的赢**。适配规则写在 style.css 里会被它们反覆盖 —
 *    实测「调了 font-size 却完全没反应」就是这么来的。
 *    所以移动端规则统一放本文件，并在 index.html 里**排在所有 css 之后**。
 * ============================================================ */

/* ============================================================
 * 手机竖屏适配（2026-10-13 · 为「装到桌面离线玩」做的）
 *
 * 起因：无头浏览器实测三档手机视口，主菜单在窄屏下**溢出重叠** ——
 *   430px：标题「深渊债录」与菜单项叠在一起，底部还有一团重叠文字
 *   390px：底部被截断，菜单看不全
 *   360px：「开始游戏」横向被截断成「开始 游 戏」
 *
 * 根因：`.menu-inner` 是 `gap:22px` 的纵向 flex 且**无高度上限**。
 * 原先只有 `max-width` 断点（760/400），只调了字号 —— 而溢出是
 * **总高度**超了视口，不是宽度问题。所以必须按 **视口高度**再断一档。
 *
 * 做法：主菜单改为「可滚动 + 顶部对齐」，再按高度分三档收紧间距与字号。
 * ============================================================ */

/* ① 主菜单在竖屏下允许滚动，并顶部对齐（原来 align-items:center 会让
 *    溢出的内容上下两端同时被裁，最容易被误判成「元素重叠」） */
@media (max-width:760px){
  .menu-screen{
    padding:12px 14px;
    align-items:flex-start;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  /* margin:auto 0 会在 flex 容器里把内容垂直居中 —— 正是重叠的元凶之一。
     改成纯 padding 顶对齐，滚动到底就是全部内容。 */
  .menu-inner{margin:0;padding:4px 0 10px}
  .menu-foot{margin-top:2px}
}

/* ② 矮屏（横放的手机 / 小屏 SE / 带浏览器地址栏时可视区更矮）：
 *    按 vh 收紧，让 6 个菜单项 + 品牌区能一屏放下 */
@media (max-height:760px){
  .menu-inner{gap:10px}
  .menu-title{font-size:30px;letter-spacing:5px}
  .menu-sub{font-size:9px;letter-spacing:3px}
  .menu-tag{margin-top:6px;font-size:11px}
  .mi{padding:8px 11px;gap:11px}
  .mi-ic{width:38px;height:38px}
  .mi-ic img{width:28px;height:28px}
  .mi-tx b{font-size:15px;letter-spacing:1.5px}
  .mi-tx i{font-size:10px}
  .menu-foot{padding-top:8px}
}

/* ③ 极矮（≤600px，横屏手机 / 地址栏占位后）：再收一档，并让品牌区更紧凑 */
@media (max-height:600px){
  .menu-inner{gap:7px}
  .menu-title{font-size:25px;letter-spacing:4px}
  .menu-tag{margin-top:4px;font-size:10px}
  .mi{padding:6px 10px;gap:9px}
  .mi-ic{width:32px;height:32px}
  .mi-ic img{width:24px;height:24px}
  .mi-tx b{font-size:14px;letter-spacing:1px}
  .mi-ar{font-size:18px}
}

/* ④ 窄屏（≤400px）横向截断修复：`.mi` 是 flex，`.mi-tx b` 带 letter-spacing，
 *    最小内容宽度 = 图标 + 文字 + 箭头，超出就挤压。给 `.mi-tx` 加 min-width:0
 *    并允许标题省略号，避免「开始游戏」被拆成两行/截断。 */
@media (max-width:400px){
  .mi-tx{min-width:0}
  .mi-tx b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mi-ar{flex:0 0 auto}
}

/* ⑤ iOS 安全区：全面屏手机的底部 Home 指示条会盖住最后一行菜单。
 *    viewport-fit=cover 已在 meta 里，这里补上内边距。 */
@supports (padding:max(0px)){
  @media (max-width:760px){
    .menu-screen{
      padding-left:max(14px,env(safe-area-inset-left));
      padding-right:max(14px,env(safe-area-inset-right));
      padding-bottom:max(10px,env(safe-area-inset-bottom));
    }
  }
}

/* ============================================================
 * 手机**横屏**适配（2026-10-13 · 做成横板）
 *
 * 为什么要单独一套：竖屏是「单栏纵排」（品牌在上、菜单在下），
 * 这套排到横屏就废了 —— 实测 926×428 时标题「深渊债录」按 vw 缩放后
 * 占满整宽，菜单被挤出屏幕外（完全看不见）。
 *
 * 断点用 **`(orientation:landscape) and (max-height:760px)`** 而不是宽度：
 * 横屏手机的高度只有 283~440px，这个条件才能精确命中「横着的手机」，
 * 不会误伤平板/桌面（它们高度大）。
 *
 * 布局：**左品牌 + 右菜单两栏**（flex row），
 * 竖屏那套 `.menu-inner` 的 column 方向只在竖屏生效。
 * ============================================================ */
@media (orientation:landscape) and (max-height:760px){
  /* ============================================================
   * 主菜单（对齐 2026-10-13 目标图）
   *
   * 目标版式：**左标题 + 右侧单列紧凑菜单**，与桌面版一致的「一列到底」。
   * 之前做的是「标题 + 两列菜单」，在手机上反而更像把桌面版硬塞进小屏 ——
   * 菜单项被压成两行文字还叠在一起（副标题「尚未通关」压在标题上）。
   *
   * 关键取舍：
   *   · **单列而不是两列** —— 目标图就是单列；两列需要 6 个按钮各 ~440px 宽，
   *     在 902px 屏上每列只剩 440px，副标题必然换行 → 重叠。
   *   · **隐藏副标题**（.mi-tx i）—— 目标图菜单只有「图标 + 主标题」一行。
   *     这一条同时解决了高度问题：6 项从两行变一行，总高直接减半。
   *   · 标题靠左、品牌区不再右对齐 —— 与目标图的左对齐一致。
   * ============================================================ */
  .menu-screen{padding:0;align-items:stretch;overflow:hidden}

  /* ★ 2026-10-18：.menu-brand（标题+标语）整块已从 HTML 删除 ⇒
     不再是两栏，改成「菜单区垂直居中 + 页脚贴底」的单列结构。
     （之前写 grid-template-areas:"brand options" 会让 brand 区留空，
       菜单被推到右侧还偏上；删掉品牌区后必须同步改布局，否则位置很怪。） */
  .menu-inner{
    /* ⚠️ !important 是必需的：style.css:38 有 `.menu-inner{display:flex;flex-direction:column}`
       且加载在 mobile.css **之前**。 */
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:minmax(0,1fr) auto !important;
    grid-template-areas:"options" "foot" !important;
    flex-direction:initial !important;
    max-width:min(760px,92%) !important;
    align-content:center;
    gap:0;
    width:100%;
    padding:10px 18px;
    height:100%;
    margin:0 auto;
  }
  /* 品牌区：靠左对齐（目标图是左侧标题） */
  .menu-brand{grid-area:brand;align-self:center;justify-self:start;text-align:left;
    padding-left:2px;max-width:100%;min-height:0;min-width:0}
  .menu-options{grid-area:options;align-self:center;justify-self:center;
    width:min(560px,100%) !important}
  .menu-foot{grid-area:foot;align-self:end;justify-content:center}

  /* 标题仍是**背景图**（见上方注释：改 height/background-size，不是 font-size） */
  .menu-title{
    height:clamp(46px,12vh,96px) !important;
    line-height:1 !important;width:100% !important;
    font-size:clamp(20px,4.4vh,38px) !important;
    letter-spacing:2px !important;
    background-size:auto clamp(40px,11vh,88px) !important;
    background-position:left center !important;
    background-repeat:no-repeat !important;
  }
  /* 副标题：abyss 已把「ABYSSAL LEDGER」画进标题图(title-h5.png)，原样式用
     visibility:hidden 藏掉 DOM 那行。**千万别改回 visible** —— 实测会显示两遍英文名。 */
  .menu-sub{visibility:hidden !important;margin-top:0 !important}
  .menu-tag{display:none}   /* 标语在横屏太占位置，目标图里没有 */

  /* 菜单区：单列。display 必须 !important（ui-abyss 用 margin:auto 把它变 flex） */
  .menu-options{
    display:flex !important;
    flex-direction:column !important;
    gap:clamp(3px,1.1vh,10px) !important;
    margin:0 !important;
    width:100% !important;min-height:0;
    max-height:100%;overflow-y:auto;
    overscroll-behavior:contain;
  }
  /* 单行紧凑：压掉 abyss 的 padding:14px 4px !important / gap:20px !important */
  /* ★ 2026-10-18（用户蓝圈）：菜单整体放大。
     之前为了塞进 iPhone 的 336px 视口压到 28~36px，删掉标题后空间富余，
     现在按真机视口（600px 高）给足：行高 ~60px、字号 ~20px、图标 ~40px。
     上限用 px 兜住，避免大屏上无限放大。 */
  .menu-options .mi{
    padding:clamp(4px,1.2vh,9px) 10px !important;
    gap:12px !important;
    height:clamp(34px,10vh,58px) !important;
    min-height:0 !important;max-height:none !important;
    align-items:center;
    flex:0 0 auto;
    overflow:hidden;
    /* ⚠️ 压到 ~24px 高后，abyss 那套背景纹理会被压扁成锯齿噪点（截图里很明显）。
       横屏下直接去掉纹理，用「左描边 + 透明底」表达可点区 —— 更干净也更像目标图。 */
    border-radius:2px !important;
  }
  /* ⚠️ 关掉每个 .mi-* 的专属装饰（style.css:94~120）：.mi-start::before 是
     `inset:5px` 的内边框、.mi-peak::after 是 `height:5px` 的底部条。
     菜单项只有 28px 高时，inset:5px + height:5px 正好错位叠在一起 ——
     截图上第 3 项位置那条「链条状噪点」就是它们（我先前误判成 ::before 渐变条，
     实际是这批按菜单项区分的装饰）。横屏统一关掉，视觉更干净也更像目标图。 */
  .menu-options .mi::before,
  .menu-options .mi::after{display:none !important;content:none !important}
  .menu-options .mi:active{background:rgba(232,195,122,.10) !important}
  /* ⚠️⚠️ 图标必须**直接覆盖 img 选择器**，只写 .mi-ic 是没用的 ——
     实测链条状噪点的真凶就是图标被放大压扁：
       ui-hollow.css:153  `.mi-ic img { width:56px !important; height:56px !important; }`
       ui-abyss.css:376  `.mi-ic img { width:48px !important; height:48px !important; }`
     而菜单项只有 28px 高 ⇒ 56px 的图撑破容器、上下项叠在一起，就是那条链条。
     `.mi-ic img` 的**特异性高于** `.mi-ic`（后代选择器多一个层级），
     所以只压 `.mi-ic` 压不住它 —— 必须精确命中 img 本身。 */
  .mi-ic{
    width:clamp(18px,6.4vh,38px) !important;
    height:clamp(18px,6.4vh,38px) !important;
    flex:0 0 auto !important;
    display:grid !important;place-items:center !important;
    background:none !important;border:0 !important;border-radius:0 !important;
    overflow:hidden !important;
  }
  .mi-ic img{
    width:clamp(15px,5.4vh,31px) !important;
    height:clamp(15px,5.4vh,31px) !important;
    object-fit:contain !important;
    image-rendering:pixelated !important;
    filter:saturate(.12) brightness(1.05) !important;
  }
  /* 主标题单行，副标题**隐藏**（目标图菜单没有副标题；同时把高度减半） */
  .mi-tx{
    flex-direction:row !important;align-items:center;gap:8px;
    min-width:0;overflow:hidden;
    height:100%;max-height:100%;      /* 同样限高，别让文字把行撑开 */
  }
  /* ⚠️ 文字必须限高：实测「仓库」的 <b> rect 高 40px（ui-hollow 里有自己的
     font-size/line-height），而菜单项只有 28px —— 文字**溢出**菜单项、
     与相邻项叠在一起，截图上就是第 3 项位置那条「链条状噪点」。
     （我先前两次误判成 ::before 装饰和图标放大，都是被这张图误导了。）
     line-height:1 + overflow:hidden 让它被裁在行内，不再溢出。 */
  .mi-tx b{
    flex:0 0 auto;
    font-size:clamp(13px,3.6vh,21px) !important;
    line-height:1.1 !important;
    letter-spacing:1.5px !important;
    max-height:100%;overflow:hidden;
  }
  .mi-tx i{display:none !important}
  .mi-ar{font-size:clamp(14px,4vh,24px) !important;flex:0 0 auto}

  /* ---------- 未解锁条目的「锁链」装饰（那条「链条状噪点」的**真凶**）----------
   * 这是 ui.js:4091 `sealNode()` **运行时注入的 DOM**（不是伪元素）：
   *   <span class="seal"><span class="sg-l"></span><span class="lk"></span><span class="sg-r"></span></span>
   * 三块共用 assets/ui/seal-x.png（384×72 的整条链），靠 background-position 切片。
   * ⚠️ abyss 写死 `.seal{height:72px;z-index:3}` 与子块 `height:72px;background-size:384px 72px`，
   *    而横屏菜单项只有 28px 高 ⇒ ①72px 链图挤进 28px、切片错位 → 那条噪点；
   *    ②z-index:3 让它**盖住文字**，实测「仓库/巅峰/规则/设置」四项文字全被遮没。
   *    （这轮之前我三次误判成 ::before 装饰 / 图标放大 / 文字溢出，都是被它误导。
   *     教训：元素尺寸异常时先 getComputedStyle 看真值，别猜。）
   * 横屏做法：**只留中间那颗锁**（lk），左右两段链臂隐藏 ——
   * 既表达了「未解锁」，又不会横跨整行遮挡文字。 */
  .menu-options .seal{
    height:clamp(10px,3.4vh,16px) !important;
    width:auto !important;
    left:auto !important;right:auto !important;
    top:50% !important;
    z-index:1 !important;          /* 必须压到文字之下，否则遮字 */
    opacity:.7 !important;
    display:flex !important;
    align-items:center !important;
    gap:0 !important;
  }
  .menu-options .seal > span{
    height:clamp(10px,3.4vh,16px) !important;
    background-size:auto clamp(10px,3.4vh,16px) !important;
    background-position:center center !important;
  }
  /* 左右链臂在横屏藏掉（它们才是横跨整行、遮挡文字的那部分） */
  .menu-options .seal .sg-l,
  .menu-options .seal .sg-r{display:none !important}
  .menu-options .seal .lk{
    flex:0 0 auto !important;
    width:clamp(9px,3vh,14px) !important;
    background-position:center center !important;
  }

  .menu-foot{padding-top:6px !important;font-size:clamp(7px,1.4vh,10px) !important;
    gap:8px;width:100%}
  .menu-foot > *{opacity:.75}

  /* iOS 全面屏横屏：左右都有 Home 指示条 */
  @supports (padding:max(0px)){
    .menu-inner{
      padding-left:max(18px,env(safe-area-inset-left));
      padding-right:max(18px,env(safe-area-inset-right));
      padding-bottom:max(8px,env(safe-area-inset-bottom));
    }
  }
}

@media (orientation:landscape) and (min-height:561px){
  /* 同样是背景图标题：改 height/background-size，不是 font-size（见上） */
  .menu-title{height:clamp(90px,20vh,210px) !important;line-height:1 !important;width:100% !important;
    background-size:auto clamp(80px,17vh,200px) !important;background-position:left center !important;
    background-repeat:no-repeat !important}
  .menu-sub{font-size:clamp(10px,1.4vw,14px)}
}


/* ============================================================
 * 地图界面 · 横屏紧凑（2026-10-13，对齐用户给的目标图）
 *
 * 改之前的实测症状（926×428 / 视口 902×336）：
 *   · 顶栏（#topbar）占了约 1/3 屏高，直接压在地图上
 *   · 地图区只剩很窄一条，节点几乎看不到
 *   · 底栏 .map-bar 三块信息挤在一起，还带一条「滑动向左看 →」提示占位
 *
 * 版式改成 **上-中-下三条固定比例**：顶栏 ~13vh / 地图自适应 / 底栏 ~11vh。
 * 所有写死尺寸（头像 64px、节点 38px）都必须压 —— 它们是 !important 的。
 * ============================================================ */
@media (orientation:landscape) and (max-height:760px){
  /* ① 整体：让 #app 纵向三段分布，地图区吃掉剩余空间 */
  #app{display:flex;flex-direction:column;height:100%;overflow:hidden}

  /* ② 顶栏压到 ~13vh。⚠️ ui-abyss.css:1381 把头像钉死 64px !important，
     不压的话顶栏光头像就占 64px（336px 视口的 19%）。 */
  #topbar{
    flex:0 0 auto !important;
    height:clamp(40px,14vh,52px) !important;
    min-height:0 !important;
    padding:0 clamp(6px,1.6vw,14px) !important;
    gap:clamp(4px,1.4vw,10px) !important;
    overflow:hidden !important;
  }
  #topbar .hud-face{
    width:clamp(24px,9vh,32px) !important;
    height:clamp(24px,9vh,32px) !important;
    flex:0 0 auto !important;
  }
  #topbar .hud-face img{width:100% !important;height:100% !important}
  #topbar .hud-hearts{gap:1px !important}
  #topbar .hud-hearts > *{width:clamp(7px,2.6vh,10px) !important;height:clamp(7px,2.6vh,10px) !important}
  /* ⚠️ 必须连 line-height 一起压：ui-abyss.css:1386 写的是
     `.hud-hp b{font-size:36px; line-height:36px}` —— 只改 font-size 的话，
     line-height 36px 仍把行撑高，字号看起来没变（实测数字占满整个顶栏）。
     同理 .hud-hp .sl（分隔斜杠）也是 24px，要一起压。 */
  #topbar .hud-hp,#topbar .hud-bonds{font-size:clamp(9px,3.2vh,12px) !important}
  #topbar .hud-hp b{
    font-size:clamp(12px,4.4vh,17px) !important;
    line-height:1 !important;
    letter-spacing:0 !important;
  }
  #topbar .hud-hp .sl{font-size:clamp(9px,3.2vh,12px) !important;line-height:1 !important}
  #topbar .hud-bonds{gap:clamp(3px,1vw,7px) !important}
  #topbar .hud-bonds i{font-size:clamp(8px,2.8vh,10px) !important}
  /* ⚠️ 真机实测：这两个按钮原本只有 26×26，触控目标偏小（建议 ≥36px）。
     顶栏高度是 13vh ≈ 46px（真机视口 600px 时），放得下 36px 的按钮。 */
  #topbar .hud-ic{
    width:clamp(34px,7vh,40px) !important;height:clamp(34px,7vh,40px) !important;
  }
  #topbar .hud-ic img{width:clamp(24px,5.2vh,30px) !important;height:clamp(24px,5.2vh,30px) !important}
  #topbar .hud-entry i{display:none !important}      /* 「封印匣/设置」文字标签省掉 */

  /* ③ 地图区：吃掉剩余高度；节点缩小并允许整屏多显示几行 */
  .map-wrap{
    flex:1 1 auto !important;
    min-height:0 !important;
    max-height:none !important;
    padding:2px clamp(4px,1vw,10px) !important;
    overflow:auto !important;
  }
  .map-node{
    width:clamp(22px,8.4vh,30px) !important;
    height:clamp(22px,8.4vh,30px) !important;
    font-size:clamp(9px,3.4vh,12px) !important;
  }
  .map-node.boss{
    width:clamp(28px,10.4vh,38px) !important;
    height:clamp(28px,10.4vh,38px) !important;
    font-size:clamp(12px,4.4vh,16px) !important;
  }
  /* 关底标记、当前节点名等附属元素一起缩 */
  .map-node.done::after{width:11px !important;height:11px !important;font-size:8px !important}

  /* ④ 利息浮标：横屏下贴着顶栏下沿，别压住节点 */
  .map-interest{
    top:clamp(40px,14vh,52px) !important;
    font-size:clamp(8px,2.6vh,10px) !important;
    padding:1px 6px !important;
    white-space:nowrap !important;
  }

  /* ⑤ 底栏：一行放下三块信息，「滑动向左看」提示在触屏上不适用 */
  .map-bar{
    flex:0 0 auto !important;
    height:clamp(26px,10vh,34px) !important;
    min-height:0 !important;
    padding:0 clamp(6px,1.6vw,12px) !important;
    gap:clamp(6px,1.8vw,14px) !important;
    overflow:hidden !important;
    align-items:center !important;
  }
  .map-bar .fl-ic{width:clamp(14px,5vh,18px) !important;height:clamp(14px,5vh,18px) !important}
  .map-bar .fl-ic img{width:100% !important;height:100% !important}
  .map-bar .fl-tx b{font-size:clamp(9px,3vh,11px) !important}
  .map-bar .fl-tx i{font-size:clamp(7px,2.4vh,9px) !important}
  .map-hint{
    font-size:clamp(8px,2.6vh,10px) !important;
    margin-top:0 !important;
    flex:1 1 auto;min-width:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .map-node-now{font-size:clamp(8px,2.6vh,10px) !important;white-space:nowrap;gap:4px !important}
  /* 实测「待选路」三个字撑得很大 —— 它有自己的 b 字号，必须单独压 */
  .map-node-now b{font-size:clamp(9px,3.2vh,11.5px) !important;line-height:1 !important}
  .map-node-now .dim{font-size:clamp(7px,2.4vh,9px) !important}
  .map-tip{display:none !important}     /* 「滑动向左看 →」：手机上没意义且占位 */

  /* ⑥ 选中操作条：横屏下贴在底栏上方，控件放大到可点 */
  .sel-bar{
    flex:0 0 auto !important;
    max-width:none !important;
    gap:clamp(4px,1.2vw,8px) !important;
    padding:clamp(2px,0.8vh,5px) clamp(4px,1vw,8px) !important;
  }
  .sel-bar .btn{
    min-height:clamp(26px,9vh,32px) !important;
    padding:0 clamp(5px,1.2vw,9px) !important;
    font-size:clamp(9px,3vh,11.5px) !important;
  }
  .sel-bar .sel-name{font-size:clamp(9px,3vh,11.5px) !important}
}

/* ============================================================
 * 装备/仓库屏 · 横屏紧凑（2026-10-13）
 *
 * 目标版式（对齐用户给的目标图）：**上-中-下三段** ——
 *   上：顶栏（与地图屏同一套 #topbar 规格）
 *   中：内容区（格子与面板），高度自适应
 *   下：背包区（封印匣格子）
 * 所有写死尺寸都要压 —— ui-abyss/ui-hollow 里大量 !important 定宽。
 * ============================================================ */
@media (orientation:landscape) and (max-height:760px){
  #gearScreen{display:flex;flex-direction:column;height:100%;overflow:hidden}

  /* 顶栏：与地图屏同一套规格（顶栏是共用的，所以规则可以复用） */
  #gearHud{
    flex:0 0 auto !important;
    height:clamp(40px,14vh,52px) !important;
    min-height:0 !important;
    padding:0 clamp(6px,1.6vw,14px) !important;
    gap:clamp(4px,1.4vw,10px) !important;
    overflow:hidden !important;
  }
  #gearHud .hud-face{width:clamp(24px,9vh,32px) !important;height:clamp(24px,9vh,32px) !important}
  #gearHud .hud-face img{width:100% !important;height:100% !important}
  #gearHud .hud-hearts > *{width:clamp(7px,2.6vh,10px) !important;height:clamp(7px,2.6vh,10px) !important}
  #gearHud .hud-ic{width:clamp(34px,7vh,40px) !important;height:clamp(34px,7vh,40px) !important}
  #gearHud .hud-ic img{width:clamp(24px,5.2vh,30px) !important;height:clamp(24px,5.2vh,30px) !important}

  /* 内容区：吃掉剩余高度并可滚动 */
  .gear-main{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow:auto !important;
    padding:clamp(3px,1vh,7px) clamp(5px,1.4vw,12px) !important;
    gap:clamp(5px,1.4vw,12px) !important;
  }
  /* 各个子区块统一缩小内边距与标题 */
  .gear-main .panel,
  .gear-side,
  .bag-panel{
    padding:clamp(4px,1.4vh,8px) clamp(5px,1.2vw,10px) !important;
    min-height:0 !important;
  }
  .gear-main .ttl,
  .gear-main h3,
  .bag-panel .ttl{
    font-size:clamp(9px,3vh,11px) !important;
    margin:0 0 clamp(2px,0.8vh,4px) !important;
    letter-spacing:1px !important;
  }
  /* 封印匣格子：--cell 是 JS 每帧 setProperty 写上去的内联变量，
     **CSS 里的 :root 声明只是「JS 还没跑」的兜底**（真正的横屏值由
     js/ui.js 的 isLandscapePhone() 分支给出，上限 30px）。
     这里给一个与 JS 一致的兜底值，避免首帧格子过大闪一下。 */
  :root{--cell:26px}
  .bag-grid{gap:2px !important}
  /* 属性/详情区文字 */
  .stats-grid{gap:2px clamp(3px,0.9vw,7px) !important}
  .stats-grid .kv,
  .kv{font-size:clamp(8px,2.6vh,10px) !important;padding:1px 3px !important}
  /* Buff 条 */
  .buff-bar{gap:clamp(2px,0.6vw,5px) !important}
  .buff-bar .bf{width:clamp(14px,5.2vh,18px) !important;height:clamp(14px,5.2vh,18px) !important;font-size:8px !important}

  /* 底部背包区：定高而非固定 224px（那是竖屏的值） */
  /* 底部背包区。
   * ⚠️ 实测：.bag-panel 在 style.css:218 是 `flex:1`，且**没有任何定高** ——
   *    高度全由内容（袋子 + 面板头 + buff 栏）撑出来，实测 330px，
   *    整个视口才 336px，于是内容区被挤到 960px 严重溢出。
   *    所以横屏必须：① 改成 flex:0 0 固定高 ② 内容区 min-height:0 + max-height:100% */
  .bag-panel{
    flex:0 0 auto !important;
    height:clamp(58px,20vh,76px) !important;
    max-height:clamp(58px,20vh,76px) !important;
    min-height:0 !important;
    margin-top:clamp(2px,0.6vh,4px) !important;
    overflow:hidden !important;
  }
  /* 内容区是 flex:1，必须显式 min-height:0 才会被压缩到剩余空间 */
  .gear-main{
    flex:1 1 auto !important;
    min-height:0 !important;
    max-height:100% !important;   /* ⚠️ 少了这条实测溢出 7px */
  }
  /* 内部各区块允许收缩 */
  .gear-main > *{min-height:0 !important}
  .gear-main .bag-panel{height:auto !important;min-height:0 !important}
  .bag-body{overflow:auto !important}
  .bag-meta{font-size:clamp(8px,2.6vh,10px) !important;gap:clamp(3px,1vw,8px) !important}
}

/* ============================================================
 * 战斗屏 · 横屏紧凑（2026-10-13）
 *
 * 改之前的实测症状：5×5 封印匣网格在横屏里几乎占满整屏，
 * 敌人立绘与日志被挤到看不见。
 *
 * 版式：**左列窄（我方+日志） / 中列网格 / 右列敌人**，三栏并排。
 * 网格格子用 --cell 压小，这是最关键的一步。
 * ============================================================ */
@media (orientation:landscape) and (max-height:760px){
  /* ★★ 2026-10-18（用户红圈）：战斗顶栏 `.bt-hud` 已从 JS 里删除渲染，
     这里再用 CSS 兜一层，确保任何情况下它都不会回来遮住主角血量。 */
  .bt-hud{display:none !important}

  .bt{
    padding:clamp(3px,1vh,7px) clamp(5px,1.2vw,12px) !important;
    gap:clamp(4px,1vw,10px) !important;
  }
  /* 三栏骨架 */
  /* 主角牌：头 + 名字 + 血条 + 状态。删掉顶栏后这里是唯一的血量出处，
     必须显眼 —— 用户原话「顶栏把主角战斗血量给遮住了」。 */
  /* ⚠️ **不要给 .bt-me 加 position:absolute** ——
     style.css:605 里它是 `display:flex`（在正常文档流里），
     我上一版改成 absolute 后它脱离了流、定位基准错，
     实测整块跑到 x=-70（左侧出界），头像和血条都被挤出屏幕。
     只放大尺寸与间距，位置交给原有布局。 */
  /* 主角牌（.bt-me）：仍在文档流里（它挂在 #bt-top 下），
     只放大间距，位置交给原布局 —— 之前加 absolute 导致整块跑到 x=-70。 */
  /* ---------- 主角牌：★ 2026-10-18（用户）移到画面中部偏下，与右侧敌人同排 ----------
   * 用户原话：「蓝色圈内的移到红色方框内 对应的怪物一样」。
   * 红框是主角立绘+血条那一块（在画面偏中下、封印匣右侧）。
   * ⚠️ 这里**又**需要绝对定位（上一轮加过导致跑出屏幕，这次锚点选对）：
   *    .bt-me 原本在 #bt-top 的正常流里，而 #bt-top 是 `top:0` 的横条；
   *    要把它移到画面中下就必须脱离该容器 —— 所以改为挂在 .bt 上，
   *    用 left/top 百分比锚到画面 34% 高度处。
   *    实测依据：红框中心约在 (300, 290) / (1067, 600) ⇒ left≈26%, top≈48%。 */
  .bt-me{
    position:absolute !important;
    left:26% !important;
    top:44% !important;
    right:auto !important;bottom:auto !important;
    transform:translateX(-50%) !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:clamp(3px,0.8vh,7px) !important;
    margin:0 !important;
    z-index:3 !important;
    width:clamp(120px,20vw,190px) !important;
  }
  /* #bt-top 是主角牌的定位容器（原来只有它 + 回合数，现在回合数已删），
     给它内边距让开与屏幕边缘的距离 */
  .bt-top{
    padding:clamp(6px,1.6vh,14px) clamp(10px,2.4vw,24px) !important;
    background:none !important;
  }
  .bt-me-col{
    min-width:0 !important;
    align-items:center !important;
    gap:clamp(2px,0.7vh,6px) !important;
    flex:0 1 auto !important;
  }
  .bt-me .hbar{width:100% !important}
  .bt-me-col .nm{font-size:clamp(9px,2.8vh,15px) !important}
  .bt-me .hbar{height:clamp(9px,2.4vh,16px) !important}
  .bt-me .hbar span{font-size:clamp(8px,2.4vh,12px) !important}
  /* ⚠️ 这里**不能**给 .bt-bagwrap 设 flex 属性 ——
     下面第 618 行起它要改成 position:absolute（自己定宽定位于左下角）。
     两套定位方式并存时 flex 的高度计算会让容器塌成 20px（只剩边框+padding）。
     所以这里只保留 .bt-bag-layer 的规则（它是内层高亮图，不用定位）。 */
  .bt-bag-layer{min-height:0 !important;min-width:0 !important}
  .bt-foe{
    flex:0 0 clamp(96px,24vw,150px) !important;
    min-width:0 !important;
  }
  /* 网格：5×5 在横屏里必须靠格子变小才放得下 */
  /* 封印匣：★ 2026-10-18（用户）移到左上角后**缩小** —— 42px 太大，
     占了画面左半边。5×5 用 30px 一格（共 156px），给中间的主角牌让位。 */
  .bt-bag{--cell:clamp(19px,5vh,30px)}
  .bt-bag .cell{width:var(--cell) !important;height:var(--cell) !important}
  .bt-bag-grid{gap:1px !important}

  /* ---------- 立绘：★ 2026-10-18（用户蓝圈）放大 ----------
   * 顶栏删掉后画面空出来一大块，两个立绘（主角 / 敌人）都太小看不清。
   * 按真机视口（1067×600）给足：主角 ~120px、敌人 ~130px。
   * ⚠️ 主角立绘在 .bt-me .ava 里（不是 .bt-art），两条都要写。 */
  /* 主角头像（.bt-me .ava）：放大但**保持方形**，
     并且内部 img 要 object-fit:contain，否则图会被拉变形。 */
  .bt-me .ava{
    width:clamp(44px,13vh,76px) !important;
    height:clamp(44px,13vh,76px) !important;
    flex:0 0 auto !important;
  }
  .bt-me .ava img{width:100% !important;height:100% !important;object-fit:contain !important}
  /* 敌方立绘（.bt-mob）：⚠️ 它的 bottom 是**竖屏值 300px**，
     在 600px 高的视口里等于顶到天花板附近 ⇒ 必须重算。
     敌人站右侧偏上，底边抬到画面中上部。 */
  .bt-mob{
    position:absolute !important;
    right:8% !important;
    left:auto !important;
    top:44% !important;      /* 与主角牌同高，形成左右对峙 */
    bottom:auto !important;
    width:34% !important;
    align-items:flex-end !important;
  }
  /* ⚠️ 必须同时约束 img 的 width —— 只给 height 时，
     实测 .bt-mob 容器已经正位（470×156）但里面的 <img> 仍是 555×555 撑破容器。
     max-width:100% + object-fit:contain 才是完整的约束。 */
  .bt-mob .bt-art,
  .bt-mob img{
    height:clamp(70px,26vh,156px) !important;
    max-height:clamp(70px,26vh,156px) !important;
    max-width:100% !important;
    width:auto !important;
    object-fit:contain !important;
    object-position:bottom !important;
  }
  /* 背景虚影（.bt-ghost）：是敌人立绘的模糊底衬（opacity .08~.1），
     允许出血一点营造纵深，但别溢到屏幕外太多（实测原样会溢 43px）。 */
  .bt-ghost{
    right:0 !important;
    bottom:0 !important;
    width:46% !important;
    max-width:46vw !important;
    opacity:.07 !important;
  }

  /* 血条 */
  .bt-hud,
  .bt-foe-bars{gap:1px !important}
  .bt-foebar{height:3px !important}
  .bt-hud .rd{font-size:clamp(8px,2.6vh,10px) !important}

  /* ---------- 日志：⚠️ 这是本轮最隐蔽的一处 ----------
   * style.css:698 把 .bt-log 写成 **position:absolute** +
   *   `width:min(680px, calc(100% - 400px))`，而 style.css:731（760px 断点）
   *   又改成 `left:12px;right:12px`。
   * ⇒ 它根本不在 flex 流里，所以我给它写 flex-* 属性**一条都不生效**，
   *   实测 rect 纹丝不动（还是 [200,300 667x280]），日志文字压在封印匣格子上。
   * 修法：直接在横屏下**改掉绝对定位与宽度公式**，让它只占右侧空白。
   *   left 用「封印匣宽度 + 间距」的百分比锚点，右边贴边。 */
  /* ---------- 战斗日志：★ 2026-10-18（用户）压到最多 4 行 + 详情按钮 ----------
   * 用户原话：「中间的文本 ui 压缩 最多显示 4 行 做一个小按钮 详情点进去看」。
   * ⇒ .bt-logwrap 是新加的容器（日志 + 「详情」小按钮并排），
   *   .bt-log 自身用固定行高 × 4 限高，超出部分滚动（默认滚到最新一条）。
   * 完整日志走「详情」按钮 → 弹窗（.logmodal）。 */
  .bt-logwrap{
    position:absolute !important;
    left:auto !important;
    right:clamp(8px,2vw,18px) !important;
    bottom:clamp(6px,1.6vh,14px) !important;
    top:auto !important;
    display:flex !important;
    align-items:stretch !important;
    gap:clamp(3px,0.7vw,7px) !important;
    width:min(46%,480px) !important;
    max-width:none !important;
    z-index:2 !important;
  }
  .bt-log{
    flex:1 1 auto !important;
    min-width:0 !important;
    min-height:0 !important;
    /* 4 行硬上限：行高 × 4 + 内边距 */
    height:calc(var(--log-lh,1.45em) * 4 + 8px) !important;
    max-height:none !important;
    font-size:clamp(9px,3vh,12px) !important;
    line-height:var(--log-lh,1.45em) !important;
    padding:clamp(2px,0.8vh,5px) clamp(4px,1vw,8px) !important;
    overflow:auto !important;
  }
  /* 「详情」小按钮：竖排贴在日志右侧 */
  .bt-logmore{
    flex:0 0 auto !important;
    align-self:stretch !important;
    writing-mode:vertical-rl !important;
    text-orientation:upright !important;
    letter-spacing:2px !important;
    padding:clamp(4px,1vw,8px) clamp(2px,0.5vw,4px) !important;
    font-size:clamp(9px,2.8vh,11px) !important;
    font-family:inherit !important;
    color:var(--text) !important;
    background:rgba(10,18,24,.92) !important;
    border:1px solid var(--line) !important;
    border-radius:6px !important;
    cursor:pointer !important;
    min-height:0 !important;
  }
  .bt-logmore:active{background:rgba(40,207,194,.16) !important}

  /* 「详情」弹窗：完整日志，可滚动 */
  .modal.logmodal .logmodal-view{
    height:min(62vh,460px) !important;
    overflow:auto !important;
    padding:clamp(6px,1.6vh,12px) clamp(8px,2vw,16px) !important;
  }
  .modal.logmodal .bt-log-full{
    font-size:clamp(10px,3.2vh,13px) !important;
    line-height:1.6 !important;
  }
  .modal.logmodal .bt-log-full div{white-space:pre-wrap !important;overflow:visible !important}
  /* 封印匣靠左固定一块，日志往右让。
     ⚠️ 只写 width:auto 会让容器高度塌掉（实测封印匣 rect 高度只剩 20px），
        因为它原本靠内容撑高，改了 width 后 grid 的列宽算不出来。
        所以必须同时给 min-width 与显式 height（网格是 5×5，按格子数算）。 */
  /* ⚠️ **只给 .bt-bagwrap 定位，绝不能给 .bt-bag-layer** ——
     style.css:649 里 `.bt-bag-layer{position:absolute;inset:6px}`
     是相对 **.bt-bagwrap** 的内层图层（pointer-events:none 的高亮层）。
     我上一版把 left/bottom/width 一起给了它，结果内层图层跑到 bagwrap 的左下角、
     尺寸也被算坏（实测封印匣位置歪掉）。
     ⇒ 外层 bagwrap 负责靠左下定位与定宽，内层保持 inset 不动。 */
  /* ---------- 封印物栏：★ 2026-10-18（用户）移到左上角并缩小 ----------
   * 用户原话：「封印物栏移到左上角缩小一些」。
   * 位置：左上（left 上边距），网格从 42px 缩到 30px —— 5×5 共 ~160px，
   * 给中间的主角牌和右侧敌人让出空间。
   * ⚠️ 宽度/高度都用 calc(var(--cell)*5) 跟着 --cell 走，改一处即可。 */
  /* ⚠️⚠️ 定位必须给 **.bt-bag**，不是 .bt-bagwrap ——
     style.css:644 `.bt-bag{position:absolute;left:24px;bottom:300px}` 是真正的定位容器
     （封印物栏在它里面），而 .bt-bagwrap 是它的 relative 子元素。
     我之前把 left/top 写在 bagwrap 上 ⇒ 实测 computed bottom 变成 **-161px**，
     整块跑到左下角出界（bottom:300px 是竖屏值，600px 视口里等于贴底）。
     ⇒ 现在：.bt-bag 负责定位到左上，.bt-bagwrap 交回 relative 只管内容。 */
  .bt-bag{
    left:clamp(8px,1.6vw,18px) !important;
    top:clamp(8px,1.6vh,18px) !important;
    bottom:auto !important;
    width:auto !important;
    max-width:none !important;
  }
  .bt-bagwrap{
    position:relative !important;
    left:auto !important;top:auto !important;right:auto !important;bottom:auto !important;
    width:calc(var(--cell) * 5 + 22px) !important;
    min-width:calc(var(--cell) * 5 + 22px) !important;
    min-height:0 !important;
    max-width:none !important;
    height:calc(var(--cell) * 5 + 22px) !important;
    transform:none !important;   /* 压掉竖屏的 scale(.78) */
    padding:clamp(2px,0.7vh,5px) !important;
  }
  /* 标题（h5）在横屏下也压小 */
  .bt-bag h5{font-size:clamp(8px,2.4vh,10px) !important;margin:0 0 clamp(1px,0.4vh,3px) !important;letter-spacing:1px !important}
  /* 关底标签与按钮 */
  .bt-floor{font-size:clamp(8px,2.6vh,10px) !important;padding:1px 5px !important}
  .bt-ctl{gap:clamp(2px,0.8vw,6px) !important}
  .bt-ctl .btn,
  .bt-chip{
    min-height:clamp(22px,7.6vh,28px) !important;
    padding:0 clamp(4px,1vw,8px) !important;
    font-size:clamp(8px,2.6vh,10.5px) !important;
  }
}

/* ============================================================
 * 弹窗 · 横屏紧凑（2026-10-13）
 *
 * 发现的真实手机问题：style.css:939 的 `.modal{max-height:none;margin:auto 0}`
 * 是「竖屏手机贴边不滚动」的设计 —— 但横屏视口只有 336px 高，
 * 不限高 ⇒ 内容（标题 + 三张卡 + 底部按钮）超出屏幕，
 * **底部确认按钮被顶到视口外，点不到**（实测截图里只剩三张卡，看不到按钮）。
 *
 * 修法：横屏下恢复高度上限 + 可滚动，并压缩卡面与按钮尺寸。
 * ============================================================ */
@media (orientation:landscape) and (max-height:760px){
  .modal-mask{
    padding:clamp(3px,1vh,8px) !important;
    align-items:center !important;
  }
  .modal{
    max-height:100% !important;          /* ⚠️ 关键：解除竖屏的 none */
    min-height:0 !important;
    overflow:auto !important;
    padding:clamp(7px,2.4vh,13px) clamp(9px,2.4vw,16px) !important;
    border-radius:10px !important;
    margin:0 !important;
    display:flex;flex-direction:column;
  }
  .modal h2{font-size:clamp(13px,4.4vh,17px) !important;margin-bottom:clamp(3px,1vh,6px) !important}
  .modal .mdesc{font-size:clamp(9px,3vh,11.5px) !important;line-height:1.45 !important;
    margin:0 0 clamp(3px,1vh,6px) !important}
  /* 底部按钮条：横屏必须在视口内，按钮压到可点的 32px */
  .modal-foot{
    margin-top:clamp(4px,1.4vh,8px) !important;
    padding-top:clamp(4px,1.2vh,7px) !important;
    gap:clamp(4px,1.2vw,8px) !important;
    justify-content:flex-end !important;
    flex:0 0 auto !important;
    position:sticky;bottom:0;
    background:linear-gradient(180deg,rgba(10,16,21,0),var(--bg2) 34%);
  }
  .modal-foot .btn{
    flex:0 1 auto !important;
    min-height:clamp(26px,9vh,32px) !important;
    padding:0 clamp(8px,2vw,14px) !important;
    font-size:clamp(10px,3.4vh,12.5px) !important;
  }
  /* 三选一卡：横屏下并排放三列（竖屏是单列），能省一大截高度 */
  .modal .three-pick,
  .modal .boss-pick,
  .modal .alter-grid{
    grid-template-columns:repeat(3,1fr) !important;
    gap:clamp(4px,1.2vw,9px) !important;
  }
  .modal .sl-cards{grid-template-columns:repeat(3,1fr) !important;
    gap:clamp(4px,1.2vw,9px) !important}
  /* 卡面内部：图缩小、标题与描述压行 */
  .modal .sl-card,
  .modal .boss-pick > *,
  .modal .three-pick > *{
    min-height:0 !important;
    padding:clamp(4px,1.2vh,7px) !important;
  }
  .modal .sl-card .sh-tx,
  .modal .sl-card .pk-tx{font-size:clamp(9px,3vh,11px) !important}
  .modal .sl-card .sh-detail,
  .modal .sl-card .pk-sub{font-size:clamp(8px,2.6vh,9.5px) !important;line-height:1.4 !important}
  /* 卡面图：横屏里图占位是「行高大户」，压到 ~34% 屏高并让卡片本身可收缩 */
  /* ⚠️ 真机实测（MuMu CSS 视口 1067×600）后调大：
     之前按 iPhone 的 336px 视口算 max-height 只给到 44px，
     在真机上图区显得很小、上面空一大块。真机视口高 600px，
     这里要给到 ~25vh 才合适。clamp 的上下限也随之放宽。 */
  .modal .sh-art,
  .modal .sl-card img{
    max-height:clamp(48px,26vh,132px) !important;
    width:auto !important;
    max-width:88% !important;
    object-fit:contain !important;
    margin:0 auto !important;
  }
  /* 卡片本体：高度由内容决定，别继承竖屏的定高 */
  .modal .sl-card,
  .modal .sl-cards > *{
    height:auto !important;
    max-height:none !important;
    min-height:0 !important;
  }
  /* 标题区压紧 */
  .modal .sl-cards h3,
  .modal .sl-cards .sh-name,
  .modal .sl-card .sh-name{font-size:clamp(9px,3.2vh,11.5px) !important;margin:clamp(2px,0.6vh,4px) 0 0 !important}
  /* 「选择一件封印物 / 收进背包」那行标签 */
  .modal .sl-cards .sh-head,
  .modal .sh-head{font-size:clamp(9px,3.2vh,11.5px) !important;margin-bottom:clamp(3px,1vh,6px) !important}
  /* ---------- 规则页：定高 668px 在横屏必然溢出 ----------
   * ui-abyss.css:1295 把 .rules-view 写成 `height:668px`（竖屏定高），
   * 而横屏视口只有 336px ⇒ 页框比屏幕高一倍，底部文字直接压在页脚上（实测）。
   * 它原本「不滚动」是硬要求（用户明确说过），所以这里保留不滚动，
   * 只把定高改成随视口收缩 + 字号跟着缩 —— 内容变密，但完整可见。 */
  .modal.rules-modal{
    max-width:calc(100vw - 8px) !important;
    max-height:100% !important;
  }
  .modal.rules-modal .rules-view{
    height:calc(100vh - 66px) !important;   /* 66 ≈ 弹窗内边距 + 页脚 */
    max-height:calc(100vh - 66px) !important;
    padding:clamp(6px,1.8vh,12px) clamp(8px,2vw,16px) !important;
    font-size:clamp(8px,2.5vh,9.5px) !important;
    line-height:1.4 !important;
  }
  .rules-body{font-size:clamp(8px,2.5vh,9.5px) !important}
  .rules-body b,.rules-body strong{font-size:clamp(9px,2.9vh,11px) !important}
  .rules-head{font-size:clamp(9px,3vh,11px) !important;padding-bottom:clamp(3px,1vh,6px) !important}
  /* 翻页键在横屏下也缩小，仍保持 44px 可点 */
  .rules-nav{gap:clamp(6px,2vw,14px) !important}
  .rules-arrow{
    width:clamp(30px,10vh,38px) !important;
    height:clamp(30px,10vh,38px) !important;
    font-size:clamp(14px,4.6vh,18px) !important;
  }
}