/* ════════════════════════════════════════════════════════════════════════════
   mud_web 移动端 CSS Bundle v2.0 (2026-07-05)
   包含 mobile-base.css + mobile.css 的全部内容
   仅在 <html class="is-mobile"> 时生效，PC 浏览器完全不下载/不解析
   2026-07-05: 修复 mobile-base.css 的 .scene-wrapper 规则破坏 PC 布局
   ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
   mud_web 移动端统一规范基础样式 v1.0
   配套规范: docs/MOBILE_SPEC.md

   引用方式: 所有 HTML 页面 <head> 中按顺序加载:
     <link rel="stylesheet" href="/static/css/mobile-base.css?v=1.0">

   本文件只放"硬规范",不放具体页面样式。具体页面样式各自放自己的 CSS,
   断点必须用本规范定义的 sm/md/lg/xl。
   ════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   1. ROOT — 全局基准 (16px / 系统字体栈 / 动态视口)
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* 字体基准 */
  font-size: 16px;
  font-family:
    -apple-system, BlinkMacSystemFont,
    "PingFang SC", "Microsoft YaHei",
    "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  /* safe-area 变量 (供各页面消费) */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);

  /* z-index 体系 */
  --z-base:     0;
  --z-sticky:   100;
  --z-dropdown: 500;
  --z-modal:    1500;
  --z-toast:    1800;
  --z-loading:  2000;
  --z-prompt:   3000;
}

/* ─────────────────────────────────────────────────────────────────────────
   2. HTML/BODY — 滚动行为 + 动态视口
   ───────────────────────────────────────────────────────────────────────── */
/* 注意：html 不再设置 height，让内容自然撑开（PC 滚动布局需要）
   移动端需要 height: 100dvh 的场景在 mobile.css 的 html.is-mobile 块里 */
html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  background: var(--bg, #0d0d1a);
  color: var(--text, #e8e0d0);
}

/* ─────────────────────────────────────────────────────────────────────────
   3. TOUCH — 触屏交互元素尺寸 + 行为
   注意：min-width/min-height 仅在触屏设备上强制(44px Apple HIG),
         PC 浏览器有自己的设计尺寸,不应被强制拉大.
   视觉行为(touch-action/user-select/cursor)两边都需要,保留无前缀.
   ───────────────────────────────────────────────────────────────────────── */
button,
[role="button"],
.btn,
a.btn,
.dpad-btn,
.dbtn,
.combat-btn,
.tool-btn,
.npc-sprite,
.item-sprite,
.send-btn,
.emoji-btn,
.attach-btn,
.gate-btn,
.sect-job-btn,
.ferry-btn,
.scroll-bottom-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}
/* 44px 触控目标:仅触屏设备强制 */
@media (hover: none) and (pointer: coarse) {
  button,
  [role="button"],
  .btn,
  a.btn,
  .dpad-btn,
  .dbtn,
  .combat-btn,
  .tool-btn,
  .npc-sprite,
  .item-sprite,
  .send-btn,
  .emoji-btn,
  .attach-btn,
  .gate-btn,
  .sect-job-btn,
  .ferry-btn,
  .scroll-bottom-btn {
    min-width: 44px;
    min-height: 44px;
  }
}

/* hover 只在真悬停设备生效,触摸设备不"黏连" */
@media (hover: hover) {
  button:hover,
  .btn:hover {
    background: var(--hover-bg, rgba(255, 215, 0, 0.18));
  }
}

/* 触摸设备:active 反馈 */
@media (hover: none) and (pointer: coarse) {
  button:active,
  .btn:active,
  .dpad-btn:active,
  .dbtn:active {
    transform: scale(0.96);
    transition: transform 0.05s ease;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   4. INPUT — 输入框特例 (可缩放、不阻止默认行为)
   ───────────────────────────────────────────────────────────────────────── */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
select {
  font-size: 16px;                    /* iOS 不自动缩放阈值 */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  /* 输入框允许 user-select(不能禁止) */
  user-select: auto;
  -webkit-user-select: auto;
}

/* ─────────────────────────────────────────────────────────────────────────
   5. SCROLL — 滚动容器统一行为
   ───────────────────────────────────────────────────────────────────────── */
.scrollable,
.modal-body,
.output-box,
.scroll-container {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* ─────────────────────────────────────────────────────────────────────────
   6. SCENE-WRAPPER — 已被移到 mobile.css 的 html.is-mobile 块内
   (2026-07-05 修复:之前无条件 .scene-wrapper { height: 100dvh } 破坏了 PC 布局)
   ───────────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────
   7. 横竖屏引导遮罩 (麻将/掼蛋等横屏游戏专用)
   ───────────────────────────────────────────────────────────────────────── */
.orientation-prompt {
  display: none;
}

/* 默认:is-mobile 设备 + portrait 才提示 */
@media (max-width: 1024px) and (orientation: portrait) {
  html.is-mobile:not(.force-portrait) .orientation-prompt {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: var(--z-prompt);
    background: var(--bg, #0d0d1a);
    color: var(--text, #e8e0d0);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    font-size: 1.1rem;
    line-height: 1.6;
  }
  html.is-mobile:not(.force-portrait) .orientation-prompt .icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    animation: rotate-hint 2s ease-in-out infinite;
  }
  @keyframes rotate-hint {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(90deg); }
  }
  /* 跳过按钮: 2026-07-19 owner 拍板让玩家能在 portrait 下用掼蛋 */
  .orientation-prompt .orientation-skip-btn {
    margin-top: 1.8rem;
    padding: 12px 28px;
    font-size: 0.95rem;
    color: var(--text, #e8e0d0);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .orientation-prompt .orientation-skip-btn:active {
    background: rgba(255, 255, 255, 0.18);
    transform: scale(0.97);
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   8. 暗色模式(默认深色游戏主题)
   ───────────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  /* 浅色模式预留入口(暂未启用) */
}

/* ─────────────────────────────────────────────────────────────────────────
   9. 减少动画(无障碍)
   ───────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   10. 标准断点系统(供各页面 CSS 引用本文件后扩展)
   ───────────────────────────────────────────────────────────────────────── */
/* sm: ≤640px  - 默认样式生效范围(本文件大部分规则已在此范围内)
   md: 641-1024px - 横屏游戏 / 平板
   lg: 1025-1440px - 桌面
   xl: ≥1441px - 大屏 */

/* ════════════════════════════════════════════════════════════════════════════
   END OF mobile-base.css v1.0
   ════════════════════════════════════════════════════════════════════════════ */
/* ═══════════ 下面是 mobile.css ═══════════ */

/* ════════════════════════════════════════════════════════════════════════════
   mud_web 移动端 CSS — 设备驱动版 (v2026-07-05)
   
   哲学变更：从"视口断点驱动"改为"设备类驱动"。
   原因：owner 反馈 mobile-first 把 PC 浏览器也强制成了移动制式。
   修复：所有规则仅在 <html class="is-mobile"> 时生效。
   
   检测由 game.html 头部的设备检测脚本负责（同步执行，无 FOUC）：
   - UA 模式 + iPadOS 13+ 伪装 Mac 识别 + 触屏能力 + 视口宽度 兜底
   
   内部仍保留 sm/md 子断点（@media 嵌套在 html.is-mobile 内），
   用于手机/平板内部差异化。
   
   原则：不修改 PC 端 CSS，所有移动制式都用 .is-mobile 前缀限定。
   ════════════════════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BREAKPOINT: Tablet & Phone (≤1023px)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html.is-mobile  /* 设备检测：仅 .is-mobile 生效（设备类由 game.html 检测脚本设置） */ {

  /* ── 布局基础（2026-07-05 修复"永远只部分显示"） ──
     原因：之前 body overflow-y:auto + scene 55vh + output 25vh + cmd 80px
          总高度超过 100vh,用户必须滚动才能看全。
     修复：body 锁死 100dvh + flex column,各区块自动填满剩余空间。 */
  html, body {
    height: 100dvh !important;
    overflow: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  body {
    display: flex !important;
    flex-direction: column !important;
  }

  /* ── 场景区：flex 自动填满,不再写死 55vh ── */
  .scene-wrapper {
    flex: 1 1 auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
    aspect-ratio: auto !important;
    min-height: 220px !important;
    margin: 0 !important;
    border-left: none !important;
    border-right: none !important;
    overflow: hidden;
  }
  /* B5.2: 场景背景图 mobile 自适应裁剪 */
  .scene-bg {
    background-size: cover !important;
    background-position: center !important;
  }

  /* ── 命令区：底部固定,内部 flex 自动填 ── */
  .cmd-area {
    flex: 0 0 auto !important;
    max-width: 100vw !important;
    width: 100vw !important;
    margin: 0 !important;
    padding: 4px 6px calc(56px + env(safe-area-inset-bottom, 0px)) 6px !important;
    gap: 4px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    max-height: 60vh !important;
  }

  /* ── 输出框：flex 自动填剩余空间 ── */
  .output-box {
    flex: 1 1 auto !important;
    min-height: 60px !important;
    max-height: none !important;
    padding: 6px 10px !important;
    font-size: 0.78rem !important;
    line-height: 1.6 !important;
    border-radius: 6px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* ── 输入行：固定高度 ── */
  .input-row {
    flex: 0 0 auto !important;
    gap: 4px !important;
    padding: 4px 0 !important;
  }

  /* ── 点击项面板：固定一行高 ── */
  .clickables-panel-wrap {
    flex: 0 0 auto !important;
    max-height: 36px !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  /* ── 全局 ── */
  html, body {
    overflow-x: hidden;
  }

  /* ── 玩家HUD: 缩小到顶部窄条 ── */
  .player-hud {
    top: 4px !important;
    left: 4px !important;
    right: 4px !important;
    padding: 4px 8px !important;
    font-size: 0.65rem !important;
    gap: 3px !important;
  }
  .player-hud-title {
    display: none !important;
  }
  .stat-bar {
    flex: 1;
    min-width: 0;
  }
  .stat-bar-track { height: 6px !important; }
  .stat-bar-label { font-size: 0.55rem !important; }
  .stat-bar-pct { font-size: 0.5rem !important; }
  #equip-bar { display: none !important; }

  /* ── 小地图: 移到右下角，更小 ── */
  #mini-map-container {
    top: auto !important;
    bottom: 8px !important;
    right: 8px !important;
    width: 80px !important;
    height: 60px !important;
    z-index: 60 !important;
  }
  #mini-map-container > #mini-map-canvas {
    width: 80px !important;
    height: 60px !important;
  }
  #mini-map-label {
    font-size: 8px !important;
  }

  /* ── 右侧面板 → 底部水平工具栏 ── */
  .right-panel {
    position: fixed !important;
    bottom: env(safe-area-inset-bottom, 0) !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    z-index: 500 !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    gap: 0 !important;
    padding: 6px 8px !important;
    background: rgba(10, 15, 30, 0.95) !important;
    border-top: 1px solid rgba(255, 215, 0, 0.3) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }
  .right-panel .tool-btn {
    width: auto !important;
    height: 40px !important;
    padding: 0 8px !important;
    font-size: 0.72rem !important;
    flex: 1;
    max-width: 80px;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
  }
  .right-panel .tool-btn + .tool-btn {
    margin-top: 0 !important;
  }
  .right-panel .tool-btn:hover,
  .right-panel .tool-btn:active {
    background: rgba(255, 215, 0, 0.12) !important;
  }

  /* ── D-Pad 主方向键: 左侧悬浮 ── */
  .dpad {
    position: absolute !important;
    bottom: 8px !important;
    right: auto !important;
    left: 8px !important;
    z-index: 55 !important;
    grid-template-columns: 40px 40px 40px !important;
    grid-template-rows: 40px 40px 40px !important;
    gap: 3px !important;
    padding: 4px !important;
    background: rgba(10, 15, 30, 0.75) !important;
  }
  .dpad .dpad-btn {
    width: 40px !important;
    height: 40px !important;
    font-size: 0.85rem !important;
    border-radius: 6px !important;
  }
  .dpad .dpad-label {
    font-size: 0.55rem !important;
  }

  /* ── 3D方向Pad: 右侧悬浮 ── */
  .dpad-dir {
    position: absolute !important;
    bottom: 8px !important;
    right: 96px !important;
    left: auto !important;
    z-index: 55 !important;
    grid-template-columns: 34px 34px 34px !important;
    grid-template-rows: 34px 34px 34px !important;
    gap: 2px !important;
    padding: 3px !important;
    background: rgba(10, 15, 30, 0.75) !important;
  }
  .dpad-dir .dbtn {
    width: 34px !important;
    height: 34px !important;
    font-size: 0.7rem !important;
    border-radius: 5px !important;
  }
  .dpad-dir .lbl {
    font-size: 0.5rem !important;
  }

  /* ── 战斗切换按钮 ── */
  .combat-toggle-btn {
    right: 96px !important;
    bottom: 152px !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 1rem !important;
    z-index: 55 !important;
  }

  /* ── 战斗面板: 从底部滑入 ── */
  .combat-panel {
    position: fixed !important;
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    top: auto !important;
    z-index: 500 !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 8px !important;
    background: rgba(12, 4, 8, 0.95) !important;
    border-top: 2px solid rgba(255, 50, 50, 0.5) !important;
    border-radius: 12px 12px 0 0 !important;
    transform: translateY(100%) !important;
    transition: transform 0.3s ease !important;
    flex-wrap: wrap !important;
  }
  .combat-panel.visible {
    transform: translateY(0) !important;
    padding-bottom: env(safe-area-inset-bottom, 10px) !important;
  }
  .combat-buttons {
    grid-template-columns: repeat(4, 1fr) !important;
    grid-template-rows: auto !important;
    gap: 4px !important;
    padding: 4px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 100% !important;
  }
  .combat-btn {
    height: 40px !important;
    font-size: 0.7rem !important;
  }
  .combat-btn.cb-perform {
    grid-column: span 2 !important;
  }
  .jiali-jiajin-panel {
    display: none !important;  /* 手机端隐藏加力/加劲面板，用命令输入 */
  }

  /* ── 叫船按钮 ── */
  .ferry-btn {
    position: absolute !important;
    bottom: 152px !important;
    right: 8px !important;
    z-index: 55 !important;
    width: 56px !important;
    height: 32px !important;
    font-size: 0.7rem !important;
  }

  /* ── 大门/山门按钮 ── */
  .gate-btn {
    bottom: 32% !important;
    width: 72px !important;
    height: 36px !important;
    font-size: 0.75rem !important;
  }

  /* ── 掌门任务按钮 ── */
  .sect-job-btn {
    bottom: 4px !important;
    left: 8px !important;
    font-size: 0.7rem !important;
  }

  /* ── NPC 区域: 居中缩小 ── */
  .npc-area {
    bottom: 20% !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  .npc-sprite {
    transform: translate(-50%, -50%) scale(0.8) !important;
  }
  .npc-sprite:hover {
    transform: translate(-50%, -50%) scale(0.88) !important;
  }
  .npc-name-tag {
    font-size: 1rem !important;
    padding: 1px 6px !important;
  }

  /* ── NPC 弹窗: 全屏底部抽屉 ── */
  .npc-popup-overlay {
    z-index: 1100 !important;
    align-items: flex-end !important;          /* B5.1: 贴底 */
  }
  .npc-popup-box {
    flex-direction: column !important;
    align-items: center !important;
    max-width: 100vw !important;
    width: 100% !important;
    gap: 8px !important;
    border-radius: 16px 16px 0 0 !important;   /* B5.1: 顶部圆角 */
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
    animation: bsSlideUp 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  }
  .npc-popup-img {
    max-height: 40vh !important;
    max-width: 60vw !important;
  }
  .npc-popup-bubble {
    max-width: 92vw !important;
    width: 92vw !important;
    margin-left: 0 !important;
    border-radius: 12px 12px 12px 12px !important;
    font-size: 0.95rem !important;
  }
  /* B5.3: NPC 按钮 ≥48px 触摸目标 */
  .npc-popup-bubble button,
  .npc-popup-bubble .npc-action-btn {
    min-height: 48px !important;
    min-width: 48px !important;
    padding: 10px 18px !important;
    font-size: 0.95rem !important;
    border-radius: 8px !important;
  }
  .npc-popup-bubble::after {
    display: none !important;                  /* 移动端去掉三角形箭头 */
  }

  /* ── 命令区域: 固定底部（在 toolbar 上方） ──
     注：cmd-area 的核心 flex 规则已在 @media 顶部定义,这里只补细节 */
  .cmd-area {
    /* 底部留空给工具栏（已在顶部定义,此处保持） */
  }
  body.fullpage-active .cmd-area {
    padding-top: 8px !important;
  }

  /* ── 输出区全页按钮: 移动端可见 ── */
  .output-toggle-row {
    flex: 0 0 auto !important;
    padding: 0 0 2px 0 !important;
  }
  .output-fullpage-btn {
    width: 36px !important;
    height: 32px !important;
    padding: 2px 4px !important;
  }

  /* ── 输入行: 紧凑 ── */
  .cmd-input {
    height: 40px !important;
    /* 2026-07-07 P0-blur-fix: ≥16px 阻止 iOS Safari on-focus 自动 zoom-in */
    font-size: 16px !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
  }
  .send-btn {
    height: 40px !important;
    width: 52px !important;
    font-size: 0.8rem !important;
    padding: 0 6px !important;
    border-radius: 8px !important;
  }
  .emoji-btn, .attach-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 1.1rem !important;
  }

  /* ── 点击项面板 ── */
  .clickables-panel {
    gap: 4px !important;
    padding: 2px 4px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  .clickables-panel button {
    font-size: 0.7rem !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    flex: 0 0 auto !important;
  }

  /* ── 键盘弹起状态（JS 加 .keyboard-open 到 body） ──
     当输入法弹起,把 cmd-area 浮起来,避免被键盘遮住 */
  body.keyboard-open {
    /* 锁定场景区高度 = VisualViewport 高度 */
  }
  body.keyboard-open .scene-wrapper {
    flex: 0 0 var(--vv-height, 30vh) !important;
    min-height: 120px !important;
  }
  body.keyboard-open .cmd-area {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 2500 !important;
    background: rgba(10, 10, 25, 0.98) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-top: 1px solid rgba(255, 215, 0, 0.3) !important;
    padding: 6px 8px calc(8px + env(safe-area-inset-bottom, 0px)) 8px !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.6) !important;
  }
  body.keyboard-open .right-panel {
    display: none !important;  /* 键盘弹起时隐藏底部工具栏,节省空间 */
  }
  body.keyboard-open .combat-panel {
    display: none !important;
  }

  /* ── 全页模式 ── */
  body.fullpage-active .scene-wrapper {
    display: none !important;
  }
  body.fullpage-active .cmd-area {
    padding-top: 8px !important;
  }
  body.fullpage-active .output-box {
    flex: 1 !important;
    max-height: none !important;
  }

  /* ── 加载遮罩 ── */
  .loading-overlay {
    z-index: 2000 !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .loading-text {
    font-size: 0.9rem !important;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BREAKPOINT: Phone Only (≤767px)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 640px)  /* 规范 sm */ {
  html.is-mobile { /* 仅在 is-mobile 设备 + 此断点生效 */

  /* ── 场景区: 手机端 flex 自动填,保留最小高度 ── */
  .scene-wrapper {
    min-height: 200px !important;
    /* flex: 1 已在 1023px 段定义,不再覆盖 */
  }

  /* ── 玩家HUD: 极简 ── */
  .player-hud {
    padding: 3px 6px !important;
    gap: 2px !important;
  }
  .stat-bar-track { height: 5px !important; }
  .stat-bar-label { font-size: 0.5rem !important; }

  /* ── D-Pad: 更紧凑 ── */
  .dpad {
    grid-template-columns: 34px 34px 34px !important;
    grid-template-rows: 34px 34px 34px !important;
    gap: 2px !important;
    padding: 3px !important;
  }
  .dpad .dpad-btn {
    width: 34px !important;
    height: 34px !important;
    font-size: 0.75rem !important;
    border-radius: 5px !important;
  }
  .dpad .dpad-label {
    font-size: 0.5rem !important;
  }

  /* ── NPC 弹窗 ── */
  .npc-popup-box {
    max-width: 96vw !important;
  }
  .npc-popup-img {
    max-height: 35vh !important;
    max-width: 55vw !important;
  }
  .npc-popup-bubble {
    max-width: 90vw !important;
    padding: 12px 16px !important;
    font-size: 0.9rem !important;
  }

  /* ── 输出框: 更矮 ── */
  .output-box {
    max-height: 20vh !important;
    min-height: 50px;
    padding: 4px 8px !important;
    font-size: 0.72rem !important;
  }

  /* ── 输入行 ── */
  .cmd-input {
    height: 36px !important;
    /* 2026-07-07 P0-blur-fix: ≥16px 阻止 iOS Safari on-focus 自动 zoom-in */
    font-size: 16px !important;
    border-radius: 6px !important;
  }
  .send-btn {
    height: 36px !important;
    width: 44px !important;
    font-size: 0.75rem !important;
  }
  .emoji-btn, .attach-btn {
    width: 32px !important;
    height: 32px !important;
  }

  /* ── 右侧工具栏: 更窄 ── */
  .right-panel .tool-btn {
    height: 36px !important;
    padding: 0 4px !important;
    font-size: 0.65rem !important;
    max-width: 72px;
  }

  }}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BREAKPOINT: Tablet (768px - 1023px)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 641px) and (max-width: 1024px)  /* 规范 md */ {
  html.is-mobile { /* 仅在 is-mobile 设备 + 此断点生效 */

  /* ── 场景区: 适中高度 ── */
  .scene-wrapper {
    height: 60vh !important;
    min-height: 400px !important;
  }

  /* ── D-Pad: 中等大小 ── */
  .dpad {
    grid-template-columns: 44px 44px 44px !important;
    grid-template-rows: 44px 44px 44px !important;
  }
  .dpad .dpad-btn {
    width: 44px !important;
    height: 44px !important;
  }

  /* ── 输出框: 中等高度 ── */
  .output-box {
    max-height: 30vh !important;
  }

  /* ── 工具栏按钮 ── */
  .right-panel .tool-btn {
    max-width: 100px;
  }

  }}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   COMMON: 弹窗/模态框 全屏适配（所有 ≤1023px）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html.is-mobile  /* 设备检测：仅 .is-mobile 生效（设备类由 game.html 检测脚本设置） */ {

  /* ── 背包弹窗: 全屏 ── */
  #backpack-modal > div {
    width: 96vw !important;
    max-width: 100vw !important;
    height: 85vh !important;
    max-height: 85vh !important;
    border-radius: 12px 12px 0 0 !important;
  }
  #backpack-grid {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important;
    gap: 8px !important;
  }

  /* ── 装备面板: 全屏堆叠 ── */
  #equip-modal > div {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 90vh !important;
    max-height: 90vh !important;
    border-radius: 12px 12px 0 0 !important;
  }
  #equip-content {
    flex-direction: column !important;
    overflow-y: auto !important;
    gap: 10px !important;
  }
  #paper-doll-wrap {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }
  #paper-doll-inner {
    width: 240px !important;
    height: 430px !important;
    transform: scale(0.75) !important;
    transform-origin: top center !important;
  }
  #eq-bp-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    grid-template-rows: auto !important;
  }

  /* ── 人物属性面板: 全宽 ── */
  #char-modal-box {
    width: 94vw !important;
    max-width: 100vw !important;
    max-height: 88vh !important;
    border-radius: 12px !important;
  }
  #char-panel-content {
    padding: 12px !important;
  }

  /* ── 物品大图预览 ── */
  #item-preview-img {
    max-width: 85vw !important;
    max-height: 60vh !important;
  }

  /* ── 钱庄对话框 ── */
  .bank-dialog-box {
    width: 90vw !important;
    min-width: auto !important;
    max-width: 92vw !important;
    padding: 16px !important;
  }

  /* ── perform 下拉菜单 ── */
  .perform-dropdown {
    max-width: 90vw !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
  }
  .perform-dropdown button {
    padding: 10px 14px !important;
    font-size: 0.85rem !important;
  }

  /* ── 地图 Overlay（B4: 触屏缩放+拖动） ── */
  #map-overlay .map-inner {
    width: 96vw !important;
    height: 85vh !important;
    max-width: 100vw !important;
    max-height: 85vh !important;
  }
  #map-overlay .map-titlebar {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    height: 48px !important;
  }
  #map-overlay .map-close-btn {
    min-height: 40px !important;
    min-width: 44px !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
  }
  #map-canvas-wrap {
    touch-action: pinch-zoom pan-x pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #map-canvas {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* ── 肖像浮层 ── */
  #portrait-img {
    max-width: 85vw !important;
    max-height: 65vh !important;
  }
  #portrait-text {
    max-width: 85vw !important;
    font-size: 13px !important;
  }

  /* ── 表情包面板 ── */
  .emoji-panel {
    width: 94vw !important;
    max-height: 70vh !important;
    right: 3vw !important;
    bottom: 60px !important;
  }
  .emoji-panel-grid {
    grid-template-columns: repeat(5, 1fr) !important;
  }

  /* ── 好友面板 ── */
  .friend-panel {
    width: 94vw !important;
    max-height: 70vh !important;
    right: 3vw !important;
    bottom: 60px !important;
  }

  /* ── emote 目标选择面板 ── */
  .emote-target-panel {
    width: 80vw !important;
    max-height: 50vh !important;
  }

  /* ── 场景物品精灵 ── */
  .item-sprite .item-icon {
    font-size: 1.5rem !important;
  }
  .item-sprite .item-label {
    font-size: 0.6rem !important;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TOUCH ENHANCEMENTS: 触摸友好优化
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (hover: none) and (pointer: coarse) {

  /* ── 所有交互元素最小触摸目标 44px ── */
  button, .btn, .dpad-btn, .dbtn, .combat-btn, .tool-btn,
  .npc-sprite, .item-sprite, .send-btn, .emoji-btn, .attach-btn,
  .gate-btn, .sect-job-btn, .ferry-btn, .npc-popup-bubble button,
  .clickables-panel button, .bank-dialog-btns button,
  .npc-dropdown-item, .npc-menu-item {
    -webkit-tap-highlight-color: rgba(255, 215, 0, 0.15) !important;
    touch-action: manipulation !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  /* ── 去除 hover 悬停效果（触摸设备无意义，且会造成"黏连"） ── */
  .dpad-btn:hover, .dbtn:hover, .combat-btn:hover, .tool-btn:hover,
  .send-btn:hover, .ferry-btn:hover, .gate-btn:hover {
    transform: none !important;
    background: inherit !important;
    color: inherit !important;
    border-color: inherit !important;
    box-shadow: none !important;
  }

  /* ── active 状态提供即时反馈 ── */
  .dpad-btn:active, .dbtn:active, .combat-btn:active, .tool-btn:active,
  .send-btn:active, .ferry-btn:active, .gate-btn:active {
    transform: scale(0.92) !important;
    background: rgba(255, 215, 0, 0.25) !important;
    transition: transform 0.05s ease !important;
  }

  /* ── 滚动条: 触摸友好 ── */
  .output-box, #backpack-content, #equip-content, #char-panel-content {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  /* ── 输入框: iOS 不自动缩放 ── */
  input, textarea, select {
    font-size: 16px !important;  /* iOS Safari 不缩放 threshold */
  }

  /* ── GPS 地图导航: 触摸目标 ≥44px ── */
  .gps-close-btn, .gps-nav-stop, .gps-room-item .nav-btn {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
  }
  .gps-room-item {
    padding: 10px 16px !important;
    min-height: 44px !important;
  }
  .gps-search-input {
    min-height: 44px !important;
    padding: 10px 12px !important;
  }

  /* ── 滚动底部按钮: 更大触摸区 ── */
  .scroll-bottom-btn {
    padding: 8px 16px !important;
    font-size: 0.9rem !important;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NOTCH / SAFE AREA: iPhone X+ 齐刘海适配
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  html.is-mobile  /* 设备检测：仅 .is-mobile 生效（设备类由 game.html 检测脚本设置） */ {
    .cmd-area {
      padding-bottom: calc(56px + env(safe-area-inset-bottom)) !important;
    }
    .right-panel {
      padding-bottom: env(safe-area-inset-bottom, 6px) !important;
    }
    /* GPS 导航栏: 避开底部安全区 */
    #gps-nav-bar {
      padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    }
    #gps-overlay {
      padding-bottom: env(safe-area-inset-bottom) !important;
    }
  }
}
/**
 * BottomSheet — 移动端底部抽屉样式
 * 由 mobile-bundle.css 引入，仅在 html.is-mobile 下生效
 */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BOTTOM SHEET: 移动端底部抽屉
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* v48 (2026-07-10): Grok Option 1 - portal 重构
   原因: position:fixed + transform stacking context 在 iOS Safari 上 hit-testing
         有穿透 bug，tap modal 内容时事件漏给 backdrop → close
   修法: wrapper position:fixed 全屏 portal, backdrop + container 都是
         position:absolute 相对 wrapper, 同一 stacking context 命中测试可预测
   备份: /tmp/mobile-bundle.css.bak.v48_20260710_111106 */
html.is-mobile .bottom-sheet-wrapper {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 2550);
  pointer-events: none;  /* 默认 wrapper 不拦事件 */
}
html.is-mobile .bottom-sheet-wrapper.open {
  pointer-events: auto;  /* open 时 wrapper 吃事件(给 backdrop/children) */
}

html.is-mobile .bottom-sheet-backdrop {
  position: absolute;     /* 改 absolute, 相对 wrapper */
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: auto;   /* backdrop 永远接收事件,触发 close */
}
html.is-mobile .bottom-sheet-backdrop.open {
  opacity: 1;
}

html.is-mobile .bottom-sheet {
  position: absolute;     /* 改 absolute, 相对 wrapper,不是 viewport */
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 85dvh;
  background: rgba(15, 12, 25, 0.98);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  padding-bottom: env(safe-area-inset-bottom, 0);
  overflow: hidden;
  /* v48: isolation: isolate 显式创建独立 stacking context,
     双保险防 Safari hit-testing 穿透(配合 absolute 定位) */
  isolation: isolate;
  /* v48: 确保 container 自己吃事件,不让 backdrop 透过 */
  pointer-events: auto;
  /* v48: 提升到 wrapper 内最高 z,覆盖在 backdrop 之上 */
  z-index: 1;
}
html.is-mobile .bottom-sheet.open {
  transform: translateY(0);
}

html.is-mobile .bottom-sheet-handle {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 0 4px;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
html.is-mobile .bottom-sheet-handle:active {
  cursor: grabbing;
}
html.is-mobile .bottom-sheet-handle-bar {
  width: 36px;
  height: 4px;
  background: rgba(255, 215, 0, 0.3);
  border-radius: 2px;
}

html.is-mobile .bottom-sheet-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 16px 16px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   B3: 弹窗 → 底部抽屉 移动端迁移
   所有 PC modal-overlay 在 mobile 改为底部滑入
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@keyframes bsSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

html.is-mobile .modal-overlay {
  align-items: flex-end !important;          /* 贴底对齐 */
}
html.is-mobile .modal-overlay > div:first-child,
html.is-mobile #char-modal-box,
html.is-mobile #settings-modal > div {
  width: 100% !important;
  max-width: 100% !important;
  max-height: 85dvh !important;
  border-radius: 16px 16px 0 0 !important;
  margin: 0 !important;
  animation: bsSlideUp 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  overflow-y: auto !important;
  padding-bottom: env(safe-area-inset-bottom, 0) !important;
}

/* 物品预览: 移动端居中显示（图片预览不适合底部抽屉） */
html.is-mobile #item-preview-modal {
  align-items: center !important;
}
html.is-mobile #item-preview-img {
  max-width: 90vw !important;
  max-height: 60vh !important;
}

/* 设置弹窗特定修复 */
html.is-mobile .settings-modal-box {
  max-height: 80dvh !important;
}

/* 角色面板: 移动端更紧凑 */
html.is-mobile #char-modal-box {
  max-height: 82dvh !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE C: 街机/麻将/掼蛋 mobile-first
   ═══════════════════════════════════════════════════════════════ */

/* ━━ C1: 街机厅 (arcade.html) ━━ */
html.is-mobile .cabinet {
  background-image: none !important;          /* 隐藏 cabinet PNG 装饰 */
  padding: 0 !important;
  margin: 0 !important;
}
html.is-mobile .cabinet-screen {
  position: static !important;
  width: 100vw !important;
  height: auto !important;
  aspect-ratio: 4/3 !important;
  border-radius: 0 !important;
  border: none !important;
}
html.is-mobile .cabinet-screen::before,
html.is-mobile .cabinet-screen::after {
  display: none !important;                   /* 去掉 CRT 扫描线伪元素 */
}
html.is-mobile .cabinet-screen canvas {
  width: 100% !important;
  height: auto !important;
}

/* ━━ C2/C3: 麻将/掼蛋 大堂 (mahjong_lobby / guandan_lobby) ━━ */
html.is-mobile .tables-grid {
  grid-template-columns: 1fr !important;      /* 单列房间卡片 */
  gap: 12px !important;
}
html.is-mobile .room-card {
  padding: 16px !important;
  border-radius: 16px !important;
}
html.is-mobile .room-card .room-name {
  font-size: 1.1rem !important;
}
html.is-mobile .room-card button,
html.is-mobile .room-card .join-btn {
  min-height: 48px !important;
  min-width: 48px !important;
  border-radius: 8px !important;
  font-size: 1rem !important;
  padding: 10px 20px !important;
}

/* ━━ C2: 麻将游戏 (mahjong.html) ━━ */
html.is-mobile .game-layout {
  display: flex !important;
  flex-direction: column !important;
  height: 100dvh !important;
}
html.is-mobile .game-layout .game-table {
  flex: 1 !important;
  min-height: 0 !important;
}
html.is-mobile .game-layout .action-bar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 500 !important;
  padding: 8px 12px !important;
  padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  background: rgba(10, 15, 30, 0.95) !important;
  border-top: 1px solid rgba(255, 215, 0, 0.3) !important;
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
html.is-mobile .game-layout .action-bar button {
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 8px 16px !important;
  font-size: 0.9rem !important;
  border-radius: 8px !important;
}

/* ━━ C3: 掼蛋游戏 (guandan_game.html) ━━ */
html.is-mobile .guandan-layout {
  display: flex !important;
  flex-direction: column !important;
  height: 100dvh !important;
}
html.is-mobile .guandan-layout .game-table {
  flex: 1 !important;
  min-height: 0 !important;
}
html.is-mobile .guandan-layout .action-bar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 500 !important;
  padding: 8px 12px !important;
  padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  background: rgba(10, 15, 30, 0.95) !important;
  border-top: 1px solid rgba(255, 215, 0, 0.3) !important;
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
html.is-mobile .guandan-layout .action-bar button {
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 8px 16px !important;
  font-size: 0.9rem !important;
}

/* ════════════════════════════════════════════════════════════
   B1/B2/B5 移动端布局覆盖 (文件末尾,确保最高优先级)
   使用完整选择器 html.is-mobile,不依赖 CSS 嵌套
   ════════════════════════════════════════════════════════════ */

/* ── HUD: sticky 贴顶, 收紧移动端尺寸 ── */
html.is-mobile .player-hud {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  padding: 3px 6px !important;
  gap: 4px !important;
  background: linear-gradient(180deg, rgba(0,0,0,0.90) 0%, rgba(0,0,0,0.50) 80%, transparent 100%) !important;
}
html.is-mobile .player-hud-title {
  font-size: 0.75rem !important;
  letter-spacing: 0.06em !important;
}
html.is-mobile .player-hud-bars {
  gap: 4px !important;
  font-size: 0.58rem !important;
}

/* ── D-Pad / combat-panel: 移到 v7 块统一管理 (line ~1620) ── */
html.is-mobile .right-panel { display: none !important; }
html.is-mobile .npc-scene-layer { right: 0 !important; }
html.is-mobile .output-box { max-height: 35vh !important; }
html.is-mobile .combat-toggle-btn { display: none !important; }

/* ── 加载遮罩: z-index 够高 ── */
html.is-mobile .loading-overlay {
  z-index: 2000 !important;
}

/* ── 弹窗遮罩层在移动端: 底部对齐(给没有 BottomSheet 的兜底) ── */
html.is-mobile .modal-overlay {
  align-items: flex-end !important;
  background: rgba(0,0,0,0.55) !important;
}
html.is-mobile .modal-overlay > div:first-child {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 16px 16px 0 0 !important;
  max-height: 85dvh !important;
  overflow-y: auto !important;
}

/* ══════════════════════════════════════════════════════════════════

/* ══════════════════════════════════════════════════════════════════
   2026-07-06 P0 修复 v3（owner 第 5 次反馈 "键盘收回后 2/3 屏幕"）:

   ❌ v2 失败根因：
   - html/body 加 position:fixed + height:100dvh
   - iOS Safari 键盘关闭后 position:fixed 元素高度不自动重算
   - body 锁死在 keyboard-open 时的小 viewport，屏幕只剩 2/3

   ✅ v3 方案：
   - 完全去掉 html/body 的 position:fixed 和 height:100dvh
   - html/body 用 height:100% + overflow:hidden + overscroll-behavior:none
   - 键盘开 → JS 直接 body.style.height = visualViewport.height + 'px'
   - 键盘关 → JS 清空 body.style.height (恢复 CSS height:100%)
   - scene-wrapper 用 flex:1 1 0 (关键:flex-basis 0 让 flex 正确收缩)
   - cmd-area 在 keyboard-open 时 position:fixed bottom:0
   ══════════════════════════════════════════════════════════════════ */

/* ── P0-1: 窗体强锁（v3 — 不用 position:fixed） ──
   overflow:hidden + overscroll-behavior:none 防止橡皮筋
   height:100% 让 viewport 高度正常传递
   background:#000 防止 layout 重算时露出白色背景 */
html.is-mobile {
  min-height: 0 !important;  /* 覆盖全局 body { min-height: 100dvh } */
  height: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: none !important;
  touch-action: manipulation !important;
  background: #000 !important;
}
html.is-mobile body {
  min-height: 0 !important;  /* 覆盖全局 body { min-height: 100dvh } — 这是键盘收回后 2/3 屏幕的元凶 */
  height: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: none !important;
  display: flex !important;
  flex-direction: column !important;
  touch-action: manipulation !important;
  background: #000 !important;
  /* ⚠️ 不加 position:fixed! 这是 v2 bug 的根源 */
}
/* scene-wrapper flex 收缩关键: flex-basis 0 让 flex 在 height 变化时正确重新分配 */
html.is-mobile .scene-wrapper {
  overflow: hidden !important;
  flex: 1 1 0 !important;        /* v3: 用 1 1 0 而非 1 1 auto,确保收缩时正确 */
  min-height: 0 !important;
  position: relative !important;
  aspect-ratio: auto !important;  /* 覆盖 templates 内联的 1280/768 */
  max-height: none !important;
  width: 100% !important;         /* 覆盖 templates 内联的 90vw/1280px */
  margin: 0 !important;
  border-radius: 0 !important;    /* 移动端不要圆角 */
}
/* scene-bg 填满 scene-wrapper */
html.is-mobile .scene-bg {
  position: absolute !important;
  inset: 0 !important;
  background-size: cover !important;
  background-position: center !important;
}
/* cmd-area 固定底部, flex 不收缩 */
html.is-mobile .cmd-area {
  flex: 0 0 auto !important;
  overflow: hidden !important;
  max-height: 50vh !important;
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* HUD sticky 贴顶 */
html.is-mobile .player-hud {
  flex: 0 0 auto !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}


/* ── P0-3: D-Pad 不弹输入法 / 不抢焦点 ──
   touch-action: manipulation 阻止 300ms 延迟 + 阻止双击缩放
   tap-highlight-color 透明 防止 iOS 灰色高亮
   user-select 防止长按选择 */
html.is-mobile .dpad,
html.is-mobile .dpad-dir,
html.is-mobile .dpad-btn,
html.is-mobile .dbtn {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* ── P0-4: 手机端隐藏大小地图 ── */
html.is-mobile #mini-map-container {
  display: none !important;
}
html.is-mobile #map-overlay {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   键盘弹起状态（v3）:
   - body 高度由 JS 直接控制（body.style.height = visualViewport.height）
   - cmd-area position:fixed bottom:0 浮在键盘上方
   - scene-wrapper flex:1 1 0 自适应剩余高度
   - D-Pad / 战斗面板 / 工具栏 全部隐藏
   ══════════════════════════════════════════════════════════════════ */

/* keyboard-open 时 cmd-area 浮在键盘上方（脱离 flex） */
html.is-mobile.keyboard-open .cmd-area,
html.is-mobile body.keyboard-open .cmd-area {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 2500 !important;
  background: rgba(10, 10, 25, 0.98) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-top: 1px solid rgba(255, 215, 0, 0.3) !important;
  padding: 6px 8px calc(8px + env(safe-area-inset-bottom, 0px)) 8px !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.6) !important;
}
/* keyboard-open 时 scene 自适应（flex:1 1 0 会填满 body 减去 HUD 高度） */
html.is-mobile.keyboard-open .scene-wrapper,
html.is-mobile body.keyboard-open .scene-wrapper {
  /* body.style.height 已经被 JS 设成 visualViewport.height */
  /* flex:1 1 0 自动分配 body 减去 HUD 和 cmd-area(fixed不占flex)的空间 */
  /* 不需要再设 flex-basis, 只需要保持 flex:1 1 0 */
  min-height: 120px !important;
}
/* keyboard-open 时右侧工具栏 + 战斗面板 + D-Pad 全隐藏 */
html.is-mobile.keyboard-open .right-panel,
html.is-mobile.keyboard-open .combat-panel,
html.is-mobile.keyboard-open .dpad,
html.is-mobile.keyboard-open .dpad-dir,
html.is-mobile.keyboard-open #dpad-dir,
html.is-mobile.keyboard-open #dpad,
html.is-mobile body.keyboard-open .right-panel,
html.is-mobile body.keyboard-open .combat-panel,
html.is-mobile body.keyboard-open .dpad,
html.is-mobile body.keyboard-open .dpad-dir,
html.is-mobile body.keyboard-open #dpad-dir,
html.is-mobile body.keyboard-open #dpad {
  display: none !important;
  pointer-events: none !important;
}


/* ════════════════════════════════════════════════════════════════════════
   APPEND: PC 隔离兜底 — mobile-only 元素在 PC 上不能出现
   2026-07-06 PC 验证发现: .clickables-panel / .combat-panel 漏到了 PC
   用 html:not(.is-mobile) 兜底,任何未来加进来的 mobile 元素只要有这个 class,
   自动在 PC 上隐藏 (display:none !important)
   ════════════════════════════════════════════════════════════════════════ */
html:not(.is-mobile) .clickables-panel,
html:not(.is-mobile) .clickables-panel-wrap,
html:not(.is-mobile) .orientation-prompt {
  display: none !important;
  pointer-events: none !important;
}
/* P1 2026-07-08: 移除 .combat-toggle-btn (这是 PC 上的唯一触发按钮, 必须可见)
   之前 在 这里多加一条 html:not(.is-mobile) .combat-toggle-btn { display:none }
   与 行 1341 html.is-mobile .combat-toggle-btn { display:none } 反向重复
   效果: PC 上被 hide (因为 PC 上 is-mobile 不在) → PC 玩家永远看不到战斗按钮 */
/* 注:.combat-panel 在 PC 上走 game.html 行 672-689 的 inline 样式,
   默认 transform: translateY(calc(100% + 30px)); opacity: 0;
   .combat-panel.visible 用 transform: translateY(0); opacity: 1
   toggleCombatPanel() 会加 .visible class。
   P1 2026-07-08 修复: 移动到这里删除 html:not(.is-mobile) .combat-panel { opacity:0 !important }
   原因: 该规则带 !important, 盖过了 game.html .combat-panel.visible { opacity: 1 }
   后果: PC 上点 ⚔ 按钮后 add .visible class (log 层成功)，但 visual 是 opacity 0 →
         "点了战斗按钮弹不出战斗面板"
   owner 2026-07-08 00:25 反馈 ("PC 端点战斗面板按钮弹不出战斗面板")
*/
/* peek-handle 是 mobile-only 元素, PC 上不要破坏 dpad / dpad-dir 的 grid 布局 */
html:not(.is-mobile) .peek-handle {
  display: none !important;
}
/* 注:#dpad 是 PC 和 mobile 共用的主方向键,
   PC 是 dpad.css 的右上角 floating 圆形, mobile 是左下浮窗,
   由各自 CSS 控制位置,不归这里管. */


/* ════════════════════════════════════════════════════════════════════════
   2026-07-07 v7: D-Pad 屏幕边缘缩进 (owner 第 7 次反馈 "都看不到" 修复)
   根因: v5 peek 28px 宽 × opacity 0.25 在 iPhone 真机上完全找不到
   修复: peek 露 65px + opacity 0.55 + 2px 实色金边 + 方向箭头 handle
   + 首次进游戏 3s 自动弹出导览 (localStorage 记录, 不重复弹)
   - D-Pad 1 (东西南北 NSEW 3×3): 屏幕右边缩进
   - D-Pad 2 (东上西下 3D 3×3): 屏幕左边缩进
   - 战斗面板: 屏幕底边 (字幕区顶上方) 缩进
   ════════════════════════════════════════════════════════════════════════ */

/* 注: .output-box 已经在更早规则里有 position:relative (line ~1380+) */

/* 隐藏 v3 的 .combat-toggle-btn */
html.is-mobile .combat-toggle-btn {
  display: none !important;
}

/* ── 通用 peek-handle: 缩进时显示方向箭头, show 时淡出 ──
   handle 永远在 panel 内, 位置由各 panel 的具体规则控制 */
html.is-mobile .peek-handle {
  position: absolute;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 22px !important;
  font-weight: bold;
  color: rgba(255, 215, 0, 1) !important;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.7), 0 1px 2px rgba(0,0,0,0.9);
  pointer-events: none !important;
  z-index: 2;
  transition: opacity 0.25s ease !important;
}
/* show 状态: handle 淡出 (不挡面板内容) */
html.is-mobile .dpad.show .peek-handle,
html.is-mobile .dpad-dir.show .peek-handle,
html.is-mobile .combat-panel.show .peek-handle {
  opacity: 0 !important;
}

/* ── 第一块 D-Pad (东西南北): 屏幕右边缩进 ── */
html.is-mobile .dpad {
  position: fixed !important; top: 52% !important; right: -85px !important;
  bottom: auto !important; left: auto !important; margin: 0 !important;
  z-index: 70 !important; opacity: 0.5 !important;
  background: rgba(10, 15, 30, 0.92) !important;
  border: 2px solid rgba(255, 215, 0, 0.9) !important;
  border-radius: 10px !important; padding: 5px !important;
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.5), 0 2px 12px rgba(0, 0, 0, 0.5) !important;
  transition: right 0.25s ease, opacity 0.25s ease !important;
  pointer-events: auto !important;
  display: grid !important; visibility: visible !important;
}
html.is-mobile .dpad .peek-handle { left: 6px !important; top: 50% !important; transform: translateY(-50%) !important; }
html.is-mobile .dpad.show { right: 8px !important; opacity: 1 !important; }

/* ── 第二块 D-Pad (东上西下 3D): 屏幕左边缩进 ── */
html.is-mobile .dpad-dir {
  position: fixed !important; top: 52% !important; left: -85px !important;
  bottom: auto !important; right: auto !important; margin: 0 !important;
  z-index: 70 !important; opacity: 0.5 !important;
  background: rgba(10, 15, 30, 0.92) !important;
  border: 2px solid rgba(255, 215, 0, 0.9) !important;
  border-radius: 10px !important; padding: 5px !important;
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.5), 0 2px 12px rgba(0, 0, 0, 0.5) !important;
  transition: left 0.25s ease, opacity 0.25s ease !important;
  pointer-events: auto !important;
  display: grid !important; visibility: visible !important;
}
html.is-mobile .dpad-dir .peek-handle { right: 6px !important; top: 50% !important; transform: translateY(-50%) !important; }
html.is-mobile .dpad-dir.show { left: 8px !important; opacity: 1 !important; }

/* ── 战斗面板: 缩进到字幕区 (output-box) 顶部上方 ──
   peek 露 40px, handle ▼ 在 panel 底缘 (露出的那侧)
   show 状态: top 506 (output-box 顶) + z-index 60, 完整可见 */
html.is-mobile .output-box {
  position: relative !important;  /* 创建 stacking context */
  z-index: 50 !important;          /* 高于战斗面板 30, 让中间层挡主体 */
}
html.is-mobile .scene-wrapper {
  position: relative !important;
  z-index: 10 !important;          /* 低于 panel 30, 高于默认 0 */
}

html.is-mobile .combat-panel {
  position: fixed !important;
  top: 466px !important;            /* v7: 481 → 466, 露 40px (output-box 顶 ≈ 506px) */
  left: 50% !important;
  right: auto !important;            /* 覆盖 PC dpad.css 的 right: 394px */
  bottom: auto !important;           /* 覆盖 PC dpad.css 的 bottom: 10px */
  width: max-content !important;     /* panel 宽度自适应内容 */
  max-width: calc(100vw - 16px) !important;
  margin: 0 !important;
  z-index: 30 !important;            /* 缩进时低, 主体被 output-box 文字覆盖 */
  background: rgba(12, 12, 28, 0.97) !important;
  border: 2px solid rgba(255, 215, 0, 0.95) !important;  /* v7: 同上 */
  border-radius: 0 0 10px 10px !important;  /* 顶部圆角 0, 紧贴 output-box 顶 */
  padding: 8px 12px !important;
  transform: translateX(-50%) !important;
  opacity: 0.6 !important;            /* v7: 0.5 → 0.6, 露条看得见 */
  pointer-events: auto !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5), 0 0 14px rgba(255, 215, 0, 0.25) !important;
  transition: top 0.25s ease, z-index 0s 0.25s, opacity 0.25s ease !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
}
/* handle ▼ 在 panel 底缘 (peek 那侧) */
html.is-mobile .combat-panel .peek-handle {
  bottom: 6px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 18px !important;  /* 战斗面板把手稍小, 不挤 */
}
html.is-mobile .combat-panel.show {
  top: 506px !important;            /* show 状态: panel 顶部紧贴 output-box 顶 */
  z-index: 60 !important;           /* show 状态: 高, 完整可见 */
  opacity: 1 !important;             /* show 状态: 完全可见 */
  transition: top 0.25s ease, z-index 0s 0s, opacity 0.25s ease !important;
}

/* ── 首次进游戏 3s 自动导览 (game_main.js firstLoadTour 加 .tour-show class) ── */
html.is-mobile .dpad.tour-show,
html.is-mobile .dpad-dir.tour-show,
html.is-mobile .combat-panel.tour-show {
  opacity: 1 !important;
}
/* 导览时 handle 仍显示, 提示"在这里" */
html.is-mobile .dpad.tour-show .peek-handle,
html.is-mobile .dpad-dir.tour-show .peek-handle,
html.is-mobile .combat-panel.tour-show .peek-handle {
  opacity: 0.6 !important;
}
/* dpad 导览时整体滑出 (不只是淡入), 让用户看清"这两块是方向键" */
html.is-mobile .dpad.tour-show {
  right: 10px !important;
}
html.is-mobile .dpad-dir.tour-show {
  left: 10px !important;
}
html.is-mobile .combat-panel.tour-show {
  top: 506px !important;
  z-index: 60 !important;
  opacity: 1 !important;
}


/* ════════════════════════════════════════════════════════════════════════
   2026-07-07 v6: 键盘缩放修复 (iOS Safari on-focus auto-zoom)
   -html.is-mobile 关闭 -webkit-text-size-adjust (阻止键盘弹起时 iOS 自动 inflate 文本)
   - 上文已把 .cmd-input 字号强制 ≥16px (iOS zoom-on-focus 阈值)
   -额外防御: 任何 mobile input 都强制字号 ≥16px 防止被作者无意改回小字号
   ════════════════════════════════════════════════════════════════════════ */
html.is-mobile,
html.is-mobile body {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}
/* 兜底: 任何 mobile input 字号都不能 < 16px, 否则再次触发 iOS zoom */
html.is-mobile input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
html.is-mobile textarea,
html.is-mobile select {
  font-size: max(1rem, 16px) !important;
}

/* ════════════════════════════════════════════════════════════════
   2026-07-07 v8: .tour-show — 首次进游戏 3s 导览动画
   把 peek 面板滑入屏幕 + 全不透明 + 金色脉冲, 玩家知道它们在哪
   ════════════════════════════════════════════════════════════════ */
@keyframes dpad-tour-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255,215,0,0.3), 0 0 20px rgba(255,215,0,0.1); }
  50%      { box-shadow: 0 0 16px rgba(255,215,0,0.7), 0 0 36px rgba(255,215,0,0.35); }
}
html.is-mobile .dpad.tour-show {
  right: 8px !important; opacity: 1 !important; z-index: 80 !important;
  animation: dpad-tour-pulse 1s ease-in-out 3;
}
html.is-mobile .dpad-dir.tour-show {
  left: 8px !important; opacity: 1 !important; z-index: 80 !important;
  animation: dpad-tour-pulse 1s ease-in-out 3;
}
html.is-mobile .combat-panel.tour-show {
  bottom: 0 !important; opacity: 1 !important; z-index: 80 !important;
  animation: dpad-tour-pulse 1s ease-in-out 3;
}

/* ── owner 要求: 移动端隐藏「脚本」「终止」按钮（挡血条）── */
html.is-mobile #zmud-menu-btn,
html.is-mobile #zmud-stop-btn {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   2026-07-07 v12: 移动端主界面彻底修复
   Owner 第N次反馈：d-pad完全看不到，血条溢出

   根因:
   1. 血条: .stat-bar-track width:80px × 4条 ≈ 600px > iPhone 390px
      scene-wrapper overflow:hidden 裁剪 → 精力被裁、内力完全消失
   2. D-Pad: top:52% 在背景图区域，right:-85px 大部分在屏幕外
      用户在字幕区四周找，怎么可能找到？
   3. peek缩进设计本质是"藏在用户看不到也猜不到的地方"

   修复:
   1. 血条: flex-wrap → 4条自动换行, track缩到36px, 适配390px
   2. D-Pad: bottom:22vh 定位到输出框区域, opacity:0.10
      微光box-shadow留痕, .show/:active 时 opacity:1
   3. 战斗面板: bottom:10vh 输出框上方
   4. peek-handle 隐藏（不再需要箭头把手）
   ════════════════════════════════════════════════════════════════════════ */

/* ── P0-血条: 移动端自适应换行 ── */
html.is-mobile .player-hud {
  top: 2px !important; left: 2px !important; right: 2px !important;
  padding: 2px 4px 1px !important;
  gap: 1px !important;
}
html.is-mobile .player-hud-title {
  font-size: 0.65rem !important;
  letter-spacing: 0.06em !important;
  flex-shrink: 0 !important;
}
html.is-mobile .player-hud-bars {
  flex-wrap: wrap !important;
  gap: 1px 4px !important;
  align-items: center !important;
}
html.is-mobile .stat-bar {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  gap: 2px !important;
}
html.is-mobile .stat-bar-label {
  font-size: 0.55rem !important;
  white-space: nowrap !important;
}
html.is-mobile .stat-bar-pct {
  font-size: 0.48rem !important;
  min-width: 16px !important;
}
html.is-mobile .stat-bar-track {
  width: 34px !important;
  height: 4px !important;
}
html.is-mobile .stat-bar-fill {
  border-radius: 2px 0 0 2px !important;
}
html.is-mobile .stat-bar-eff {
  border-radius: 2px 0 0 2px !important;
}
html.is-mobile #equip-bar {
  flex: 1 0 100% !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  padding: 1px 0 0 2px !important;
}

/* ── P0-D-Pad 左 (东西南北): 输出框区域左下, 90%透明 ── */
html.is-mobile .dpad {
  position: fixed !important;
  top: auto !important;
  bottom: calc(22vh + env(safe-area-inset-bottom, 0px)) !important;
  right: auto !important;
  left: calc(4px + env(safe-area-inset-left, 0px)) !important;
  z-index: 85 !important;
  opacity: 0.10 !important;
  background: rgba(12, 16, 28, 0.88) !important;
  border: 1px solid rgba(255, 215, 0, 0.22) !important;
  border-radius: 8px !important;
  padding: 4px !important;
  box-shadow: 0 0 2px rgba(255, 215, 0, 0.08),
              0 0 1px rgba(255, 215, 0, 0.04) !important;
  transition: opacity 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
  pointer-events: auto !important;
  display: grid !important;
  visibility: visible !important;
  margin: 0 !important;
  transform: none !important;
}
html.is-mobile .dpad.show {
  opacity: 1 !important;
  border-color: rgba(255, 215, 0, 0.85) !important;
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.5),
              0 0 40px rgba(255, 215, 0, 0.15),
              0 4px 16px rgba(0,0,0,0.7) !important;
}

/* ── P0-D-Pad 右 (东上西下): 输出框区域右下, 90%透明 ── */
html.is-mobile .dpad-dir {
  position: fixed !important;
  top: auto !important;
  bottom: calc(22vh + env(safe-area-inset-bottom, 0px)) !important;
  left: auto !important;
  right: calc(4px + env(safe-area-inset-right, 0px)) !important;
  z-index: 85 !important;
  opacity: 0.10 !important;
  background: rgba(12, 16, 28, 0.88) !important;
  border: 1px solid rgba(255, 215, 0, 0.22) !important;
  border-radius: 8px !important;
  padding: 4px !important;
  box-shadow: 0 0 2px rgba(255, 215, 0, 0.08),
              0 0 1px rgba(255, 215, 0, 0.04) !important;
  transition: opacity 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
  pointer-events: auto !important;
  display: grid !important;
  visibility: visible !important;
  margin: 0 !important;
  transform: none !important;
}
html.is-mobile .dpad-dir.show {
  opacity: 1 !important;
  border-color: rgba(255, 215, 0, 0.85) !important;
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.5),
              0 0 40px rgba(255, 215, 0, 0.15),
              0 4px 16px rgba(0,0,0,0.7) !important;
}

/* ── P0-战斗面板: 输出框上方, 90%透明 ── */
html.is-mobile .combat-panel {
  position: fixed !important;
  top: auto !important;
  bottom: calc(10vh + env(safe-area-inset-bottom, 0px)) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  z-index: 85 !important;
  opacity: 0.10 !important;
  width: auto !important;
  max-width: calc(100vw - 16px) !important;
  background: rgba(12, 16, 28, 0.88) !important;
  border: 1px solid rgba(255, 215, 0, 0.22) !important;
  border-radius: 8px !important;
  padding: 6px 8px !important;
  box-shadow: 0 0 2px rgba(255, 215, 0, 0.08),
              0 0 1px rgba(255, 215, 0, 0.04) !important;
  transition: opacity 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
}
html.is-mobile .combat-panel.show {
  opacity: 1 !important;
  border-color: rgba(255, 215, 0, 0.85) !important;
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.5),
              0 0 40px rgba(255, 215, 0, 0.15),
              0 4px 16px rgba(0,0,0,0.7) !important;
}

/* ── tour-show 导览: 全不透明 + 金色脉冲 + 位置锁定 ── */
html.is-mobile .dpad.tour-show {
  top: auto !important;
  bottom: calc(22vh + env(safe-area-inset-bottom, 0px)) !important;
  right: auto !important;
  left: calc(4px + env(safe-area-inset-left, 0px)) !important;
  opacity: 1 !important;
  border-color: rgba(255, 215, 0, 0.85) !important;
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.5),
              0 0 40px rgba(255, 215, 0, 0.15),
              0 4px 16px rgba(0,0,0,0.7) !important;
  animation: dpad-tour-pulse 1s ease-in-out 3;
}
html.is-mobile .dpad-dir.tour-show {
  top: auto !important;
  bottom: calc(22vh + env(safe-area-inset-bottom, 0px)) !important;
  left: auto !important;
  right: calc(4px + env(safe-area-inset-right, 0px)) !important;
  opacity: 1 !important;
  border-color: rgba(255, 215, 0, 0.85) !important;
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.5),
              0 0 40px rgba(255, 215, 0, 0.15),
              0 4px 16px rgba(0,0,0,0.7) !important;
  animation: dpad-tour-pulse 1s ease-in-out 3;
}
html.is-mobile .combat-panel.tour-show {
  top: auto !important;
  bottom: calc(10vh + env(safe-area-inset-bottom, 0px)) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  opacity: 1 !important;
  border-color: rgba(255, 215, 0, 0.85) !important;
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.5),
              0 0 40px rgba(255, 215, 0, 0.15),
              0 4px 16px rgba(0,0,0,0.7) !important;
  animation: dpad-tour-pulse 1s ease-in-out 3;
}

/* ── 隐藏 peek-handle (不再用箭头把手) ── */
html.is-mobile .peek-handle {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   2026-07-07 v13: D-Pad 重做
   
   根因: 之前12版d-pad都写在scene-wrapper内部,
   iOS Safari 的 position:fixed 在 overflow:hidden 父元素内被当成 absolute 处理
   → d-pad 被裁剪/不可见/不可点
   
   这次: d-pad 从 scene-wrapper 移到了 body 层 (cmd-area 之前)
   不受 overflow:hidden 影响, fixed 定位正常工作
   
   设计:
   - dpad-dir (东上西下): 屏幕左侧缩进, left:-100px (露28px金边)
   - dpad (东西南北): 屏幕右侧缩进, right:-100px (露28px金边)
   - combat-panel: 底部缩进, bottom:-45px (露45px金边)
   - 默认 opacity:0.15 → tap → opacity:1 + 完整滑入
   - tap 外部 → 缩回
   ════════════════════════════════════════════════════════════════════════ */

/* v13 dpad-dir (左): 屏幕左侧缩进 */
html.is-mobile .dpad-dir {
  position: fixed !important;
  top: 45% !important;
  left: -100px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 90 !important;
  display: grid !important;
  visibility: visible !important;
  opacity: 0.15 !important;
  background: rgba(10, 15, 30, 0.88) !important;
  border: 2px solid rgba(255, 215, 0, 0.5) !important;
  border-radius: 0 10px 10px 0 !important;
  padding: 5px !important;
  gap: 3px !important;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.2), 2px 0 10px rgba(0,0,0,0.3) !important;
  transition: left 0.25s ease, opacity 0.2s ease !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  margin: 0 !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
}
html.is-mobile .dpad-dir.show {
  left: 6px !important;
  opacity: 1 !important;
  box-shadow: 0 0 24px rgba(255, 215, 0, 0.5), 4px 0 18px rgba(0,0,0,0.6) !important;
}

/* v13 dpad (右): 屏幕右侧缩进 */
html.is-mobile .dpad {
  position: fixed !important;
  top: 45% !important;
  right: -100px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 90 !important;
  display: grid !important;
  visibility: visible !important;
  opacity: 0.15 !important;
  background: rgba(10, 15, 30, 0.88) !important;
  border: 2px solid rgba(255, 215, 0, 0.5) !important;
  border-radius: 10px 0 0 10px !important;
  padding: 5px !important;
  gap: 3px !important;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.2), -2px 0 10px rgba(0,0,0,0.3) !important;
  transition: right 0.25s ease, opacity 0.2s ease !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  margin: 0 !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
}
html.is-mobile .dpad.show {
  right: 6px !important;
  opacity: 1 !important;
  box-shadow: 0 0 24px rgba(255, 215, 0, 0.5), -4px 0 18px rgba(0,0,0,0.6) !important;
}

/* v13 战斗面板: 屏幕底部缩进 */
html.is-mobile .combat-panel {
  position: fixed !important;
  top: auto !important;
  bottom: -45px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  z-index: 90 !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 0.15 !important;
  background: rgba(10, 15, 30, 0.88) !important;
  border: 2px solid rgba(255, 215, 0, 0.5) !important;
  border-radius: 10px 10px 0 0 !important;
  padding: 6px 10px !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
  flex-direction: row !important;
  justify-content: center !important;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.2), 0 -2px 10px rgba(0,0,0,0.3) !important;
  transition: bottom 0.25s ease, opacity 0.2s ease !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  margin: 0 !important;
  width: auto !important;
  max-width: calc(100vw - 16px) !important;
  height: auto !important;
  clip: auto !important;
}
html.is-mobile .combat-panel.show {
  bottom: 0 !important;
  opacity: 1 !important;
  box-shadow: 0 0 24px rgba(255, 215, 0, 0.5), 0 -4px 18px rgba(0,0,0,0.6) !important;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
}

/* v13 tour-show: 首次进游戏全弹出3秒 */
html.is-mobile .dpad.tour-show {
  right: 8px !important;
  opacity: 1 !important;
  animation: dpad-tour-pulse 1s ease-in-out 3;
}
html.is-mobile .dpad-dir.tour-show {
  left: 8px !important;
  opacity: 1 !important;
  animation: dpad-tour-pulse 1s ease-in-out 3;
}
html.is-mobile .combat-panel.tour-show {
  bottom: 0 !important;
  opacity: 1 !important;
  animation: dpad-tour-pulse 1s ease-in-out 3;
}

/* ════════════════════════════════════════════════════════════════════════
   v14 硬修 (2026-07-07):
   1) 隐藏移动端字幕区全屏按钮
   2) D-Pad 按钮 pointer-events 强制 auto（inactive 只能视觉灰化，不能阻止点击）
   3) 轻触 d-pad peek 边缘直接弹出（不依赖 swipe，iOS 上 swipe 和 scroll 打架）
   ════════════════════════════════════════════════════════════════════════ */

/* P1: 隐藏移动端字幕区全屏按钮 */
html.is-mobile .output-toggle-row {
  display: none !important;
}

/* P2: D-Pad 按钮强制可点击 — inactive 只做视觉灰化，不禁用 pointer-events
   根因: game.html:1096 .dpad-btn.inactive { pointer-events: none }
   → mobile 上 updateDpad() 如果漏调/延迟，全部按钮永久不可点 */
html.is-mobile .dpad .dpad-btn,
html.is-mobile .dpad .dpad-btn.inactive {
  pointer-events: auto !important;
  touch-action: manipulation !important;
}
html.is-mobile .dpad-dir .dbtn,
html.is-mobile .dpad-dir .dbtn.inactive {
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

/* P2b: D-Pad 面板本身也确保可点击（swipe handler 绑在 panel 上） */
html.is-mobile .dpad,
html.is-mobile .dpad-dir,
html.is-mobile .combat-panel {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* P2c: peek 状态轻触也弹出（不依赖 swipe）
   用 :active 做最简单的 tap-to-peek：按住边缘 0.15s → 滑出 */
html.is-mobile .dpad:active {
  right: 20px !important;
  opacity: 0.9 !important;
  transition: right 0.12s ease, opacity 0.12s ease !important;
}
html.is-mobile .dpad-dir:active {
  left: 20px !important;
  opacity: 0.9 !important;
  transition: left 0.12s ease, opacity 0.12s ease !important;
}
html.is-mobile .combat-panel:active {
  bottom: 6px !important;
  opacity: 0.9 !important;
  transition: bottom 0.12s ease, opacity 0.12s ease !important;
}

/* P2d: touchstart 立即 peek（比 :active 更快，iOS Safari :active 有延迟） */
/* 用 touchstart JS class（在 game_main.js v15 中设置） */
html.is-mobile .dpad.touch-peek {
  right: 8px !important;
  opacity: 1 !important;
}
html.is-mobile .dpad-dir.touch-peek {
  left: 8px !important;
  opacity: 1 !important;
}
html.is-mobile .combat-panel.touch-peek {
  bottom: 0 !important;
  opacity: 1 !important;
}

/* ════════════════════════════════════════════════════════════════════════
   v16: 移动端 D-Pad 按钮美化 (2026-07-07)
   
   之前: 53px×53px PC 尺寸，3-4px gap，border-radius 8px
   → 在 iPhone 390px 屏幕上 3×3 d-pad ≈ 179px 宽（近一半屏宽）
   → 按钮互相挤压，太大太方
   
   现在: 38px×38px 触屏尺寸，6px gap，border-radius 12px
   → d-pad ≈ 138px 宽，按钮之间呼吸感，圆润像笔记本方向键
   → 38px 触区 + 6px around = 44px 有效触区（人手可点）
   → inactive 状态：淡金色半透，降低视觉噪点但不影响可点性
   ════════════════════════════════════════════════════════════════════════ */

/* ── 右侧 D-Pad (东西南北 9 键) 按钮 ── */
html.is-mobile .dpad .dpad-btn,
html.is-mobile .dpad .dpad-btn.inactive {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  font-size: 0.9rem !important;
  border-radius: 12px !important;
  border: 1.5px solid rgba(255,215,0,0.35) !important;
  background: rgba(255,215,0,0.06) !important;
  color: rgba(255,215,0,0.8) !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  transition: background 0.15s, border-color 0.15s, transform 0.1s !important;
}
html.is-mobile .dpad .dpad-btn:hover {
  background: rgba(255,215,0,0.14) !important;
  border-color: rgba(255,215,0,0.55) !important;
}
html.is-mobile .dpad .dpad-btn:active {
  background: rgba(255,215,0,0.22) !important;
  border-color: rgba(255,215,0,0.7) !important;
  transform: scale(0.94) !important;
}

/* ── 右侧 D-Pad 标签（北/南/东/西/西北...） ── */
html.is-mobile .dpad .dpad-label {
  font-size: 0.5rem !important;
  color: rgba(255,215,0,0.4) !important;
  margin-top: 1px !important;
}

/* ── 右侧 D-Pad 网格 ── */
html.is-mobile .dpad {
  gap: 6px !important;
  padding: 7px !important;
  border-radius: 14px !important;
}

/* ── 右侧 D-Pad 中心 look 按钮 ── */
html.is-mobile .dpad .btn-look {
  font-size: 0.95rem !important;
}

/* ── 左侧 D-Pad (东上西下 3D 9 键) 按钮 ── */
html.is-mobile .dpad-dir .dbtn,
html.is-mobile .dpad-dir .dbtn.inactive {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  font-size: 0.85rem !important;
  border-radius: 12px !important;
  border: 1.5px solid rgba(255,215,0,0.35) !important;
  background: rgba(255,215,0,0.06) !important;
  color: rgba(255,215,0,0.8) !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  transition: background 0.15s, border-color 0.15s, transform 0.1s !important;
}
html.is-mobile .dpad-dir .dbtn:hover {
  background: rgba(255,215,0,0.14) !important;
  border-color: rgba(255,215,0,0.55) !important;
}
html.is-mobile .dpad-dir .dbtn:active {
  background: rgba(255,215,0,0.22) !important;
  border-color: rgba(255,215,0,0.7) !important;
  transform: scale(0.94) !important;
}

/* ── 左侧 D-Pad 标签（西上/北上/东上...） ── */
html.is-mobile .dpad-dir .dbtn .lbl {
  font-size: 0.45rem !important;
  color: rgba(255,215,0,0.35) !important;
}

/* ── 左侧 D-Pad 网格 ── */
html.is-mobile .dpad-dir {
  gap: 6px !important;
  padding: 7px !important;
  border-radius: 14px !important;
}

/* ════════════════════════════════════════════════════════════════════════
   v17: D-Pad + Combat/Jiali 最终重做 (2026-07-07 21:22)
   
   1) 左右 D-Pad 完全同逻辑：缩进 28px 金色边框 + tap=toggle
   2) 战斗面板 + 加力/加劲 合并为一个面板
   3) 战斗面板放字幕区上方，缩进时 z-index:5 < scene-wrapper:10 → 被背景图遮挡
   4) 独立 .combat-handle 标签始终可见 (z:65)，点击 toggle 面板
   ════════════════════════════════════════════════════════════════════════ */

/* ── 场景层 stacking context ── */
html.is-mobile .scene-wrapper {
  position: relative !important;
  z-index: 10 !important;
}

/* ═══════════════════════════════════════════════════════
   左 D-Pad (东上西下 3D 方向) — 屏幕左边缩进
   ═══════════════════════════════════════════════════════ */
html.is-mobile .dpad-dir {
  position: fixed !important;
  top: 45% !important;
  left: -85px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 70 !important;
  opacity: 0.25 !important;
  display: grid !important;
  visibility: visible !important;
  background: rgba(10, 15, 30, 0.92) !important;
  border: 2px solid rgba(255, 215, 0, 0.6) !important;
  border-radius: 0 10px 10px 0 !important;
  padding: 5px !important;
  gap: 3px !important;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.2), 2px 0 10px rgba(0,0,0,0.3) !important;
  transition: left 0.25s ease, opacity 0.25s ease !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  margin: 0 !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
}
html.is-mobile .dpad-dir.show {
  left: 6px !important;
  opacity: 1 !important;
  box-shadow: 0 0 24px rgba(255, 215, 0, 0.5), 4px 0 18px rgba(0,0,0,0.6) !important;
}

/* ═══════════════════════════════════════════════════════
   右 D-Pad (东西南北 8 方向 + look) — 屏幕右边缩进
   完全等同于左边逻辑——与 .dpad-dir 对称
   ═══════════════════════════════════════════════════════ */
html.is-mobile .dpad {
  position: fixed !important;
  top: 45% !important;
  right: -85px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 70 !important;
  opacity: 0.25 !important;
  display: grid !important;
  visibility: visible !important;
  background: rgba(10, 15, 30, 0.92) !important;
  border: 2px solid rgba(255, 215, 0, 0.6) !important;
  border-radius: 10px 0 0 10px !important;
  padding: 5px !important;
  gap: 3px !important;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.2), -2px 0 10px rgba(0,0,0,0.3) !important;
  transition: right 0.25s ease, opacity 0.25s ease !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  margin: 0 !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
}
html.is-mobile .dpad.show {
  right: 6px !important;
  opacity: 1 !important;
  box-shadow: 0 0 24px rgba(255, 215, 0, 0.5), -4px 0 18px rgba(0,0,0,0.6) !important;
}

/* ═══════════════════════════════════════════════════════
   Combat Handle — 始终可见的小标签 (场景层底部边缘)
   z-index:65 高于所有层, 点击 toggle 战斗面板
   ═══════════════════════════════════════════════════════ */
html:not(.is-mobile) .combat-handle {
  display: none !important;
}
html.is-mobile .combat-handle {
  display: flex !important;
  position: fixed !important;
  top: 55vh !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 65 !important;
  width: 48px !important;
  height: 22px !important;
  background: rgba(10, 15, 30, 0.9) !important;
  border: 1px solid rgba(255, 215, 0, 0.5) !important;
  border-top: none !important;
  border-radius: 0 0 6px 6px !important;
  color: rgba(255, 215, 0, 0.8) !important;
  font-size: 12px !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  transition: opacity 0.2s ease !important;
  margin: 0 !important;
}
html.is-mobile .combat-handle.panel-shown {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ═══════════════════════════════════════════════════════
   Combat + Jiali 合并面板
   - 缩进: top:28vh / z-index:5 (低于 scene-wrapper:10 → 被背景图遮挡, 完全不可见)
   - 展开: top:55vh / z-index:60 (从背景图层区域向下弹出)
   - 只有 .combat-handle 标签始终可见 (z:65)
   ═══════════════════════════════════════════════════════ */
html.is-mobile .combat-panel {
  position: fixed !important;
  top: 28vh !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  z-index: 5 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  background: rgba(12, 14, 26, 0.97) !important;
  border: 2px solid rgba(255, 215, 0, 0.6) !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
  gap: 6px !important;
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.15) !important;
  transition: top 0.25s ease, opacity 0.25s ease, visibility 0s 0.25s, z-index 0s 0.25s !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  margin: 0 !important;
  width: auto !important;
  max-width: calc(100vw - 16px) !important;
  height: auto !important;
  clip: auto !important;
}
html.is-mobile .combat-panel.show {
  top: 55vh !important;
  z-index: 60 !important;
  opacity: 1 !important;
  visibility: visible !important;
  box-shadow: 0 0 24px rgba(255, 215, 0, 0.5), 0 4px 18px rgba(0,0,0,0.6) !important;
  transition: top 0.25s ease, opacity 0.25s ease, visibility 0s 0s, z-index 0s 0s !important;
}
/* 2026-07-08 兜底: 之前 enterCombatMode() 只加 .visible, mobile CSS 只认 .show,
   真实战斗不显示面板。重复 .visible 同 .show, 两边同时响应 */
html.is-mobile .combat-panel.visible {
  top: 55vh !important;
  z-index: 60 !important;
  opacity: 1 !important;
  visibility: visible !important;
  box-shadow: 0 0 24px rgba(255, 215, 0, 0.5), 0 4px 18px rgba(0,0,0,0.6) !important;
  transition: top 0.25s ease, opacity 0.25s ease, visibility 0s 0s, z-index 0s 0s !important;
}

/* ── 合并面板内部：combat 按钮行 ── */
html.is-mobile .combat-panel .combat-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  justify-content: center !important;
}
html.is-mobile .combat-panel .combat-btn {
  width: auto !important;
  min-width: 44px !important;
  height: 32px !important;
  padding: 0 8px !important;
  font-size: 0.72rem !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,215,0,0.35) !important;
  background: rgba(255,215,0,0.06) !important;
  color: rgba(255,215,0,0.8) !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}
html.is-mobile .combat-panel .combat-btn:active {
  background: rgba(255,215,0,0.2) !important;
  border-color: rgba(255,215,0,0.6) !important;
}

/* ── 合并面板内部：jiali/jiajin 控件行 ── */
html.is-mobile .combat-panel .jiali-ctl,
html.is-mobile .combat-panel .jiajin-ctl {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.7rem !important;
  color: rgba(255,215,0,0.7) !important;
}
html.is-mobile .combat-panel .jiali-digits,
html.is-mobile .combat-panel .jiajin-digits {
  display: flex !important;
  gap: 2px !important;
}
html.is-mobile .combat-panel .jiali-digit,
html.is-mobile .combat-panel .jiajin-digit {
  width: 22px !important;
  height: 26px !important;
  line-height: 26px !important;
  text-align: center !important;
  font-size: 0.85rem !important;
  border: 1px solid rgba(255,215,0,0.3) !important;
  border-radius: 4px !important;
  background: rgba(0,0,0,0.3) !important;
  color: rgba(255,215,0,0.8) !important;
}
html.is-mobile .combat-panel .jiali-digit.focused,
html.is-mobile .combat-panel .jiajin-digit.focused {
  border-color: rgba(255,215,0,0.8) !important;
  background: rgba(255,215,0,0.12) !important;
}
html.is-mobile .combat-panel .jiali-confirm,
html.is-mobile .combat-panel .jiajin-confirm {
  height: 26px !important;
  padding: 0 10px !important;
  font-size: 0.7rem !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255,215,0,0.5) !important;
  background: rgba(255,215,0,0.12) !important;
  color: rgba(255,215,0,0.9) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

/* ── 合并面板内部：隐藏标签（移动端排版紧凑） ── */
html.is-mobile .combat-panel .jiali-hint,
html.is-mobile .combat-panel .jiajin-hint {
  font-size: 0.55rem !important;
  color: rgba(255,215,0,0.35) !important;
  flex: 1 !important;
  text-align: right !important;
}
html.is-mobile .combat-panel .jiali-label,
html.is-mobile .combat-panel .jiajin-label {
  font-size: 0.7rem !important;
  min-width: 42px !important;
}

/* ═══════════════════════════════════════════════════════
   tour-show 导览: 首次进游戏全弹出 3 秒
   ═══════════════════════════════════════════════════════ */
html.is-mobile .dpad.tour-show {
  right: 6px !important;
  opacity: 1 !important;
  animation: dpad-tour-pulse 1s ease-in-out 2;
}
html.is-mobile .dpad-dir.tour-show {
  left: 6px !important;
  opacity: 1 !important;
  animation: dpad-tour-pulse 1s ease-in-out 2;
}
html.is-mobile .combat-panel.tour-show {
  top: 55vh !important;
  z-index: 60 !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: dpad-tour-pulse 1s ease-in-out 2;
}
html.is-mobile .combat-handle.tour-show {
  opacity: 0 !important;
}

/* ── v17 PC/Mobile 隔离：combat-toggle-btn 移动端隐藏 ── */
html.is-mobile .combat-toggle-btn {
  display: none !important;
}

/* ── v17: keyboard-open 兜底 (必须在 v17 panel 规则之后以覆盖 display:grid) ── */
html.is-mobile.keyboard-open .dpad,
html.is-mobile.keyboard-open .dpad-dir,
html.is-mobile.keyboard-open .combat-panel,
html.is-mobile.keyboard-open .combat-handle,
html.is-mobile body.keyboard-open .dpad,
html.is-mobile body.keyboard-open .dpad-dir,
html.is-mobile body.keyboard-open .combat-panel,
html.is-mobile body.keyboard-open .combat-handle {
  display: none !important;
  pointer-events: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   v17b: 移动端工具栏 (right-panel) 显示在背景层区域
   
   PC: right-panel position:absolute bottom/right
   移动端: position:fixed 在场景层右侧, 按钮随视口缩放
   ════════════════════════════════════════════════════════════════════════ */

html.is-mobile .right-panel {
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  top: 12vh !important;
  right: 4px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 65 !important;
  gap: 3px !important;
  align-items: center !important;
  pointer-events: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}

html.is-mobile .right-panel .tool-btn {
  width: auto !important;
  min-width: 44px !important;
  max-width: 64px !important;
  height: 28px !important;
  padding: 0 6px !important;
  font-size: max(0.65rem, 10px) !important;
  font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif !important;
  background: rgba(10, 15, 30, 0.82) !important;
  border: 1px solid rgba(255, 215, 0, 0.45) !important;
  border-radius: 6px !important;
  color: rgba(232, 200, 138, 0.85) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: 0 !important;
  line-height: 28px !important;
  text-align: center !important;
  transition: background 0.15s, border-color 0.15s !important;
}
html.is-mobile .right-panel .tool-btn:hover {
  background: rgba(255, 215, 0, 0.15) !important;
  border-color: rgba(255, 215, 0, 0.65) !important;
}
html.is-mobile .right-panel .tool-btn:active {
  background: rgba(255, 215, 0, 0.25) !important;
  border-color: rgba(255, 215, 0, 0.8) !important;
}

/* keyboard-open 时隐藏工具栏 */
html.is-mobile.keyboard-open .right-panel,
html.is-mobile body.keyboard-open .right-panel {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   v18b: 移动端 modal 内容适配 (装备/人物属性/设置 面板)
   
   之前: .modal-overlay 已经有底部抽屉 + 100% 宽的兜底,
        但 modal 内层 (纸娃娃/背包/属性卡) 还是 PC 尺寸 (1024×768 + 310×558 纸娃娃)
        → 移动端打开后内容超出, 横向滚动, 看不清
   
   现在: 内层内容按 mobile viewport 重新布局
   - 装备 modal: 纸娃娃顶部缩小 (transform scale), 背包底部 5 列压缩
   - 人物属性 modal: padding/font 收紧, grid gap 减小
   - 设置 modal: 360px 太窄, 改 100% 宽
   ════════════════════════════════════════════════════════════════════════ */

/* ═════ 装备 modal (最难) ═════ */

/* 装备 modal: 头部紧凑 */
html.is-mobile #equip-modal > div:first-child > div:first-child {
  padding: 8px 12px !important;
}
html.is-mobile #equip-modal > div:first-child > div:first-child > span {
  font-size: 0.9rem !important;
}
html.is-mobile #equip-modal > div:first-child > div:first-child > button {
  font-size: 1rem !important;
  padding: 2px 6px !important;
}

/* 装备 modal: 内容区垂直堆叠 */
html.is-mobile #equip-content {
  flex-direction: column !important;
  padding: 8px !important;
  gap: 8px !important;
  overflow-y: auto !important;
}

/* 装备 modal: 纸娃娃缩小 (~155×340 视觉) */
html.is-mobile #paper-doll-wrap {
  width: 155px !important;
  height: 340px !important;
  margin: 0 auto !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  position: relative !important;
}
html.is-mobile #paper-doll-inner {
  transform: scale(0.5) !important;  /* 310 * 0.5 = 155, 558 * 0.5 = 279 */
  transform-origin: top left !important;
  /* wrap 是 155×340, inner 缩到 155×279, 预留 61px 高避免 es-feet (bottom:661 * 0.5 = 330.5) 被裁 */
}

/* 装备 modal: 背包容器去左 margin */
html.is-mobile #equip-content > div:last-child {
  margin-left: 0 !important;
  width: 100% !important;
}

/* 装备 modal: 背包提示文字 */
html.is-mobile #eq-bp-header {
  font-size: 0.62rem !important;
  margin-bottom: 4px !important;
  text-align: center !important;
}

/* 装备 modal: 背包网格 5 列压缩 */
html.is-mobile #eq-bp-grid {
  grid-template-columns: repeat(5, 1fr) !important;
  grid-template-rows: repeat(auto-fill, 64px) !important;
  gap: 3px !important;
}
html.is-mobile #eq-bp-grid .bp-sdr {
  height: 64px !important;
  padding: 1px !important;
}
html.is-mobile #eq-bp-grid .bp-sdr img {
  width: 100% !important;
  height: 100% !important;
  max-width: 48px !important;
  max-height: 60px !important;
  object-fit: contain !important;
}
html.is-mobile #eq-bp-grid .bp-name {
  font-size: 0.45rem !important;
}

/* ═════ 人物属性 modal (中等) ═════ */

html.is-mobile #char-modal-box {
  max-height: 90dvh !important;
  width: 96% !important;
  max-width: 100% !important;
  border-radius: 14px 14px 0 0 !important;
}
html.is-mobile #char-modal-box > button {
  font-size: 1.1rem !important;
  padding: 4px 8px !important;
}
html.is-mobile #char-panel-content {
  padding: 12px 14px 16px !important;
  max-height: 86dvh !important;
}

/* 人物属性: 各种 grid 和字号收紧 */
html.is-mobile #char-panel-content [style*="grid-template-columns"] {
  gap: 4px !important;
}
html.is-mobile #char-panel-content [style*="font-size:1.35rem"] {
  font-size: 1.1rem !important;
}
html.is-mobile #char-panel-content [style*="font-size:1.0rem"] {
  font-size: 0.85rem !important;
}
html.is-mobile #char-panel-content [style*="font-size:0.68rem"] {
  font-size: 0.6rem !important;
}
html.is-mobile #char-panel-content [style*="font-size:0.72rem"] {
  font-size: 0.62rem !important;
}
html.is-mobile #char-panel-content [style*="padding:10px 8px"] {
  padding: 6px 4px !important;
}

/* ═════ 设置 modal (简单) ═════ */

html.is-mobile #settings-modal > div {
  width: 100% !important;
  max-width: 100% !important;
}
html.is-mobile .settings-modal-box {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 14px 14px 0 0 !important;
}
html.is-mobile .settings-modal-header {
  padding: 10px 14px !important;
}
html.is-mobile .settings-modal-body {
  padding: 12px 14px !important;
  gap: 12px !important;
}
html.is-mobile .settings-section-title {
  font-size: 0.7rem !important;
}
html.is-mobile .settings-row {
  font-size: 0.85rem !important;
  padding: 4px 0 !important;
}

/* ═════ 背包 modal (打开背包按钮,虽然 PC 上也有) ═════ */

html.is-mobile #backpack-modal > div:first-child {
  width: 100% !important;
  max-width: 100% !important;
  max-height: 90dvh !important;
  border-radius: 14px 14px 0 0 !important;
}

/* ═════ 装备 modal — 覆盖内联 width:1024px;height:768px ═════ */
html.is-mobile #equip-modal > div:first-child {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 90dvh !important;
  border-radius: 14px 14px 0 0 !important;
}
html.is-mobile #paper-doll-wrap {
  width: 140px !important;
  flex-shrink: 0 !important;
}
html.is-mobile #paper-doll-inner {
  width: 140px !important;
  height: 252px !important;
  transform: scale(0.45) !important;
  transform-origin: top left !important;
}
html.is-mobile #equip-content {
  flex-direction: row !important;
  gap: 4px !important;
  padding: 8px !important;
}
html.is-mobile #eq-bp-grid {
  grid-template-columns: repeat(3, 70px) !important;
  grid-template-rows: repeat(10, 56px) !important;
  gap: 2px !important;
}
html.is-mobile #eq-bp-header {
  font-size: 0.58rem !important;
  margin-bottom: 2px !important;
}
html.is-mobile .eq-sdr {
  transform: scale(0.7) !important;
  transform-origin: top left !important;
}

/* ═════ 物品大图预览 (居中, 不需要底部抽屉) ═════ */

html.is-mobile #item-preview-modal {
  align-items: center !important;
}
html.is-mobile #item-preview-img {
  max-width: 80vw !important;
  max-height: 55vh !important;
}
html.is-mobile #item-preview-name {
  font-size: 0.95rem !important;
  padding: 6px 14px !important;
}
html.is-mobile #item-preview-btns button {
  padding: 6px 14px !important;
  font-size: 0.82rem !important;
}

/* ════════════════════════════════════════════════════════════════════
   v24 (2026-07-08 P1):
   1) 移动端战斗面板: 加力/加劲 改为竖向血条 (drag to adjust)
      - 拨到顶 = max
      - 拨到底 = jiali none (0) / jiajin 1 (default)
   2) dpad 在 mobile 仍以 .show 控制, 与 v23 行为一致
   3) 战斗面板放在字幕区上方 (不变)
═══════════════════════════════════════════════════════════════════ */

/* 战斗面板在移动端: 排版改成 (绝招按钮一行) + (加力血条 + 加劲血条) */
html.is-mobile .combat-panel {
  max-width: calc(100vw - 16px) !important;
  padding: 10px 12px !important;
  max-height: calc(100vh - 100px) !important;  /* 2026-07-08: 限制高度, 避免加力/加劲 fill bar 被挤出 viewport */
  overflow-y: auto !important;                  /* 内容超出时可滚 */
}

/* 战斗按钮 - 移动端: 一行 4 个 */
html.is-mobile .combat-buttons {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-template-rows: 36px !important;
  gap: 4px !important;
  margin-bottom: 8px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
}
html.is-mobile .combat-btn {
  height: 36px !important;
  font-size: 0.78rem !important;
}
/* 7 个按钮在 4 列 grid: 第 5/6/7 自动换行 */
html.is-mobile .combat-buttons {
  grid-template-rows: 36px 36px !important;
}

/* 合并面板: 改 flex-row 默认让加力/加劲 并排 (竖向宽度紧张时) */
html.is-mobile .jiali-jiajin-panel {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
}

/* ── 竖向血条 (加力 + 加劲 同结构) ── */
html.is-mobile .combat-panel .jiali-ctl,
html.is-mobile .combat-panel .jiajin-ctl {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 8px !important;
  background: rgba(20, 14, 8, 0.7) !important;
  border: 1px solid rgba(255, 215, 0, 0.3) !important;
  border-radius: 8px !important;
  font-size: 0 !important;          /* 隐藏 inline-text 噪音 */
}

html.is-mobile .combat-panel .jiali-label,
html.is-mobile .combat-panel .jiajin-label {
  font-size: 0.78rem !important;
  min-width: auto !important;
  color: rgba(255, 215, 0, 0.9) !important;
  font-family: 'Microsoft YaHei', sans-serif !important;
  font-weight: bold !important;
}

/* 竖向血条: 200px 高, 32px 宽, 拨动改值 */
html.is-mobile .combat-panel .jiali-digits,
html.is-mobile .combat-panel .jiajin-digits {
  position: relative !important;
  display: block !important;
  width: 36px !important;
  height: 120px !important;             /* 2026-07-08: 160→120, 避免 panel 太高被挤出 viewport */
  background: rgba(0, 0, 0, 0.7) !important;
  border: 2px solid rgba(255, 215, 0, 0.4) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  cursor: ns-resize !important;
  touch-action: none !important;     /* 让 JS drag control */
}
/* fill bar: 从底部填充 */
html.is-mobile .combat-panel .jiali-fill,
html.is-mobile .combat-panel .jiajin-fill {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 0% !important;
  background: linear-gradient(to top,
    rgba(255, 215, 0, 0.95),
    rgba(255, 140, 30, 0.85)
  ) !important;
  transition: height 0.12s ease-out !important;
}

/* 中点 tick mark */
html.is-mobile .combat-panel .jiali-digits::before,
html.is-mobile .combat-panel .jiajin-digits::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 4px !important;
  right: 4px !important;
  height: 1px !important;
  background: rgba(255, 215, 0, 0.15) !important;
  z-index: 1 !important;
}

/* 真实数值显示 (大字号 居中) */
html.is-mobile .combat-panel .jiali-digit,
html.is-mobile .combat-panel .jiajin-digit {
  position: absolute !important;
  width: auto !important;
  height: auto !important;
  line-height: normal !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 0.95rem !important;
  color: #fff !important;
  text-shadow: 0 0 4px rgba(0,0,0,0.95) !important;
  z-index: 2 !important;
  border: none !important;
  background: none !important;
}
html.is-mobile .combat-panel .jiali-digit.focused,
html.is-mobile .combat-panel .jiajin-digit.focused {
  color: #ffd066 !important;
}

html.is-mobile .combat-panel .jiali-hint,
html.is-mobile .combat-panel .jiajin-hint {
  font-size: 0.55rem !important;
  color: rgba(255, 215, 0, 0.55) !important;
  flex: none !important;
  text-align: center !important;
}

html.is-mobile .combat-panel .jiali-confirm,
html.is-mobile .combat-panel .jiajin-confirm {
  display: none !important;          /* 移动端无需 confirm 按钮, drag 直接应用 */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   V24 (2026-07-08): 装备 modal 移动端重布局
   owner 反馈: "pc端里的人像和装备框体的正确位置在移动端整个移动而不是单个移动"
   策略: 整个 paper-doll 用 transform: scale 整体缩放(各槽位关系不变),
        整个 modal 改 column 堆叠(纸娃娃上, 背包下)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 1024px) {
  html.is-mobile #equip-modal {
    align-items: flex-end !important;          /* 抽屉从底部弹出 */
  }
  html.is-mobile #equip-modal > div {
    width: 100% !important;
    max-width: 100% !important;
    height: 88dvh !important;
    max-height: 88dvh !important;
    border-radius: 16px 16px 0 0 !important;
  }
  /* 内部整体 column 堆叠 (原本是 row: 纸娃娃+背包左右) */
  html.is-mobile #equip-content {
    flex-direction: column !important;
    gap: 6px !important;
    padding: 8px 10px !important;
  }
  /* paper-doll 整体居中, 缩放 0.78 倍 (原 310x558 → 视觉 242x435) */
  html.is-mobile #paper-doll-wrap {
    width: 242px !important;
    min-width: 242px !important;
    height: 435px !important;
    flex-shrink: 0 !important;
    margin: 0 auto !important;
    position: relative !important;
  }
  html.is-mobile #paper-doll-inner {
    width: 310px !important;
    height: 558px !important;
    transform: scale(0.78) !important;
    transform-origin: top left !important;
  }
  /* 背包 grid: 4 列响应式 (原 5×6=90×120 在 390px 移动端放不下) */
  html.is-mobile #eq-bp-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    grid-template-rows: auto !important;
    gap: 4px !important;
    width: 100% !important;
    flex: 1 !important;
  }
  html.is-mobile #eq-bp-grid .bp-sdr {
    width: 100% !important;
    aspect-ratio: 3/4 !important;
    height: auto !important;
  }
  html.is-mobile #eq-bp-grid .bp-sdr img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
  html.is-mobile #eq-bp-grid .bp-name {
    font-size: 0.42rem !important;
  }
  /* 背包 grid 上方的标题 "全部物品 ..." */
  html.is-mobile #eq-bp-header {
    text-align: center !important;
    margin-bottom: 4px !important;
  }
  /* 装备 modal 标题行 */
  html.is-mobile #equip-modal > div > div:first-child {
    padding: 10px 14px !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   V25 (2026-07-08): 装备 modal 移动端修复 - 修 V24 selector 失效 + inline 1024 锁死
   根因：
     1) V24 用 #equip-modal > div 选 modalBox，但 BottomSheet 把它搬到 body 外了
     2) modalBox 有 inline style="width:1024px;height:768px"，优先级比 !important 高
        即使 selector 命中也无法覆盖
     3) 结果：移动端 modalBox 仍 1024×768，背包 grid 被撑爆
   修法：
     A) HTML 删 inline 1024×768（已改） + modalBox 加 class="modal-overlay-box"
     B) V25 用 .modal-overlay-box 替代 #equip-modal > div
     C) PC 端用 .modal-overlay-box 设回 1024×768，Mobile 端设 100%×88dvh
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* PC 端: 恢复原 1024×768 布局 */
html.is-pc .modal-overlay-box {
  width: 1024px !important;
  max-width: 1024px !important;
  height: 768px !important;
  max-height: 768px !important;
}

/* Mobile 端: 全屏抽屉式 */
html.is-mobile .modal-overlay-box {
  width: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;       /* 不设 height, 随内容撑开; sheet-body 自己滚 */
  border-radius: 16px 16px 0 0 !important;
  overflow: visible !important;     /* 不锁高度, 让 sheet-body 滚 */
}

/* v48 (2026-07-10): 被 BottomSheet 包裹的 modal-overlay (display:none 时)
   加 display:none !important + pointer-events:none, 兜底防 iOS Safari hit-testing
   配合 v48 portal 重构(.bottom-sheet-wrapper 隔离 stacking context)
   保留: iOS 已知 display:flex→display:none 过渡有 hit-testing 异常 */
html.is-mobile #backpack-modal,
html.is-mobile #equip-modal,
html.is-mobile #char-modal,
html.is-mobile #settings-modal {
  display: none !important;
  pointer-events: none !important;
}

/* Mobile 装备 modal: 装备 modal 特定布局 (char/backpack modal 走自己的规则) */
html.is-mobile #equip-content {
  flex-direction: column !important;
  gap: 6px !important;
  padding: 6px 8px !important;
}
html.is-mobile #paper-doll-wrap {
  width: 192px !important;
  min-width: 192px !important;
  height: 345px !important;
  flex-shrink: 0 !important;
  margin: 0 auto !important;
  position: relative !important;
}
html.is-mobile #paper-doll-inner {
  width: 310px !important;
  height: 558px !important;
  transform: scale(0.62) !important;
  transform-origin: top left !important;
}
html.is-mobile #eq-bp-grid {
  grid-template-columns: repeat(5, 1fr) !important;
  grid-template-rows: auto !important;
  gap: 3px !important;
  width: 100% !important;
  flex: 1 !important;
}
html.is-mobile #eq-bp-grid .bp-sdr {
  width: 100% !important;
  aspect-ratio: 1/1 !important;
  height: auto !important;
}
html.is-mobile #eq-bp-grid .bp-sdr img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
html.is-mobile #eq-bp-grid .bp-name {
  font-size: 0.4rem !important;
  line-height: 1 !important;
}
html.is-mobile #eq-bp-header {
  text-align: center !important;
  margin-bottom: 3px !important;
  font-size: 0.6rem !important;
}
html.is-mobile #equip-modal > div > div:first-child {
  padding: 8px 12px !important;
}

/* ════════════════════════════════════════════════════════════════
 * V14 (2026-07-08) 血条永远一行 + 字号缩小
 * 根因：10000/10000 (11字符) 在 track:34px + label:0.55rem 下撑爆 390px，
 *      flex-wrap:wrap 让内力换到第二行
 * 修复：
 *   ① flex-wrap: nowrap 强制一行
 *   ② 4 stat-bar 改 flex:1 1 0 等分剩余空间（pct 被压缩也不换行）
 *   ③ track 34→26px, label 0.55→0.5rem, pct 0.48→0.42rem, pct min-width:0
 *   ④ 装备栏图标 28→22px, 字号 0.55→0.5rem
 * ════════════════════════════════════════════════════════════════ */
html.is-mobile .player-hud-bars {
  flex-wrap: nowrap !important;       /* ① 永远一行 */
  gap: 1px 3px !important;            /* 收紧 gap 留更多空间 */
  min-width: 0 !important;
}
html.is-mobile .stat-bar {
  flex: 1 1 0 !important;             /* ② 4 条等分剩余 */
  min-width: 0 !important;
  gap: 2px !important;
  justify-content: flex-end !important; /* 内容右对齐贴近装备栏 */
}
html.is-mobile .stat-bar-track {
  width: 26px !important;             /* ③ 34→26px */
  height: 4px !important;
  flex-shrink: 0 !important;          /* track 不被压缩 */
}
html.is-mobile .stat-bar-label {
  font-size: 0.5rem !important;       /* ③ 0.55→0.5rem */
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
html.is-mobile .stat-bar-pct {
  font-size: 0.42rem !important;      /* ③ 0.48→0.42rem, 10000/10000 能 fit */
  min-width: 0 !important;            /* ③ 允许被压缩 */
  white-space: nowrap !important;
  text-align: right !important;
  flex-shrink: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: -0.02em !important;
}

/* ④ 装备栏紧凑化, 28→22px 图标 + 0.55→0.5rem 字号 */
html.is-mobile #equip-bar {
  flex: 0 0 auto !important;          /* 不再占整行 */
  justify-content: flex-end !important;
  gap: 4px !important;
  padding: 0 0 0 4px !important;
}
html.is-mobile #equip-bar > div[id^="equip-"] {
  gap: 1px !important;
}
html.is-mobile #equip-bar img {
  width: 22px !important;
  height: 22px !important;
}
html.is-mobile #equip-bar span {
  font-size: 0.5rem !important;
}

/* ════════════════════════════════════════════════════════════════════════
   2026-07-11 closefix (owner 反馈:战斗面板关不掉)
   加一个 ✕ 关闭按钮作为最稳的兑底 — 位于面板右上角。
   其他路径 (handle tap / swipe up) 在某些 iOS 边缘场景不可靠,
   ✕ 是普通玩家直觉可见的唯一手段。
   ════════════════════════════════════════════════════════════════════════ */
html.is-mobile .combat-panel .combat-close-x {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(255, 215, 0, 0.5) !important;
  border-radius: 50% !important;
  background: rgba(15, 5, 10, 0.92) !important;
  color: rgba(255, 215, 0, 0.95) !important;
  font-size: 16px !important;
  font-weight: bold !important;
  line-height: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html.is-mobile .combat-panel .combat-close-x:active {
  background: rgba(255, 30, 30, 0.4) !important;
  border-color: rgba(255, 80, 80, 0.8) !important;
  transform: scale(0.92) !important;
}

/* handle 状态机修复: enterCombatMode 现在会同步加 .panel-shown,
   handle 在面板可见时 opacity:0 + pointer-events:none (与手动 toggle 一致),
   关闭主要靠 ✕ 按钮。 */
html.is-mobile .combat-handle.panel-shown {
  opacity: 0.35 !important;        /* 从 0 改成 0.35,方便玩家看见还能点开 (仅作调试,
                                       玩家直觉是“点中间打个 ✕”) */
  pointer-events: auto !important; /* 从 none 改成 auto,点 handle 可以直接开 */
}