/* ============================================================
   放置修仙 · 落墨长生  —  水墨仙侠风样式
   深色墨底 + 宣纸纹理(纯 CSS) + 金玉朱砂点缀
   移动端优先；桌面上自动收窄为手机比例居中
   ============================================================ */

:root{
  --ink-0:#080a0c;
  --ink-1:#0d1014;
  --ink-2:#141920;
  --ink-3:#1b222b;
  --ink-4:#242e39;
  --line:#2f3b48;
  --line-soft:#232c36;

  --txt:#e8e3d6;
  --txt-dim:#9aa2ad;
  --txt-faint:#666e78;

  --gold:#d9b45b;
  --gold-lit:#f0d68a;
  --jade:#54d1a3;
  --azure:#5fa8d3;
  --cinnabar:#d9604f;
  --purple:#a98bd6;

  --hp:#c8503f;
  --mp:#4f8fd9;
  --cult:#d9b45b;

  --r:10px;
  --shadow:0 6px 26px rgba(0,0,0,.55);
  --serif:"Songti SC","STSong","Source Han Serif SC","Noto Serif CJK SC","SimSun",serif;
  --kai:"STKaiti","KaiTi","Kaiti SC","楷体",serif;
  --sans:-apple-system,"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;
  --emoji:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji","Segoe UI Symbol",sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:var(--ink-0);
  color:var(--txt);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.6;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important;}

/* 图标统一走 emoji 字体族，避免落到中文字体里显示成豆腐块 */
.oi,.si,.ico,.tab i,.opt .oi{font-family:var(--emoji);}

/* 宣纸/云纹底纹：纯 CSS，无外部资源 */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(217,180,91,.10), transparent 60%),
    radial-gradient(ellipse 70% 50% at 10% 110%, rgba(84,209,163,.06), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.010) 0 1px, transparent 1px 4px);
}

/* ==================== 启动 / 建号 ==================== */
.boot-screen{
  position:fixed;inset:0;z-index:100;overflow-y:auto;
  background:
    radial-gradient(ellipse 100% 70% at 50% 0%, #1a2230 0%, #0b0e13 55%, #07090b 100%);
  /* ⚠️ 这里**不能**用 align-items:center —— 内容比屏幕高时，弹性居中会把顶部裁掉
     并且滚不到（建档页就是这么「显示不全」的）。改成 flex-start + 子元素 margin:auto：
     内容矮时照样垂直居中，内容高时从顶端开始、可以正常滚动到底。 */
  display:flex;align-items:flex-start;justify-content:center;
}
.boot-inner{margin:auto 0;}
/* ============================================================
   建档页（is-create）· 手机上**一屏看完，不靠下滑**
   ------------------------------------------------------------
   用户要求：建档页不要 logo 与游戏名字 —— 它们只是重复「你在玩什么」，
   却占掉近百像素；那点高度要留给身世 / 灵根的说明（也就是「特色」）。
   ⚠️ 印章与标题是 index.html 里的**静态节点**，不在 bootPanel 里，
      所以只能在这里 display:none，别去删 HTML（主菜单还要用）。
   ============================================================ */
.boot-screen.is-create .boot-inner{padding-top:calc(12px + env(safe-area-inset-top));padding-bottom:calc(10px + env(safe-area-inset-bottom));}
.boot-screen.is-create .boot-seal,
.boot-screen.is-create .boot-title,
.boot-screen.is-create .boot-sub{display:none;}
.boot-screen.is-create .boot-foot{margin-top:8px;}
/* 建档页内部间距也收一档 */
.boot-panel .field{margin-bottom:10px;}
.boot-panel .pick{gap:6px;}
.boot-panel .pick-card{padding:8px 10px;}
.boot-panel .divider{margin:9px 0;}
.boot-panel .attr-grid{gap:6px;}
/* 建档页再收一档：旁白、选项卡、底部导航都压薄 —— 四个身世要一屏放下 */
.boot-screen.is-create .boot-panel{padding:10px 11px;}
.boot-screen.is-create .boot-panel .blk{
  margin-bottom:6px; font-size:12.5px; line-height:1.6;
}
.boot-screen.is-create .boot-panel .pick-card{padding:6px 9px; border-radius:7px;}
.boot-screen.is-create .boot-panel .pc-n{font-size:13px;}
.boot-screen.is-create .boot-panel .pc-d{font-size:10.5px; margin-top:2px; line-height:1.4;}
.boot-screen.is-create .boot-panel .pc-b{
  font-size:10.5px; margin-top:4px; padding-top:4px; line-height:1.45;
}
.boot-screen.is-create .boot-nav{margin-top:8px; min-height:14px;}
.boot-screen.is-create .boot-panel .attr-grid{gap:5px;}
.boot-screen.is-create .boot-panel .field input[type=text]{padding:9px 11px;}
/* 对话式建档：旁白块与底部导航 */
.boot-panel .blk{margin-bottom:9px;}
.boot-panel .blk:last-of-type{margin-bottom:4px;}
.boot-nav{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:14px;min-height:22px;
}
.boot-back{
  font-size:12.5px;color:var(--txt-dim);cursor:pointer;
  padding:2px 6px;border-radius:5px;letter-spacing:.06em;
}
.boot-back:active{background:rgba(255,255,255,.06);}
.boot-dots{display:flex;gap:5px;margin-left:auto;}
.boot-dots i{
  width:6px;height:6px;border-radius:50%;display:block;
  background:rgba(255,255,255,.14);transition:background .2s,transform .2s;
}
.boot-dots i.done{background:rgba(217,180,91,.45);}
.boot-dots i.on{background:var(--gold);transform:scale(1.3);}
.boot-ink{
  position:fixed;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 20% 30%, rgba(217,180,91,.07), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(95,168,211,.07), transparent 45%);
}
.boot-inner{
  position:relative;width:100%;max-width:520px;padding:34px 22px 26px;
  text-align:center;
}
.boot-seal{
  width:64px;height:64px;margin:0 auto 14px;border-radius:14px;
  background:linear-gradient(160deg,#8f2f24,#5d1d16);
  color:#f5e6c8;font:600 34px/64px var(--kai);
  box-shadow:0 0 0 2px rgba(217,180,91,.35), 0 8px 28px rgba(143,47,36,.5);
  letter-spacing:0;
}
.boot-title{
  font-family:var(--serif);font-size:40px;letter-spacing:.28em;
  margin:0 0 6px;text-indent:.28em;
  background:linear-gradient(180deg,#f6e3ac,#c99b39);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 2px 18px rgba(217,180,91,.18);
}
.boot-sub{
  font-family:var(--kai);color:var(--txt-dim);letter-spacing:.36em;
  text-indent:.36em;font-size:14px;margin:0 0 26px;
}
.boot-panel{
  background:linear-gradient(180deg,rgba(27,34,43,.92),rgba(17,21,27,.92));
  border:1px solid var(--line);border-radius:var(--r);
  padding:20px 18px;text-align:left;box-shadow:var(--shadow);
}
.boot-foot{
  margin-top:20px;font-size:12px;color:var(--txt-faint);letter-spacing:.05em;
}

/* ==================== 布局 ==================== */
/* 关键：flex 子项默认 min-height:auto，会拒绝收缩到内容高度以下，
   从而把日志栏与底部导航顶出容器（body 又是 overflow:hidden → 看不到也滚不动）。
   所有可收缩的 flex/grid 子项都必须显式 min-height:0。 */
.app{
  position:relative;z-index:1;
  width:100%;max-width:520px;
  height:100%;
  height:100dvh;            /* 移动端浏览器地址栏收放时更稳 */
  min-height:0;
  margin:0 auto;
  display:flex;flex-direction:column;
  overflow:hidden;          /* 内部自行滚动，容器绝不外溢 */
  border-left:1px solid var(--line-soft);
  border-right:1px solid var(--line-soft);
  background:linear-gradient(180deg,rgba(13,16,20,.6),rgba(8,10,12,.9));
}
@media (min-width:560px){
  .app{box-shadow:0 0 60px rgba(0,0,0,.8);}
}

/* ==================== 顶栏 ==================== */
.hud{
  flex:0 0 auto;padding:10px 12px 9px;
  background:linear-gradient(180deg,rgba(27,34,43,.96),rgba(17,21,27,.96));
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(6px);
}
.hud-row1{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
.hud-name{display:flex;align-items:center;gap:6px;min-width:0;flex:1;}
.hud-name>span:first-child{
  font-family:var(--serif);font-size:16px;font-weight:600;color:var(--gold-lit);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tag{
  flex:0 0 auto;font-size:11px;padding:1px 6px;border-radius:4px;
  background:rgba(217,180,91,.13);color:var(--gold);
  border:1px solid rgba(217,180,91,.28);
}
.hud-realm{
  flex:0 0 auto;font-family:var(--kai);font-size:13px;color:var(--jade);
  padding:1px 8px;border-radius:4px;background:rgba(84,209,163,.1);
  border:1px solid rgba(84,209,163,.25);white-space:nowrap;
}
.hud-menu{
  flex:0 0 auto;background:transparent;border:1px solid var(--line);
  color:var(--txt-dim);border-radius:6px;width:28px;height:26px;
  cursor:pointer;font-size:13px;line-height:1;padding:0;
}
.hud-menu:active{background:var(--ink-4);}

.hud-bars{display:flex;gap:7px;margin-bottom:6px;}
.bar{
  position:relative;flex:1;height:15px;border-radius:8px;overflow:hidden;
  background:rgba(0,0,0,.55);border:1px solid var(--line-soft);
}
.bar-fill{
  position:absolute;inset:0;width:0%;border-radius:8px;
  transition:width .28s ease;
}
.bar-hp .bar-fill{background:linear-gradient(90deg,#8f2f24,#d9604f);}
.bar-mp .bar-fill{background:linear-gradient(90deg,#2a5d8f,#5fa8d3);}
.bar-cult .bar-fill{background:linear-gradient(90deg,#8a6a1e,#f0d68a);}
.bar-cult-top{height:17px;margin-bottom:7px;}
.bar-txt{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:10.5px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.95);letter-spacing:.02em;
}
.hud-res{display:flex;gap:12px;font-size:12px;color:var(--txt-dim);align-items:center;}
.hud-res b{color:var(--txt);font-weight:600;}
.res-stone b{color:var(--jade);}
.res-life b{color:var(--gold-lit);}
.res-rate b{color:var(--azure);}

/* ==================== 页面 ==================== */
.page-wrap{
  flex:1 1 auto;min-height:0;      /* min-height:0 是能正常滚动的关键 */
  overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;
  /* ★ v7.22（玩家反馈）：顶部的 12px 内边距从**滚动容器**挪到 `.page` 上 ——
     否则吸顶的返回栏会停在「padding 下沿」，与上面的灵石/寿元之间露出一条缝。 */
  padding:0 12px 6px;
  -webkit-overflow-scrolling:touch;
}
/* 入场动画只在「切换视图」时播（由 renderPage 加 .enter 类）。
   不要挂在 .page 上 —— 每次重绘都新建 .page 会反复重播动画，整屏一直闪。 */
.page.enter{animation:fadeUp .22s ease;}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* 面板 */
.panel{
  background:linear-gradient(180deg,rgba(27,34,43,.8),rgba(15,19,25,.8));
  border:1px solid var(--line-soft);border-radius:var(--r);
  padding:12px 13px;margin-bottom:11px;
}
.panel-title{
  font-family:var(--serif);font-size:14px;color:var(--gold-lit);
  letter-spacing:.14em;margin:0 0 9px;display:flex;align-items:center;gap:7px;
}
.panel-title::before{
  content:"";width:3px;height:13px;border-radius:2px;
  background:linear-gradient(180deg,var(--gold-lit),var(--gold));
}
.panel-title .right{margin-left:auto;font-size:11.5px;color:var(--txt-faint);letter-spacing:0;font-family:var(--sans);}

/* ---- 面板折叠（手机上页面很长，点标题收起 / 展开）---- */
.panel-title.panel-toggle{
  cursor:pointer;user-select:none;-webkit-user-select:none;
  /* 加一点内边距，手指好点；上下负外边距抵消，视觉不变 */
  padding:3px 0;margin:-3px 0 6px;
}
.panel.collapsed .panel-title.panel-toggle{margin-bottom:-3px;}
.panel-title.panel-toggle:active{opacity:.75;}
.panel-arrow{
  font-style:normal;font-size:10px;opacity:.5;margin-left:6px;
  display:inline-block;transition:transform .18s ease;
}
.panel.collapsed .panel-arrow{transform:rotate(-90deg);}
/* 收起时只留标题 */
.panel.collapsed > *:not(.panel-title){display:none;}
/* ---- 收起状态再压扁（v4.8）----
   根层现在是「全部收起的目录」，五个页签都要一屏看完 ——
   每块收起的面板省下的十几像素直接决定装不装得下（560px 高的屏就差这 8px）。
   收起时内边距 12→5、下间距 11→8、标题外边距归零，只保留手指可点的高度。
   ★ v6.18（第 30 条）：再各收 1~2px（5→4 / 8→6）——
      宗门主页在全收起状态仍超出 640 高屏 15px（6 块面板，正好够用）。 */
.panel.collapsed{ padding:4px 13px; margin-bottom:6px; }
.panel.collapsed .panel-title,
.panel.collapsed .panel-title.panel-toggle{ margin:0; padding:4px 0; }

/* 经文/叙事文本 */
.scripture{
  font-family:var(--kai);font-size:14.5px;line-height:1.95;color:#cfc9ba;
  text-indent:2em;
}
.scripture em{color:var(--gold-lit);font-style:normal;}
.scripture .jade{color:var(--jade);}
.scripture .cin{color:var(--cinnabar);}

/* 大按钮（修炼/突破等主动作） */
.big-btn{
  display:block;width:100%;margin-bottom:9px;
  /* ⚠️ 右边必须给图标**让出位置**（14px 右距 + 26px 图标 + 16px 间隙 = 56px）：
     图标是绝对定位的，不给内边距的话，介绍文字一长就压在图标上
     （用户就是看到「自行疗伤」那段被压住才提的）。文字到这儿就换行。 */
  padding:15px 56px 15px 16px;
  border-radius:var(--r);cursor:pointer;
  background:linear-gradient(180deg,rgba(46,58,72,.95),rgba(26,33,42,.95));
  border:1px solid var(--line);color:var(--txt);
  font-family:var(--serif);font-size:16px;letter-spacing:.12em;
  text-align:left;position:relative;overflow:hidden;
  transition:transform .1s, border-color .15s, box-shadow .15s;
}
.big-btn:active{transform:scale(.985);}
.big-btn .sub{
  display:block;font-family:var(--sans);font-size:11.5px;letter-spacing:0;
  color:var(--txt-dim);margin-top:3px;
}
.big-btn .ico{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-size:22px;opacity:.3;
}
.big-btn.primary{
  background:linear-gradient(180deg,rgba(143,98,26,.5),rgba(70,48,12,.5));
  border-color:rgba(217,180,91,.42);color:var(--gold-lit);
}
.big-btn.primary .sub{color:rgba(240,214,138,.62);}
.big-btn.danger{
  background:linear-gradient(180deg,rgba(120,44,36,.5),rgba(58,20,16,.5));
  border-color:rgba(217,96,79,.4);color:#f0b3a6;
}
.big-btn.ghost{background:rgba(20,25,32,.6);}
.big-btn[disabled],.big-btn.disabled{
  opacity:.42;pointer-events:none;filter:grayscale(.6);
}

/* 通用按钮 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:8px 14px;border-radius:8px;cursor:pointer;
  background:rgba(36,46,57,.9);border:1px solid var(--line);color:var(--txt);
  font-size:13px;font-family:var(--sans);
  transition:transform .1s,background .15s;
}
.btn:active{transform:scale(.97);}
.btn.primary{background:linear-gradient(180deg,rgba(143,98,26,.55),rgba(70,48,12,.55));border-color:rgba(217,180,91,.4);color:var(--gold-lit);}
.btn.jade{background:rgba(84,209,163,.14);border-color:rgba(84,209,163,.35);color:var(--jade);}
.btn.cin{background:rgba(217,96,79,.14);border-color:rgba(217,96,79,.35);color:#f0b3a6;}
.btn.sm{padding:5px 10px;font-size:12px;}
.btn.block{width:100%;}
.btn[disabled]{opacity:.4;pointer-events:none;}

/* 选项列表 */
.opt-list{display:flex;flex-direction:column;gap:8px;}
.opt{
  display:flex;align-items:center;gap:10px;
  padding:11px 12px;border-radius:9px;cursor:pointer;
  background:rgba(27,34,43,.75);border:1px solid var(--line-soft);
  transition:background .15s,border-color .15s,transform .1s;
}
.opt:active{transform:scale(.99);background:rgba(36,46,57,.9);}
.opt .oi{flex:0 0 auto;font-size:17px;width:22px;text-align:center;}
.opt .ot{flex:1;min-width:0;}
.opt .on{font-size:14px;color:var(--txt);}
.opt .od{font-size:11px;color:var(--txt-dim);margin-top:2px;line-height:1.5;}
.opt .ov{flex:0 0 auto;font-size:12px;color:var(--jade);text-align:right;}
/* ★ v7.2：兑换分区小标题（丹药房 / 器坊按境界分层，仅视觉分组、不另开页） */
/* ---- 根层目录行（v4.9）----
   五个页签的根层现在只列目录：题图 128px + 每行 ~53px，手机主区只有 496px，
   所以根层这几行比功能行矮一档（内边距 11→8、字号各降 0.5px）。
   ⚠️ 想往根层加行？先跑 tools/shoot.js 的五个页签探针看 `一屏` 还是不是 ✓。 */
.menu-list{gap:6px;}
.menu-list .opt{padding:8px 13px;}
/* 图标槽位 26 → 34px、图标 22 → 28px：
   行加高到 65px 之后，22px 的图标显得又小又「瘦」，衬不住这么厚的行。
   顺手把线宽从 1.6 提到 1.7 —— 放大后线条会相对显细。 */
.menu-list .opt .oi{width:34px;}
.menu-list .opt .oi .ink-ico{width:28px;height:28px;stroke-width:1.7;}
.menu-list .opt .on{font-size:15px;line-height:1.35;}
/* 副标题**强制单行**：行高是被 flex 均分定死的，文字一旦换行就会顶出去。
   窄屏（或以后文案写长了）直接出省略号，别撑破那一格。
   ⚠️ 靠的是 .opt .ot 上的 min-width:0，不然 flex 子项不会收缩、省略号不出现。 */
.menu-list .opt .od{
  font-size:11.5px;margin-top:2px;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---- 状态栏（修炼页根层顶部，v6.3）----
   要「醒目」：左侧一条金色竖线 + 淡金底，跟普通面板一眼区分开。
   ⚠️ 它只在修炼页出现，但**占的是「洞府 5 行」那套一屏预算** ——
      实测 640 / 560 档各会把修炼页顶出去 8~13px，所以这里刻意做薄：
      padding 收到 7px、行距 4px、副标题 10.5px。**往上加高之前先跑 shoot.js。** */
.status-bar{
  border:1px solid rgba(201,162,77,.32);
  border-left:3px solid var(--gold);
  border-radius:6px;
  background:linear-gradient(180deg, rgba(201,162,77,.10), rgba(0,0,0,.22));
  padding:7px 11px; margin-bottom:6px;
  display:flex; flex-direction:column; gap:4px;
}
.status-bar .sb-row{ display:flex; align-items:center; gap:8px; }
.status-bar .sb-ico{ flex:0 0 auto; display:flex; }
.status-bar .sb-ico .ink-ico{ width:17px; height:17px; }
.status-bar .sb-ico.jade{ color:var(--jade); }
.status-bar .sb-ico.az{ color:var(--azure); }
.status-bar .sb-ico.gold{ color:var(--gold-lit); }
.status-bar .sb-ico.cin{ color:#c96a4e; }
.status-bar .sb-txt{ display:flex; flex-direction:column; min-width:0; }
.status-bar .sb-txt b{ font-size:13px; font-weight:600; line-height:1.25; }
.status-bar .sb-txt b.jade{ color:var(--jade); }
.status-bar .sb-txt b.az{ color:var(--azure); }
.status-bar .sb-txt b.gold{ color:var(--gold-lit); }
.status-bar .sb-txt b.cin{ color:#c96a4e; }
/* ⚠️ 强制单行 + 省略号：状态栏按「行数」吃一屏预算，
   副标题一旦换行就会把修炼根层挤爆（打坐那一行现在还会挂上灵脉静室的资费）。 */
.status-bar .sb-sub{
  font-size:10.5px; color:var(--txt-dim); line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* ★ v6.5：状态栏也可以「可点」（目前只有功法页那条研读提示用）——
   加一个右箭头，让它看起来是能进去的。 */
.status-bar.cpbar{ cursor:pointer; }
.status-bar.cpbar:active{ background:rgba(201,162,77,.16); }
.status-bar .sb-go{ margin-left:auto; flex:0 0 auto; color:var(--gold-lit); font-size:16px; line-height:1; }
/* 矮屏再收一档：一屏预算最紧的就是 560 档 */
@media (max-height:560px){
  .status-bar{ padding:6px 10px; gap:3px; margin-bottom:5px; }
  .status-bar .sb-txt b{ font-size:12.5px; }
  .status-bar .sb-sub{ font-size:10px; }
}

/* ============================================================
   根层目录行：铺满主区（v5.8）
   ------------------------------------------------------------
   用户要求：「一级板块可以粗一点、高度调大点，**洞府那 5 行刚好铺到见闻上方**，
   五个板块平均分配；修炼 / 探索这种不紧凑的可以多调一点」。
   做法：根层 `.page.root` 撑满主区、列方向 flex，目录行 `flex:1 1 0` **均分剩余高度**；
   再用 min / max 兜住两端：
     · min-height 52px —— 行少了也不至于被压扁（矮屏另有更小的值）
     · max-height 96px —— **探索只有 1 行**，不给上限它会一路撑到半屏，太怪
   标尺是洞府（5 行）：主区 496 − 题图 128 − 间距 ≈ 每行 65px 上下。
   ⚠️ 非根层页面（.page 不带 .root）不受影响，仍是紧凑的固定行高。
   ============================================================ */
.page.root{ display:flex; flex-direction:column; min-height:100%; }
/* 根层题图下边距从 12px 收到 6px —— 那 6px 正好是「洞府 5 行装不装得下」的差额 */
.page.root > .banner{ margin-bottom:6px; }
.page.root > .menu-list{ flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }
.page.root > .menu-list > .opt{ flex:1 1 0; min-height:52px; max-height:96px; }
/* ★ v6.6：**修炼根层**是唯一「题图 + 状态栏 + 目录」三样都有的页，
   一屏预算最紧。空间**从目录行里省**，别去动状态栏 ——
   用户原话：「状态栏不用改成一行，把修炼里的其他三个菜单改细就行了」。
   所以：除「研读」外的其他几行压细一档（内边距 8→5、行高 46→42），
   研读那一行保持原高（它是最新加进来的，让玩家一眼看到）。
   ⚠️ 只压这一种页（.has-status 只会出现在修炼根层），
      别碰洞府那 5 行 —— 它是「铺满主区」的标尺。 */
.page.root.has-status > .menu-list{ gap:4px; }
/* 「其他三个菜单」压细一档 —— 挂机 / 突破 / 功法（系统）都走这条 */
.page.root.has-status > .menu-list > .opt{ min-height:40px; padding:5px 13px; }
/* 「研读」保持原样：它是最新加进来的那一行，别跟着一起缩 */
.page.root.has-status > .menu-list > .opt[data-menu="study"]{ min-height:46px; padding:8px 13px; }
/* 修炼根层：题图 + 状态栏 + 目录三样齐上，题图也压矮一档才装得下。
   只压这一种页，别压洞府（它的题图是主区高度的标尺）。 */
.page.root.has-status > .banner img{ height:94px; }
/* 极矮屏（≤560px）：目录行再压一档。洞府根层有 5 行，
   不压这一下，560px 高的屏要多滚 34px。 */
@media (max-height:560px){
  .menu-list{gap:5px;}
  .menu-list .opt{padding:6px 12px;}
  .menu-list .opt .on{font-size:12.5px;}
  .menu-list .opt .od{font-size:10px;line-height:1.3;}
  /* 矮屏：主区只有 ~356px，洞府 5 行 + 题图 72px 要塞得下，
     所以把均分的上下限一起压一档（5×48 + 4×5 + 72 + 页面内边距 ≈ 350）。 */
  .page.root > .menu-list > .opt{ min-height:48px; max-height:72px; }
  /* 修炼根层在矮屏：状态栏仍是两行，空间再从「除研读外的目录行」里抠 */
  .page.root.has-status > .menu-list{ gap:4px; }
  .page.root.has-status > .menu-list > .opt{
    min-height:34px; max-height:52px; padding:4px 12px;
  }
  .page.root.has-status > .menu-list > .opt[data-menu="study"]{
    min-height:42px; max-height:60px; padding:6px 12px;
  }
}
.opt.locked{opacity:.45;pointer-events:none;}
.opt.gold{border-color:rgba(217,180,91,.32);}
.opt.cin{border-color:rgba(217,96,79,.3);}

/* 属性网格 */
.attr-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;}
/* 目的地选择（世界页：城镇永远排在秘境上面） */
.chip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.chip{
  padding:7px 5px;border-radius:8px;text-align:center;cursor:pointer;
  background:rgba(0,0,0,.28);border:1px solid var(--line-soft);
  font-size:12px;color:var(--txt);line-height:1.35;
  font-family:var(--serif);
}
.chip .ch-sub{display:block;font-size:10px;color:var(--txt-faint);margin-top:2px;font-family:var(--sans);}
.chip.locked{opacity:.42;cursor:default;}
.chip.cur{border-color:var(--gold);color:var(--gold-lit);background:rgba(217,180,91,.14);}
.chip.cur .ch-sub{color:var(--gold-lit);}
/* ★ v7.7：宗门任务公告牌的境界页签（横滑一行，超出可左右推） */
.realm-bar{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;}
.realm-bar .chip{flex:0 0 auto;}
/* ★ v7.51：分组小标题全游戏只留一种写法。
   以前「贡献兑换」是金线竖条 + 宋体，「探索」的秘境分组却是灰色小字 + 虚线下划线，
   同一件事两种长相。现在统一取竖条版（更像卷里的分卷题）。 */
.sect-hd,
.exch-head{
  font-family:var(--serif); font-size:12.5px; color:var(--gold-lit);
  letter-spacing:.14em; margin:12px 0 6px;
  padding:2px 0 2px 9px; border-left:2px solid rgba(201,162,77,.45);
}
.sect-hd:first-child,
.exch-head:first-child{ margin-top:0; }
.attr{
  display:flex;justify-content:space-between;align-items:baseline;gap:6px;
  padding:7px 10px;border-radius:7px;background:rgba(0,0,0,.28);
  border:1px solid var(--line-soft);font-size:13px;
}
.attr .k{color:var(--txt-dim);font-size:12px;}
.attr .v{color:var(--txt);font-weight:600;font-family:var(--serif);}
.attr .v.jade{color:var(--jade);}
.attr .v.gold{color:var(--gold-lit);}
.attr .v.cin{color:var(--cinnabar);}
.attr .v.az{color:var(--azure);}

/* 物品格子 */
.grid-bag{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;}
.slot{
  position:relative;aspect-ratio:1/1;border-radius:8px;cursor:pointer;
  background:rgba(0,0,0,.3);border:1px solid var(--line-soft);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:4px;text-align:center;
  transition:border-color .15s,transform .1s;
}
.slot:active{transform:scale(.96);}
.slot .si{font-size:20px;line-height:1;}
.slot .sn{
  font-size:10.5px;color:var(--txt-dim);line-height:1.25;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.slot .sc{
  position:absolute;right:3px;bottom:2px;font-size:10.5px;color:var(--gold-lit);
  font-weight:700;text-shadow:0 1px 3px #000;
}
.slot .eq{
  position:absolute;left:3px;top:3px;font-size:9px;color:var(--jade);
  background:rgba(84,209,163,.18);border-radius:3px;padding:0 3px;
}
.slot.r-herb{border-color:rgba(84,209,163,.28);}
.slot.r-pill{border-color:rgba(217,180,91,.3);}
.slot.r-mat{border-color:rgba(154,162,173,.24);}
.slot.r-art{border-color:rgba(169,139,214,.34);}
.slot.r-misc{border-color:rgba(95,168,211,.24);}
.slot.empty{opacity:.22;pointer-events:none;}

/* 列表行 */
.rows{display:flex;flex-direction:column;gap:6px;}
.row{
  display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:8px;
  background:rgba(0,0,0,.24);border:1px solid var(--line-soft);font-size:13px;
}
.row .rn{flex:1;min-width:0;}
.row .rv{color:var(--gold-lit);font-family:var(--serif);flex:0 0 auto;}
.row .rd{font-size:11.5px;color:var(--txt-dim);}

/* 进度条 */
.pbar{position:relative;height:9px;border-radius:6px;background:rgba(0,0,0,.5);overflow:hidden;border:1px solid var(--line-soft);}
.pbar>i{position:absolute;inset:0;border-radius:6px;background:linear-gradient(90deg,#8a6a1e,#f0d68a);width:0;}

/* F3 · 秘境层级刻度 */
.depth-track{display:flex;gap:6px;margin-top:10px;}
.depth-cell{
  flex:1;height:24px;border-radius:6px;
  background:rgba(0,0,0,.3);border:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:12px;color:var(--txt-faint);
  transition:background .2s,border-color .2s,color .2s;
}
.depth-cell.done{background:rgba(217,180,91,.10);border-color:rgba(217,180,91,.25);color:rgba(217,180,91,.62);}
.depth-cell.cur{background:rgba(217,180,91,.20);border-color:var(--gold);color:var(--gold-lit);font-weight:600;}
/* 矮屏：层数刻度压一档 —— 秘境详情页要在这一屏里塞下「地图 + 三行目录」 */
@media (max-height:560px){
  .depth-track{margin-top:6px;}
  .depth-cell{height:20px;font-size:11px;}
}

/* ==================== 日志 ==================== */
.logbox{
  flex:0 0 auto;                   /* 不参与压缩，也不抢空间 */
  height:auto;                     /* 收起时 = 只有标题那一行 */
  display:flex;flex-direction:column;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(17,21,27,.9),rgba(10,13,17,.95));
}
/* 收起：一点内容都不显示，只留「见闻 ▴」那一行 */
.logbox .log-list{ display:none; }
/* 展开：铺满整个画面（看完点标题或「收起」退回那一行）
   z-index 150 —— 在 app(1) 与启动层(100) 之上、弹窗(200) 之下。 */
.logbox.open{
  position:fixed;left:0;right:0;top:0;bottom:0;
  height:auto;max-height:none;z-index:150;
  border-top:none;
  background:linear-gradient(180deg,#12171e,#080b0f);
  animation:logUp .18s ease;
}
.logbox.open .log-list{
  display:block;flex:1;overflow-y:auto;
  padding:12px 16px calc(14px + env(safe-area-inset-bottom));
  font-size:14px;line-height:1.85;
}
.logbox.open .log-list p{margin:0 0 6px;}
@keyframes logUp{ from{opacity:.4;transform:translateY(14px);} to{opacity:1;transform:none;} }
.logbox.open .log-head{
  padding-top:calc(9px + env(safe-area-inset-top));
  padding-bottom:9px;
  background:rgba(10,13,17,.9);
}

/* 矮视口只压 HUD，别再动见闻（它已经只有一行了） */
@media (max-height:600px){ .hud{padding:8px 12px 7px;} }
@media (max-height:500px){ .hud-res{display:none;} }
@media (max-height:420px){ .hud-bars{display:none;} }

/* ============================================================
   ★ v6.3 见闻的「半屏」态
   ------------------------------------------------------------
   用户原话：「每次见闻发生变动，见闻就主动弹出来显示一下，到半屏；
   主动点开见闻才是全屏 —— 有些玩家不知道见闻，不知道自己研读了丹方或者和人对话了」。
   半屏只占下半部分，不挡住上面的操作区；点它自己进全屏，点别处收起。
   ★ v6.14（用户定）：手机上半屏「太挡了」→ **高度由 1/2 屏降到 1/3 屏**。
   ============================================================ */
.logbox.half{
  position:fixed;left:0;right:0;bottom:0;
  height:calc(100vh / 3); max-height:calc(100vh / 3); z-index:150;
  /* ★ v7.47：手机地址栏收放时 100vh 会算多，补一层 dvh */
  height:calc(100dvh / 3); max-height:calc(100dvh / 3);
  border-top:1px solid rgba(201,162,77,.42);
  background:linear-gradient(180deg,#12171e,#080b0f);
  box-shadow:0 -8px 26px rgba(0,0,0,.6);
  animation:logUp .18s ease;
}
.logbox.half .log-list{
  display:block;flex:1;overflow-y:auto;
  padding:10px 14px calc(12px + env(safe-area-inset-bottom));
  font-size:13.5px;line-height:1.8;
}
.logbox.half .log-list p{margin:0 0 5px;}
/* 半屏也把箭头转过来（提示文案常驻，见下方 .log-act 规则） */
.logbox.half .log-arrow{transform:rotate(180deg);}
.log-head{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:7px 12px;font-size:11.5px;color:var(--txt-faint);letter-spacing:.18em;
  border-bottom:1px solid var(--line-soft);
  cursor:pointer;user-select:none;-webkit-user-select:none;
}
.log-title{display:inline-flex;align-items:center;gap:5px;}
.log-arrow{
  font-style:normal;font-size:10px;opacity:.7;
  transition:transform .18s ease;display:inline-block;
}
.logbox.open .log-arrow{transform:rotate(180deg);}
/* ★ v7.1（用户定）：「点击展开 / 点击收起」常驻在最右边、加粗 ——
   三种状态下都显示（收起 = 点击展开；半屏 / 全屏 = 点击收起），不显眼就没人知道能点。 */
.logbox .log-act{
  font-size:11px;letter-spacing:.06em;color:var(--gold-lit);
  font-weight:700;white-space:nowrap;
}
.log-list{
  flex:1;overflow-y:auto;padding:7px 12px;font-size:12.5px;line-height:1.72;
  font-family:var(--kai);
}
.log-list p{margin:0 0 3px;}
.lg-info{color:#b9b3a6;}
.lg-good{color:var(--jade);}
.lg-warn{color:var(--gold-lit);}
.lg-bad{color:#e28b7b;}
.lg-sys{color:var(--azure);}
.log-list p::before{content:"· ";opacity:.4;}

/* 顶栏右上角的北京时间小钟 */
.hud-clock{
  font-size:11px;color:var(--txt-faint);letter-spacing:.06em;
  padding:2px 6px;border-radius:5px;background:rgba(255,255,255,.05);
  font-variant-numeric:tabular-nums;
}

/* ==================== 分层导航（上级 / 下级） ==================== */
/* 下层的顶部导航条：整条单独成一块，和下面的内容明确分开。
   左边「‹ 返回」，右边面包屑 —— 上级压暗、当前一级加粗描金。 */
.layer-bar{
  display:flex;align-items:center;gap:10px;
  margin:0 0 11px;padding:8px 10px;
  background:linear-gradient(90deg,rgba(217,180,91,.10),rgba(217,180,91,.02));
  border:1px solid rgba(217,180,91,.22);
  border-radius:var(--r);
}
.layer-back{
  flex:0 0 auto;
  background:rgba(217,180,91,.14);border:1px solid rgba(217,180,91,.38);
  color:var(--gold-lit);font-family:var(--sans);font-size:12.5px;letter-spacing:.06em;
  padding:5px 12px;border-radius:7px;cursor:pointer;
}
.layer-back:active{background:rgba(217,180,91,.26);}
.layer-crumb{
  min-width:0;font-size:12px;letter-spacing:.04em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lc-up{color:var(--txt-faint);}
.lc-sep{margin:0 5px;font-style:normal;color:rgba(217,180,91,.45);}
.lc-cur{color:var(--gold-lit);font-weight:600;}

/* 根层的头：和下层的导航条呼应，明确「这是第一层」 */
.root-head{
  display:flex;align-items:baseline;gap:8px;
  margin:0 0 10px;padding:0 2px;
}
.root-head .rh-name{
  font-family:var(--serif);font-size:14px;color:var(--gold-lit);letter-spacing:.14em;
}
.root-head .rh-tip{font-size:11px;color:var(--txt-faint);}

/* ==================== 底部导航 ==================== */
.tabbar{
  flex:0 0 auto;display:grid;grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(27,34,43,.98),rgba(13,16,20,.98));
  padding-bottom:env(safe-area-inset-bottom);
}
.tab{
  background:transparent;border:none;cursor:pointer;padding:8px 2px 7px;
  display:flex;flex-direction:column;align-items:center;gap:1px;
  color:var(--txt-faint);transition:color .15s;
}
.tab i{font-style:normal;font-size:17px;line-height:1.1;}
.tab span{font-size:10.5px;letter-spacing:.08em;}
.tab.active{color:var(--gold-lit);}
.tab.active i{filter:drop-shadow(0 0 7px rgba(217,180,91,.55));}

/* ==================== 弹窗 ==================== */
/* 层级（全站统一刻度，别再各写各的）：
   app 1 < 启动界面 100 < 弹窗 200 < 提示条 300
   ⚠️ 弹窗必须高于启动界面 —— 曾经 .modal 是 60、.boot-screen 是 100，
   于是标题界面上点「玩法说明」弹窗被盖住，看起来像「点了没反应」。 */
.modal{
  position:fixed;inset:0;z-index:200;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(0,0,0,.72);animation:fade .16s ease;
}
/* ★ v7.47：只做手游 —— 任何设备都用底部抽屉，不再切成桌面居中弹窗。 */
@keyframes fade{from{opacity:0;}to{opacity:1;}}
.modal-box{
  width:100%;max-width:500px;max-height:86vh;overflow:hidden;
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,#1b222b,#0f1319);
  border:1px solid var(--line);border-radius:var(--r) var(--r) 0 0;
  box-shadow:0 -8px 40px rgba(0,0,0,.7);
  animation:slideUp .22s cubic-bezier(.2,.9,.3,1);
}
@keyframes slideUp{from{transform:translateY(30px);}to{transform:none;}}
.modal-head{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:12px 15px;border-bottom:1px solid var(--line-soft);
}
.modal-head h3{
  margin:0;flex:1;font-family:var(--serif);font-size:15px;
  color:var(--gold-lit);letter-spacing:.1em;
}
.modal-close{
  background:transparent;border:1px solid var(--line);color:var(--txt-dim);
  border-radius:6px;width:26px;height:26px;cursor:pointer;font-size:13px;line-height:1;padding:0;
}
.modal-body{flex:1;overflow-y:auto;padding:14px 15px;font-size:13.5px;}
.modal-foot{
  flex:0 0 auto;display:flex;gap:8px;padding:11px 15px;
  border-top:1px solid var(--line-soft);
}
.modal-foot .btn{flex:1;}
.modal-foot:empty{display:none;}

/* 弹窗内文段 */
.blk{margin-bottom:11px;}
.blk:last-child{margin-bottom:0;}
.kv{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-bottom:1px dashed var(--line-soft);font-size:13px;}
.kv:last-child{border-bottom:none;}
.kv .k{color:var(--txt-dim);}
.kv .v{color:var(--txt);}
.divider{height:1px;background:var(--line-soft);margin:11px 0;}

/* ---- 闭关手札（B3 离线结算故事化） ---- */
.diary-line{
  display:flex;gap:9px;align-items:flex-start;
  padding:8px 10px;margin-bottom:6px;border-radius:8px;
  background:rgba(217,180,91,.05);
  border-left:2px solid rgba(217,180,91,.35);
  font-family:var(--kai);font-size:13.5px;line-height:1.78;color:#d8d2c4;
}
.diary-no{
  flex:0 0 auto;font-style:normal;font-family:var(--serif);
  width:18px;height:18px;line-height:18px;text-align:center;
  font-size:11px;border-radius:50%;margin-top:2px;
  background:rgba(217,180,91,.16);color:var(--gold);
}

/* ==================== 飘字 ==================== */
.toast-layer{position:fixed;left:0;right:0;top:96px;z-index:300;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:5px;}
.toast{
  padding:6px 15px;border-radius:16px;font-size:13px;
  background:rgba(15,19,25,.94);border:1px solid var(--line);
  color:var(--txt);box-shadow:var(--shadow);
  animation:toastIn .2s ease, toastOut .3s ease 1.5s forwards;
}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px) scale(.95);}to{opacity:1;transform:none;}}
@keyframes toastOut{to{opacity:0;transform:translateY(-10px);}}
.toast.good{border-color:rgba(84,209,163,.45);color:var(--jade);}
.toast.gold{border-color:rgba(217,180,91,.45);color:var(--gold-lit);}
.toast.bad{border-color:rgba(217,96,79,.45);color:#e28b7b;}

/* 挂机收益不另做浮动提示 ——
   顶部 HUD 的「修为速率 X / 息」已经常驻显示，中间再飘一条只会干扰阅读。 */

/* ==================== 战斗界面 ==================== */
.fight-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px;}
.fighter{flex:1;min-width:0;text-align:center;}
.fighter .fn{font-family:var(--serif);font-size:14px;margin-bottom:4px;}
.fighter .fn.me{color:var(--jade);}
.fighter .fn.foe{color:var(--cinnabar);}
.vs{flex:0 0 auto;color:var(--txt-faint);font-size:16px;}
.fight-log{
  height:150px;overflow-y:auto;padding:9px 11px;border-radius:8px;
  background:rgba(0,0,0,.42);border:1px solid var(--line-soft);
  font-family:var(--kai);font-size:13.5px;line-height:1.8;
}
.fight-log p{margin:0 0 2px;}

/* 创造角色 */
.field{margin-bottom:13px;}
.field label{display:block;font-size:12.5px;color:var(--txt-dim);margin-bottom:6px;letter-spacing:.08em;}
.field input[type=text]{
  width:100%;padding:10px 12px;border-radius:8px;font-size:15px;
  background:rgba(0,0,0,.45);border:1px solid var(--line);color:var(--txt);
  font-family:var(--serif);outline:none;
}
.field input[type=text]:focus{border-color:rgba(217,180,91,.5);}
.pick{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.pick-card{
  padding:10px 11px;border-radius:9px;cursor:pointer;
  background:rgba(0,0,0,.3);border:1px solid var(--line-soft);
  transition:border-color .15s,background .15s,transform .1s;
}
.pick-card:active{transform:scale(.98);}
.pick-card.sel{border-color:rgba(217,180,91,.6);background:rgba(143,98,26,.2);}
.pick-card .pc-n{font-family:var(--serif);font-size:14px;color:var(--txt);}
.pick-card .pc-d{font-size:11px;color:var(--txt-dim);margin-top:3px;line-height:1.45;}
.pick-card .pc-b{
  font-size:11px;color:var(--gold-lit);margin-top:5px;padding-top:5px;
  border-top:1px dashed var(--line-soft);line-height:1.55;
}

/* 滚动条 */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(217,180,91,.22);border-radius:3px;}

/* 小工具类 */
.flex{display:flex;gap:8px;align-items:center;}
.flex-between{display:flex;gap:8px;align-items:center;justify-content:space-between;}
.mt6{margin-top:6px;} .mt10{margin-top:10px;} .mb0{margin-bottom:0;}
.cen{text-align:center;}
.dim{color:var(--txt-dim);}
.faint{color:var(--txt-faint);font-size:11.5px;}
.jade{color:var(--jade);} .gold{color:var(--gold-lit);} .cin{color:var(--cinnabar);} .az{color:var(--azure);}
.small{font-size:12px;}

/* ==================== 只做手游（v7.47） ====================
   用户定：不管什么设备都只加载手机界面，不再为桌面端做右侧见闻栏 / 宽屏网格。
   `.app` 始终是 520px 手机壳；见闻始终走「收起 / 半屏 / 全屏」三态。
   ⚠️ 以后不要再加 min-width:900px 的桌面布局分支。 */

/* ==================== 屏幕自适应 ==================== */

/* ---- 1. 安全区：刘海 / 灵动岛 / 横屏缺口 / 底部横条 ----
   只在 viewport-fit=cover 的真机上生效；桌面端 env() 取 0，等于没加。 */
.hud{
  padding-top:calc(10px + env(safe-area-inset-top));
}
.page-wrap{
  padding-left:calc(12px + env(safe-area-inset-left));
  padding-right:calc(12px + env(safe-area-inset-right));
}
.boot-inner{
  padding-top:calc(34px + env(safe-area-inset-top));
  padding-left:calc(22px + env(safe-area-inset-left));
  padding-right:calc(22px + env(safe-area-inset-right));
  padding-bottom:calc(26px + env(safe-area-inset-bottom));
}
.modal-box{
  padding-bottom:env(safe-area-inset-bottom);
}
.toast-layer{
  top:calc(96px + env(safe-area-inset-top));
}

/* ---- 2. 平板 / 超宽屏：不另开桌面档 —— 统一 520px 手机壳 ---- */

/* ---- 4. 横屏矮屏：日志与修为条让位，保住主区与底部导航 ---- */
@media (max-height:430px){
  .hud-row1{margin-bottom:4px;}
  .page-wrap{padding-top:8px;padding-bottom:4px;}
}
@media (max-height:380px){
  .boot-inner{padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:calc(14px + env(safe-area-inset-bottom));}
  .boot-seal{width:48px;height:48px;font:600 26px/48px var(--kai);margin-bottom:10px;}
  .boot-title{font-size:30px;margin-bottom:2px;}
  .boot-sub{margin-bottom:14px;}
}

/* ---- 5. 超窄屏（<340px）：收紧内边距，免得挤到换行 ---- */
@media (max-width:340px){
  .page-wrap{padding-left:calc(8px + env(safe-area-inset-left));padding-right:calc(8px + env(safe-area-inset-right));}
  .panel{padding:10px 10px;margin-bottom:9px;}
  .tab{font-size:10px;}
  .hud{padding-left:calc(9px + env(safe-area-inset-left));padding-right:calc(9px + env(safe-area-inset-right));}
}

/* ============================================================
   v3.0 · 水墨风重制
   ------------------------------------------------------------
   ① 主背景铺水墨山水（压暗后仍保持深色墨底，保证文字可读）
   ② 每个页签的根层加「题图」：水墨插画 + 竖排题字 + 朱砂印
   ③ 战斗改为「小人立绘」舞台：水墨背景 + 双方小人 + 功法特效
   ============================================================ */

/* ---- ① 主背景 ----
   ⚠️ 这一条**已被下面的 v3.2 覆盖**（见「回归《放置江湖》的真实配色」段的 body::before，
      两条都是 !important、同特异性，后者胜）。原先这里叠了 assets/bg 里那张水墨山水图，
      等于把一张 187KB 的图打进了单文件却从不显示 —— 已去掉，只留一层压暗渐变
      （万一上面那条规则被删，也不至于背景全白）。
   水墨山水图仍在 assets/bg/ 里，想换回来就在这条里把 background-image 的第二层加回去。 */
body::before{
  background:
    linear-gradient(180deg, rgba(8,10,12,.84) 0%, rgba(8,10,12,.90) 45%, rgba(6,8,10,.95) 100%) !important;
}
/* 侧边的竖向墨痕，强化「卷轴」感 */
body::after{
  content:"";position:fixed;top:0;bottom:0;left:0;width:14px;pointer-events:none;z-index:0;
  background:linear-gradient(90deg, rgba(0,0,0,.55), transparent);
}

/* ---- ② 根层题图 ---- */
.banner{
  position:relative;border-radius:12px;overflow:hidden;
  margin-bottom:12px;
  border:1px solid rgba(217,180,91,.20);
  box-shadow:0 10px 28px rgba(0,0,0,.5);
}
.banner img{
  display:block;width:100%;height:126px;object-fit:cover;
  filter:grayscale(.12) contrast(1.06) brightness(.9);
}
.banner::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(8,10,12,.30) 0%, rgba(8,10,12,.06) 42%, rgba(8,10,12,.90) 100%);
}
.banner .bd-txt{position:absolute;left:14px;bottom:11px;z-index:2;}
.banner .bd-name{
  font-family:var(--serif);font-size:21px;letter-spacing:.3em;text-indent:.3em;
  color:#f6e8c6;
  text-shadow:0 2px 14px rgba(0,0,0,.95), 0 0 24px rgba(217,180,91,.22);
}
.banner .bd-sub{
  margin-top:2px;font-family:var(--kai);font-size:11.5px;letter-spacing:.16em;
  color:rgba(232,227,214,.70);text-shadow:0 1px 8px rgba(0,0,0,.95);
}
.banner .bd-seal{
  position:absolute;right:12px;bottom:11px;z-index:2;
  width:26px;height:26px;border-radius:5px;text-align:center;
  background:linear-gradient(160deg,#8f2f24,#5d1d16);
  color:#f5e6c8;font:600 14px/26px var(--kai);
  box-shadow:0 0 0 1px rgba(217,180,91,.35), 0 4px 14px rgba(143,47,36,.45);
}
/* 题图只在「根层目录」上出现，所以它的高度直接吃掉目录的空间 ——
   矮屏（≤560px）压到 72px：洞府根层有 5 行目录，不压这一下要多滚 24px。 */
@media (max-height:560px){
  .banner img{height:72px;}
  /* 修炼根层（5 行 + 状态栏）在矮屏再把题图压到 52px */
  .page.root.has-status > .banner img{ height:52px; }
}

/* ---- ③ 战斗舞台：小人立绘 ---- */
.stage{
  position:relative;height:210px;border-radius:12px;overflow:hidden;
  border:1px solid rgba(217,180,91,.18);
  box-shadow:inset 0 0 40px rgba(0,0,0,.6), 0 8px 26px rgba(0,0,0,.5);
  margin-bottom:11px;
}
.stage .st-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.2) contrast(1.05) brightness(.62);
}
.stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% 45%, transparent 30%, rgba(6,8,10,.72) 100%);
}
/* 双方站位 */
.stage .st-side{
  position:absolute;bottom:6px;z-index:3;
  width:118px;height:170px;
}
.stage .st-mine{left:6%;}
.stage .st-foes{right:6%;}
.stage .st-side svg{width:100%;height:100%;display:block;overflow:visible;}
.stage .st-foes{transform:scaleX(-1);}
/* 出招：向前突刺 + 回位 */
@keyframes lunge-me{0%{transform:translateX(0);}38%{transform:translateX(34px);}100%{transform:translateX(0);}}
@keyframes lunge-foe{0%{transform:scaleX(-1) translateX(0);}38%{transform:scaleX(-1) translateX(34px);}100%{transform:scaleX(-1) translateX(0);}}
.stage.act-me .st-mine{animation:lunge-me .42s cubic-bezier(.3,.9,.4,1);}
.stage.act-foe .st-foes{animation:lunge-foe .42s cubic-bezier(.3,.9,.4,1);}
/* 受击：抖动 + 泛红 */
@keyframes hurtShake{
  0%{transform:translateX(0);} 18%{transform:translateX(-7px);}
  38%{transform:translateX(6px);} 58%{transform:translateX(-4px);} 100%{transform:translateX(0);}
}
@keyframes hurtShakeFoe{
  0%{transform:scaleX(-1) translateX(0);} 18%{transform:scaleX(-1) translateX(-7px);}
  38%{transform:scaleX(-1) translateX(6px);} 58%{transform:scaleX(-1) translateX(-4px);} 100%{transform:scaleX(-1) translateX(0);}
}
.stage.hurt-me .st-mine{animation:hurtShake .38s;}
.stage.hurt-foe .st-foes{animation:hurtShakeFoe .38s;}
.stage.hurt-me::before,
.stage.hurt-foe::before{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  animation:flashRed .38s ease-out;
}
@keyframes flashRed{from{background:rgba(200,60,40,.30);}to{background:transparent;}}
/* 特效层 */
.stage .fx{
  position:absolute;z-index:5;pointer-events:none;
  width:150px;height:150px;overflow:visible;
}
.stage .fx-mine{left:20%;top:34%;}
.stage .fx-foes{right:16%;top:32%;}
@keyframes fxPop{
  0%{opacity:0;transform:scale(.35);}
  22%{opacity:1;transform:scale(1.16);}
  70%{opacity:.95;transform:scale(1);}
  100%{opacity:0;transform:scale(1.34);}
}
.stage .fx.go{animation:fxPop .62s ease-out forwards;}

/* 战斗页的小血条（放在舞台下沿用现有的 .bar） */
.stage-bars{margin-bottom:9px;}

/* ---- 功法选择：横向卷轴感 ---- */
.spell-bar{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;}
.spell-btn{
  flex:0 0 auto;padding:7px 12px;border-radius:8px;cursor:pointer;
  background:linear-gradient(180deg,rgba(36,46,57,.92),rgba(20,25,32,.92));
  border:1px solid var(--line);color:var(--txt);
  font-family:var(--serif);font-size:13px;letter-spacing:.06em;
}
.spell-btn:active{transform:scale(.97);}
.spell-btn.on{border-color:rgba(217,180,91,.6);color:var(--gold-lit);background:rgba(143,98,26,.3);}
.spell-btn .sp-mp{display:block;font-size:10px;color:var(--txt-faint);font-family:var(--sans);margin-top:1px;}

/* ============================================================
   水墨图标（js/icons.js）
   ------------------------------------------------------------
   图标一律 currentColor 上色 —— 所以同一枚图标在金色面板里是金、
   在朱砂面板里是朱砂，不需要为每种颜色各画一套。
   ⚠️ 原来那条「.oi/.ico/.tab i 走 emoji 字体族」的规则已作废，
      现在这些容器里装的是 SVG。别再往里面塞 emoji。
   ============================================================ */
.ink-ico{display:block;flex:0 0 auto;}
.oi,.si,.ico,.tab i,.opt .oi{display:flex;align-items:center;justify-content:center;}
.opt .oi,.si{width:24px;}
.slot .si .ink-ico{width:24px;height:24px;}
.tab i .ink-ico{width:21px;height:21px;}
.big-btn .ico .ink-ico{width:26px;height:26px;}
.opt .oi .ink-ico,.si .ink-ico{width:20px;height:20px;}

/* ============================================================
   v3.1 · 对齐《放置江湖》的视觉语言
   ------------------------------------------------------------
   参照物是它 APK 里的 BaseUI 素材（已抠出，见 放置江湖逆向取证/ui/fit）：
     · 按钮一律「金铜色粗边框 + 深色底」，形状分 方 / 圆 / 菱形
     · 面板是「深底 + 金边 + 四角回纹」
     · 选中态是「金色发光」
   我原来的问题：1px 灰边 + 10px 大圆角，太像通用 App，没有器物感。
   ============================================================ */
:root{
  /* 金铜系（取自 BaseUI 的按钮描边色） */
  --brass:      #b8934e;
  --brass-lit:  #e6c67f;
  --brass-dim:  rgba(184,147,78,.42);
  --panel-1:    #1f1b17;
  --panel-2:    #12100e;
}

/* ---------- 面板：深底 + 金边 + 四角回纹 ---------- */
.panel{
  --cb: rgba(230,198,127,.72);
  position:relative;
  border:1px solid var(--brass-dim);
  border-radius:4px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,235,190,.05), 0 5px 20px rgba(0,0,0,.5);
  background-image:
    linear-gradient(180deg, rgba(31,27,23,.94), rgba(15,13,11,.96)),
    linear-gradient(var(--cb),var(--cb)), linear-gradient(var(--cb),var(--cb)),
    linear-gradient(var(--cb),var(--cb)), linear-gradient(var(--cb),var(--cb)),
    linear-gradient(var(--cb),var(--cb)), linear-gradient(var(--cb),var(--cb)),
    linear-gradient(var(--cb),var(--cb)), linear-gradient(var(--cb),var(--cb));
  background-repeat:no-repeat;
  background-size:100% 100%,
    12px 1.6px, 1.6px 12px,  12px 1.6px, 1.6px 12px,
    12px 1.6px, 1.6px 12px,  12px 1.6px, 1.6px 12px;
  background-position:
    0 0,
    left 4px top 4px,    left 4px top 4px,
    right 4px top 4px,   right 4px top 4px,
    left 4px bottom 4px, left 4px bottom 4px,
    right 4px bottom 4px,right 4px bottom 4px;
}
.panel-title{ color:var(--brass-lit); letter-spacing:.16em; }
.panel-title::before{
  background:linear-gradient(180deg,var(--brass-lit),var(--brass));
  box-shadow:0 0 8px rgba(230,198,127,.35);
}

/* ---------- 选项行：金铜描边 + 选中发光 ---------- */
.opt{
  border:1px solid rgba(184,147,78,.34);
  border-radius:4px;
  background:linear-gradient(180deg, rgba(38,33,27,.92), rgba(20,17,14,.94));
  box-shadow:inset 0 1px 0 rgba(255,235,190,.05);
}
.opt:active{
  background:linear-gradient(180deg, rgba(52,44,34,.95), rgba(28,24,19,.96));
  border-color:rgba(230,198,127,.6);
}
.opt.gold{ border-color:rgba(230,198,127,.55); }
.opt .oi{ color:var(--brass-lit); }
.opt .ov{ color:var(--brass-lit); letter-spacing:.06em; }
.opt .on{ font-family:var(--serif); letter-spacing:.06em; }

/* ---------- 大按钮：主按钮 = 金铜实边（对应它的 btn-brown） ---------- */
.big-btn{
  border:1px solid rgba(184,147,78,.5);
  border-radius:4px;
  background:linear-gradient(180deg, rgba(44,37,29,.96), rgba(22,18,14,.96));
  box-shadow:inset 0 1px 0 rgba(255,235,190,.06);
}
.big-btn:active{ border-color:rgba(230,198,127,.75); }
.big-btn.primary{
  border-color:rgba(230,198,127,.8);
  background:linear-gradient(180deg, rgba(96,72,26,.92), rgba(48,36,12,.94));
  color:#f7ead0;
  box-shadow:inset 0 1px 0 rgba(255,235,190,.12), 0 0 16px rgba(230,198,127,.12);
}
.big-btn .ico{ color:var(--brass-lit); opacity:.42; }
.big-btn.danger{ border-color:rgba(200,90,70,.5); }

/* ---------- 小按钮 / 芯片 ---------- */
.btn{
  border:1px solid rgba(184,147,78,.4); border-radius:4px;
  background:linear-gradient(180deg, rgba(40,34,28,.94), rgba(22,18,15,.94));
}
.btn.primary{
  border-color:rgba(230,198,127,.7);
  background:linear-gradient(180deg, rgba(96,72,26,.9), rgba(48,36,12,.92));
  color:#f7ead0;
}
.chip{ border-radius:4px; border-color:rgba(184,147,78,.34); }
.chip.cur{
  border-color:var(--brass-lit); color:#f7ead0;
  background:rgba(184,147,78,.18);
  box-shadow:0 0 12px rgba(230,198,127,.25);
}

/* ---------- 页签：选中金铜发光 ---------- */
.tabbar{
  background:linear-gradient(180deg, rgba(28,24,20,.98), rgba(12,10,9,.99));
  border-top:1px solid rgba(184,147,78,.3);
}
.tab{ color:rgba(184,147,78,.55); }
.tab.active{ color:var(--brass-lit); }
.tab.active i svg{ filter:drop-shadow(0 0 7px rgba(230,198,127,.6)); }
.tab.active span{ letter-spacing:.12em; }

/* ---------- 顶栏 ---------- */
.hud{
  background:linear-gradient(180deg, rgba(30,26,21,.97), rgba(16,14,12,.97));
  border-bottom:1px solid rgba(184,147,78,.28);
}
.hud-name>span:first-child{ color:var(--brass-lit); }
.tag{ background:rgba(184,147,78,.14); color:var(--brass-lit); border-color:rgba(184,147,78,.4); }
.hud-realm{ background:rgba(84,209,163,.08); }

/* ---------- 分层导航条：做成「卷轴眉」 ---------- */
.layer-bar{
  background:linear-gradient(90deg, rgba(184,147,78,.14), rgba(184,147,78,.03));
  border:1px solid rgba(184,147,78,.36); border-radius:4px;
}
.layer-back{
  border:1px solid rgba(230,198,127,.5); border-radius:4px;
  background:rgba(184,147,78,.16); color:var(--brass-lit);
}
.layer-crumb .lc-cur{ color:var(--brass-lit); }

/* ---------- 弹窗 ---------- */
.modal-box{
  background:linear-gradient(180deg, #221d18, #100e0c);
  border:1px solid rgba(184,147,78,.45);
}
.modal-head{ border-bottom:1px solid rgba(184,147,78,.24); }
.modal-head h3{ color:var(--brass-lit); }
.modal-close{ border-color:rgba(184,147,78,.4); color:var(--brass-lit); }

/* ---------- 题图：加一圈金边 ---------- */
.banner{ border:1px solid rgba(184,147,78,.45); border-radius:4px; }
.banner .bd-seal{ border-radius:3px; }

/* ---------- 战斗舞台：给剪影留出立起来的空间 ---------- */
.stage{ height:238px; }
.stage .st-side{ width:112px; height:159px; bottom:10px; }   /* 112:159 ≈ 120:170，不变形 */
.stage .st-mine{ left:7%; }
.stage .st-foes{ right:7%; }
.stage .fx{ width:160px; height:160px; }
.stage .fx-mine{ left:22%; top:32%; }
.stage .fx-foes{ right:18%; top:30%; }
@media (max-height:560px){ .stage{ height:196px; } .stage .st-side{ width:92px; height:130px; } }

/* ============================================================
   v3.2 · 回归《放置江湖》的真实配色（修正 v3.1 的「屎黄」）
   ------------------------------------------------------------
   v3.1 我把它读成了「金铜色界面」——大错。
   看完它的 MainUI 素材（gongneng01~08 牌匾 / anniuiword* / biankuang*）才明白：
     · 底色是**近黑**
     · 面板是**黑底 + 金色细边**
     · 主按钮是**黑底金字的牌匾**
     · 金色**只出现在文字与 1px 细边上**
   我把「点缀色」当成了「主色」，于是整屏黄褐。这一版全部纠回来。
   ============================================================ */
:root{
  --ink-0:   #040405;     /* 最底 */
  --ink-1:   #0a0b0e;     /* 页面背景（偏一点冷蓝） */
  --ink-2:   #121317;     /* 面板面 */
  --ink-3:   #17181d;     /* 抬升面 */
  --gold:    #c9a24d;
  --gold-lit:#e6cd8c;
  --gold-dim:rgba(201,162,77,.30);
  --txt:     #e6e2d8;
  --txt-dim: #98938a;
}

/* ---- 背景：深蓝黑，只在很淡的地方透出水墨 ---- */
body{ background:var(--ink-1); }
body::before{
  background:
    radial-gradient(ellipse 120% 70% at 50% 0%, rgba(30,42,58,.55) 0%, rgba(8,9,12,0) 62%),
    linear-gradient(180deg, #0c0e13 0%, #08090c 46%, #040405 100%) !important;
}
body::after{ background:linear-gradient(90deg, rgba(0,0,0,.6), transparent); }

/* ---- 面板：黑底 + 金细边 + 四角回纹 ---- */
.panel{
  --cb: rgba(201,162,77,.55);
  background-image:
    linear-gradient(180deg, rgba(20,21,26,.94), rgba(9,10,12,.96)),
    linear-gradient(var(--cb),var(--cb)), linear-gradient(var(--cb),var(--cb)),
    linear-gradient(var(--cb),var(--cb)), linear-gradient(var(--cb),var(--cb)),
    linear-gradient(var(--cb),var(--cb)), linear-gradient(var(--cb),var(--cb)),
    linear-gradient(var(--cb),var(--cb)), linear-gradient(var(--cb),var(--cb));
  border-color:rgba(201,162,77,.22);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.7), 0 6px 22px rgba(0,0,0,.6);
}
.panel-title{ color:var(--gold-lit); }
.panel-title::before{ background:linear-gradient(180deg,var(--gold-lit),var(--gold)); }
.panel-title .right{ color:var(--txt-dim); }

/* ---- 按钮 / 选项：一律黑底，金字只在文字上 ---- */
.opt,.big-btn,.btn,.spell-btn,.chip{
  background:linear-gradient(180deg, rgba(24,25,31,.94), rgba(10,11,13,.96));
  border-color:rgba(201,162,77,.24);
  box-shadow:none;
}
.opt:active,.big-btn:active,.btn:active{
  background:linear-gradient(180deg, rgba(38,34,24,.96), rgba(16,15,11,.96));
  border-color:rgba(230,205,140,.6);
}
.opt.gold{ border-color:rgba(201,162,77,.42); }
.opt .oi{ color:var(--gold-lit); }
.opt .ov{ color:var(--gold); }
.opt .on{ color:var(--txt); }
.opt .od{ color:var(--txt-dim); }

.big-btn.primary,.btn.primary{
  background:linear-gradient(180deg, rgba(38,32,18,.96), rgba(16,14,8,.97));
  border-color:rgba(230,205,140,.62);
  color:var(--gold-lit);
  box-shadow:inset 0 1px 0 rgba(255,235,190,.08), 0 0 14px rgba(201,162,77,.10);
}
.big-btn .ico{ color:var(--gold); opacity:.34; }
.big-btn .sub{ color:var(--txt-dim); }
.big-btn.danger{ border-color:rgba(180,70,54,.5); }
.big-btn.danger .ico{ color:#d0705c; }

.chip{ color:var(--txt-dim); }
.chip.cur{
  border-color:var(--gold-lit); color:var(--gold-lit);
  background:rgba(201,162,77,.12);
  box-shadow:0 0 12px rgba(201,162,77,.18);
}

/* ---- 页签 / 顶栏：纯黑 ---- */
.tabbar{
  background:linear-gradient(180deg, rgba(10,11,14,.99), rgba(4,4,5,1));
  border-top:1px solid rgba(201,162,77,.20);
}
.tab{ color:rgba(200,196,186,.42); }
.tab.active{ color:var(--gold-lit); }
.tab.active i svg{ filter:drop-shadow(0 0 6px rgba(201,162,77,.55)); }

.hud{
  background:linear-gradient(180deg, rgba(12,13,17,.98), rgba(6,6,8,.99));
  border-bottom:1px solid rgba(201,162,77,.18);
}
.hud-name>span:first-child{ color:var(--gold-lit); }
.tag{ background:rgba(201,162,77,.10); color:var(--gold); border-color:rgba(201,162,77,.3); }
.hud-realm{ background:rgba(84,209,163,.07); color:#7ad8b0; }
.hud-menu{ color:var(--txt-dim); }

/* ---- 分层导航 / 弹窗 ---- */
.layer-bar{
  background:linear-gradient(90deg, rgba(201,162,77,.08), rgba(201,162,77,.01));
  border-color:rgba(201,162,77,.22);
}
.layer-back{
  border-color:rgba(230,205,140,.42);
  background:rgba(201,162,77,.10); color:var(--gold-lit);
}
.layer-crumb .lc-cur{ color:var(--gold-lit); }

/* ★ v7.15（用户定）：**返回栏常驻吸顶** —— 往下翻到页底也能随手返回。
   底色必须是实的（--ink-1），否则滚动时下面的内容会从半透明底里透出来；
   这条放在样式表末尾，盖过上面三处 .layer-bar 主题块。 */
/* ★ v7.22/v7.26（玩家反馈）：**所有返回键统一成「返回栏」那一款** ——
   吸顶常驻（长名单翻到底也随手能返回），外观与 `.layer-bar` 一致（金边卷轴条）。 */
.btn.back-sticky{
  display:block; width:100%; text-align:left;
  position:sticky; top:0; z-index:29;
  margin:0 0 11px; padding:8px 10px; border-radius:var(--r);
  background:linear-gradient(90deg, rgba(184,147,78,.14), rgba(184,147,78,.03)), var(--ink-1);
  border:1px solid rgba(184,147,78,.36);
  color:var(--gold-lit); font-size:12.5px; letter-spacing:.06em;
}
.page{ padding-top:12px; }
.layer-bar{
  position:sticky; top:0; z-index:30;
  background:linear-gradient(90deg,rgba(217,180,91,.10),rgba(217,180,91,.02)), var(--ink-1);
  box-shadow:0 6px 12px -8px rgba(0,0,0,.75);
}

.modal-box{
  background:linear-gradient(180deg, #131419, #07070a);
  border-color:rgba(201,162,77,.30);
}
.modal-head{ border-bottom-color:rgba(201,162,77,.18); }
.modal-head h3{ color:var(--gold-lit); }
.modal-close{ border-color:rgba(201,162,77,.3); color:var(--gold); }
.modal-foot{ border-top-color:rgba(201,162,77,.16); }

/* ---- 见闻栏 ---- */
.logbox{
  background:linear-gradient(180deg, rgba(12,13,17,.96), rgba(6,6,8,.98));
  border-color:rgba(201,162,77,.16);
}
.logbox .log-title{ color:var(--gold); }

/* ---- 属性格 / 数值行 ---- */
.attr-box{
  background:linear-gradient(180deg, rgba(22,23,29,.9), rgba(10,10,13,.94));
  border-color:rgba(201,162,77,.18);
}
.attr-box .ak{ color:var(--txt-dim); }
.attr-box .av{ color:var(--txt); }
.row{ border-bottom-color:rgba(201,162,77,.10); }
.row .rn{ color:var(--txt-dim); }
.row .rv{ color:var(--txt); }

/* ---- 题图：压到很暗，只留一点氛围 ---- */
.banner{
  border-color:rgba(201,162,77,.28);
}
.banner img{ filter:grayscale(.25) contrast(1.1) brightness(.55); }
.banner::after{
  background:linear-gradient(180deg,
    rgba(4,5,7,.42) 0%, rgba(4,5,7,.30) 40%, rgba(4,5,7,.94) 100%);
}
.banner .bd-name{ color:var(--gold-lit); text-shadow:0 2px 12px #000, 0 0 20px rgba(201,162,77,.2); }
.banner .bd-sub{ color:rgba(200,196,186,.6); }

/* ---- 战斗舞台：近黑底，只在上方留一条剪影景物带 ---- */
.stage{
  background:#050506;
  border-color:rgba(201,162,77,.22);
  box-shadow:inset 0 0 60px rgba(0,0,0,.9), 0 8px 26px rgba(0,0,0,.6);
}
.stage .st-bg{ filter:grayscale(.35) contrast(1.15) brightness(.42); }
.stage::after{
  background:
    linear-gradient(180deg, rgba(4,5,7,.25) 0%, rgba(4,5,7,.10) 34%, rgba(3,3,4,.86) 72%, #030304 100%);
}

/* ---- 血条：暗底 + 冷色 ---- */
.pbar{ background:rgba(0,0,0,.75); border-color:rgba(201,162,77,.16); }

/* ---------- 人物头像（男女剪影） ---------- */
.ava{display:block;border-radius:50%;}
.opt .oi .ava{width:28px;height:28px;}
.npc-head{display:flex;gap:12px;align-items:center;margin:4px 0 10px;}
.npc-ava{flex:0 0 auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,.7));}
.npc-head-txt{min-width:0;}
.npc-head-txt .npc-name{
  font-family:var(--serif);font-size:17px;letter-spacing:.14em;color:var(--gold-lit);
  margin-bottom:2px;
}
.npc-head-txt .faint{line-height:1.6;}

/* 剪影再放大一档，占满舞台高度才够气势 */
.stage{ height:252px; }
.stage .st-side{ width:136px; height:193px; bottom:8px; }
@media (max-height:560px){ .stage{ height:206px; } .stage .st-side{ width:108px; height:153px; } }

/* ---------- 入口图标：套一层金框牌位 ----------
   放置江湖的入口是「黑底金框的方块 / 菱形」（BaseUI 的 btn-brown-square、
   AttrUI 的 xiaanniu1 金环菱形）。光秃秃一个线icon太素，加个牌位才像器物。 */
.opt .oi{
  width:36px;height:36px;border-radius:6px;
  background:linear-gradient(180deg, rgba(201,162,77,.15), rgba(201,162,77,.03));
  border:1px solid rgba(201,162,77,.34);
  box-shadow:inset 0 1px 0 rgba(255,235,190,.08);
  color:var(--gold-lit);
}
.opt .oi .ink-ico{width:21px;height:21px;}
.opt:active .oi{ border-color:rgba(230,205,140,.7); background:linear-gradient(180deg, rgba(201,162,77,.25), rgba(201,162,77,.08)); }
/* 大按钮的角标也做成牌位 */
.big-btn .ico{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:7px;opacity:.9;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg, rgba(201,162,77,.13), rgba(201,162,77,.02));
  border:1px solid rgba(201,162,77,.28);
  color:var(--gold-lit);
}
.big-btn .ico .ink-ico{width:22px;height:22px;}
/* 线 icon 略加粗，小尺寸下才看得清 */
.ink-ico{stroke-width:1.75;}

/* ============================================================
   战斗舞台 · 照《放置江湖》的真实构图重做
   ------------------------------------------------------------
   从它 APK 的 OtherImage/Fight/Scene/*.png 与 wiki 武学特效图量出来的比例：
     · 上约 41% = 纯黑天空
     · 地平线 y≈59%，上面一排深灰剪影景物（枯树/茅屋/石头/草）
     · 下约 41% = 大片平坦深灰地面，小人站在这里
     · 小人 = **亮黄色实心剪影 + 红色兵器**（不是黑色！）
   ⚠️ 场景是程序化 SVG（sceneBackdrop），不是照片、也不是抠它的图。
   ============================================================ */
.stage{
  height:214px;                       /* 1280×430 的底板 ≈ 3:1，这里取窄一些适配竖屏 */
  background:#000;
  border-color:rgba(201,162,77,.22);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.9), 0 8px 26px rgba(0,0,0,.6);
  overflow:hidden;
}
.st-scene{
  position:absolute;inset:0;width:100%;height:100%;display:block;
}
/* 站在地平线上：地面自 59% 起，脚底落在 ~78% */
.stage .st-side{ width:120px; height:170px; bottom:9%; }
.stage .st-mine{ left:9%; }
.stage .st-foes{ right:9%; }
/* 脚下椭圆阴影由小人自带的 SVG 画，这里不再加 */
.stage::after{                 /* 四角压暗，把注意力收到中间 */
  background:radial-gradient(ellipse 78% 70% at 50% 48%, transparent 42%, rgba(0,0,0,.55) 100%);
}
@media (max-height:560px){ .stage{ height:176px; } .stage .st-side{ width:96px; height:136px; } }

/* ============================================================
   战斗舞台 · 尺寸按参照图实测校准（v3.5）
   ------------------------------------------------------------
   在落月山庄的武学特效图上按像素量出来的：
     · 小人高度 = **画幅的 16~17%**（我上一版做成 79%，大了近 5 倍）
     · 两个小人中心 x = **29%** 与 **74%**（拉到两侧，中间留出打斗空间）
     · 脚底 y = **68.5%**（站在地平线稍下方）
     · 地平线 = **57%**
     · 战斗视口比例 = 400:218 ≈ **1.83 : 1**
   ⚠️ 小人是「火柴人级别」的小 —— 场景与特效才是主角。别再放大。
   ============================================================ */
.stage{ height:226px; }                 /* 414 / 1.83 ≈ 226 */
.stage .st-side{
  width:30px; height:42px;              /* 226 × 16.5% ≈ 37~42px，与 120:170 同比 */
  bottom:31.5%;                         /* 脚底落在画幅 68.5% 处 */
}
.stage .st-mine{ left:calc(29% - 15px); right:auto; }
.stage .st-foes{ right:calc(26% - 15px); left:auto; }
@media (max-height:560px){
  .stage{ height:186px; }
  .stage .st-side{ width:25px; height:35px; }
}

/* ============================================================
   像素精灵（js/pxkit.js + js/sprites.js）
   ------------------------------------------------------------
   战斗双方的小人 / 妖兽、以及 NPC 头像，都是**程序化生成的像素图**，
   没有任何图片文件，也不需要 cdn。
   ⚠️ shape-rendering:crispEdges 必须留 —— 否则浏览器会把像素格
      做抗锯齿插值，边缘发糊，「像素味」全丢。
   ⚠️ 千万不要给 .pk 加 width/height 之外的 transform:scale(1.x)，
      非整数缩放会让有的像素占 2 格、有的占 3 格。
   ============================================================ */
.pk{display:block;width:100%;height:100%;shape-rendering:crispEdges;overflow:visible;}

/* 战斗站位：48×48 的方框，高 46px（小人本体约 40px ≈ 舞台高的 17%，
   这个比例是在参照图上按像素量出来的，别随手改大） */
.stage .st-side{ width:46px; height:46px; bottom:26.5%; }
.stage .st-mine{ left:calc(29% - 23px); right:auto; }
.stage .st-foes{ right:calc(26% - 23px); left:auto; }

/* ============================================================
   v4.4 · 小人头顶的气血 / 灵力双条
   ------------------------------------------------------------
   用户要求：双方的气血（红条）与灵力（蓝条）画在战斗画面里小人的头顶，
   画面下面那一整块「双方血条」撤销 —— 「出现在战斗画面里面本身就是一种收窄」。
   ⚠️ 定位是「跟着小人走」的：底边 = 小人的 bottom(26.5%) + 小人高 + 3px，
      所以上面的 .st-side 尺寸一改，这里的两条 calc 必须跟着改（介质查询里那份也是）。
   ⚠️ 舞台 min-height 必须 ≥ 128px：矮过这个数，头顶条会被 .stage 的 overflow:hidden
      从上面切掉半截（临界值 = 解「0.265×h + 49 + 条块高 43 ≤ h」≈ 126）。
   ★ 用户反馈「血条蓝条太细了，看不太清里面的数字」→ v4.5 把条加厚：
      红条 7→13px、蓝条 6→12px、数字 8.5→10.5px 加粗，条宽 118→128px。
      想再调宽窄厚薄，改的就是下面这 4 个数（记得同步解一遍 min-height）。
   ============================================================ */
.stage .st-ovh{
  position:absolute; z-index:6; width:128px; pointer-events:none;
  /* gap 1px：条加厚之后块高是「舞台 min-height」的主要成本，
     从 2px 收到 1px 能省 2px，正好换回「条顶离舞台上沿还有 4px 余量」。 */
  display:flex; flex-direction:column; gap:1px;
  bottom:calc(26.5% + 49px);          /* 46px 小人 + 3px 缝 */
}
.stage .st-ovh-me{ left:calc(29% - 64px); }
.stage .st-ovh-foe{ right:calc(26% - 64px); left:auto; }
.ovh-nm{
  font-family:var(--serif); font-size:12px; line-height:1.2; letter-spacing:.06em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-shadow:0 1px 3px #000, 0 0 6px #000;
}
.ovh-nm.me{ color:#f2e33a; }
.ovh-nm.foe{ color:#e9a72b; text-align:right; }
.ovh-bar{
  position:relative; display:block; height:13px; border-radius:3px; overflow:hidden;
  background:rgba(0,0,0,.86); border:1px solid rgba(201,162,77,.30);
  box-shadow:0 1px 5px rgba(0,0,0,.85), inset 0 0 0 1px rgba(0,0,0,.5);
}
.ovh-bar > i{
  display:block; height:100%; border-radius:1px;
  transition:width .22s ease-out;
  /* 顶部一条高光，让「填充到哪」一眼可辨（纯平色块在低亮度下会糊） */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.ovh-bar.hp > i{ background:linear-gradient(90deg,#8f2f24,#d9604f); }
.ovh-bar.mp{ height:12px; }
.ovh-bar.mp > i{ background:linear-gradient(90deg,#2a5d8f,#5fa8d3); }
.ovh-bar > b{
  position:absolute; inset:0; display:block; text-align:center;
  font:700 10.5px/13px var(--sans); letter-spacing:.02em; color:#fff;
  /* 数字压在条中央：黑白都要压得住，所以用「描边式」多重阴影而不是单层模糊 */
  text-shadow:0 0 3px #000, 0 0 5px #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000;
}
.ovh-bar.mp > b{ line-height:12px; }
/* 敌方灵力快满 —— 下一击就是妖术 / 杀招 */
.ovh-bar.mp.will{
  border-color:rgba(232,160,143,.85);
  animation:ovhWarn 1s ease-in-out infinite;
}
.ovh-bar.mp.will > i{ background:linear-gradient(90deg,#8f3f2f,#e8a08f); }
@keyframes ovhWarn{
  0%,100%{ box-shadow:0 0 0 rgba(232,160,143,0); }
  50%    { box-shadow:0 0 7px rgba(232,160,143,.85); }
}

/* 头像：像素图 + 金边圆框 */
.ava-wrap{display:block;border-radius:50%;overflow:hidden;
  border:1px solid rgba(201,162,77,.45);background:#0a0b0f;}
.opt .oi .pk-ava{ width:26px; height:26px; }
.npc-ava .pk-ava{ width:100%; height:100%; }
.npc-ava{ width:85px; height:85px; border-radius:50%; overflow:hidden;
  border:1px solid rgba(201,162,77,.45); background:#0a0b0f;
  flex:0 0 auto; filter:drop-shadow(0 2px 8px rgba(0,0,0,.7)); }

@media (max-height:560px){
  .stage .st-side{ width:38px; height:38px; }
  .stage .st-mine{ left:calc(29% - 19px); }
  .stage .st-foes{ right:calc(26% - 19px); }
  /* 小人缩到 38px，头顶条跟着下降 8px —— 两条尺寸必须成对改 */
  .stage .st-ovh{ bottom:calc(26.5% + 41px); }
  .stage .st-ovh-me{ left:calc(29% - 59px); }
  .stage .st-ovh-foe{ right:calc(26% - 59px); }
}

/* 头像底衬：纯黑底 + 深色头发会糊成一块，给一点渐变把轮廓托出来 */
.npc-ava{ background:linear-gradient(180deg,#1b2029,#08090c); }
.opt .oi .pk-ava{ width:28px; height:28px; }

/* ---- NPC 头像：与玩家同一套水墨立绘（assets/ava/，112×112 圆框裁圆）----
   白底线稿要垫一层纸色，否则在深色行里是一块刺眼的白。
   ⚠️ 尺寸由 CSS 给：列表行 28px 跟原来的像素头像一样高，详情页撑满 .npc-ava。 */
.ava-img{
  display:block; border-radius:50%; object-fit:cover;
  border:1px solid rgba(201,162,77,.45); background:#f6f3ec;
  box-shadow:0 1px 5px rgba(0,0,0,.55);
}
.opt .oi .ava-img{ width:28px; height:28px; }
.npc-ava .ava-img{ width:100%; height:100%; }

/* ---- 玩家自己的容貌头像（AI 水墨白描立绘 assets/ava/，112×112） ----
   白描是白底线稿 —— 直接贴进深色面板会是一块刺眼的白方块，
   所以圆框里垫一层极淡的纸色，保住线稿的通透，又不至于在暗底上炸开。
   ⚠️ 头像不是像素精灵，别套 .pk / .pk-ava 那套（会盖掉尺寸）。 */
.self-head{ display:flex; gap:12px; align-items:center; margin-bottom:2px; }
.self-ava{
  flex:0 0 auto; width:96px; height:96px; border-radius:50%; overflow:hidden;
  border:1px solid rgba(201,162,77,.55); background:#f6f3ec;
  box-shadow:0 3px 12px rgba(0,0,0,.65), inset 0 0 0 1px rgba(0,0,0,.14);
}
.self-ava img{ display:block; width:100%; height:100%; }
.sh-txt{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.sh-n{ font-family:var(--serif); font-size:15px; letter-spacing:.05em; color:var(--gold-lit); }
.sh-n b{ color:var(--jade); font-weight:600; }
.sh-d{ font-size:12.5px; line-height:1.65; color:rgba(243,236,224,.75); }
@media (max-height:560px){ .self-ava{ width:80px; height:80px; } }

/* ============================================================
   攻击 / 施法特效 · 位置与尺寸（v3.8 重做）
   ------------------------------------------------------------
   ⚠️ 旧版 160×160，是小人（46px）的 3.5 倍，还挂在出手方自己头上 ——
      用户看到的就是「身上一个很大的 WiFi 图标」。现在：
        · 尺寸降到 70px（比小人大一圈）
        · **落在挨打的那一方身上**（fx-on-foe / fx-on-me）
        · 动画缩短到 .42s，前 22% 冲到 1.12 倍再收
   ============================================================ */
.stage .fx{
  position:absolute; z-index:5; pointer-events:none;
  width:70px; height:70px; overflow:visible;
  bottom:calc(26.5% - 11px);      /* 与小人的胸口齐平 */
}
.stage .fx-on-foe{ right:calc(26% - 35px); }
.stage .fx-on-me { left:calc(29% - 35px); }
@keyframes fxPop{
  0%  { opacity:0; transform:scale(.55) rotate(-8deg); }
  22% { opacity:1; transform:scale(1.12) rotate(0deg); }
  68% { opacity:.92; transform:scale(1); }
  100%{ opacity:0; transform:scale(1.24); }
}
.stage .fx.go{ animation:fxPop .42s ease-out forwards; }
@media (max-height:560px){
  .stage .fx{ width:58px; height:58px; bottom:calc(26.5% - 9px); }
  .stage .fx-on-foe{ right:calc(26% - 29px); }
  .stage .fx-on-me { left:calc(29% - 29px); }
}

/* ============================================================
   像素图标（js/pxicons.js）—— 秘境 / 城镇 / 城中设施
   ------------------------------------------------------------
   都是 24×24 的程序化像素图，塞进已有的金框牌位里。
   ⚠️ .pk 默认是 display:block + 100%，放进 .panel-title 这种行内位置
      必须覆盖成 inline-block 并给固定尺寸，否则会把标题撑开。
   ============================================================ */
.pk-ico{ display:block; width:100%; height:100%; }
.opt .oi .pk-ico{ width:26px; height:26px; }
.panel-title .pk-ico{
  display:inline-block; width:17px; height:17px;
  vertical-align:-3px; margin-right:6px;
}

/* ============================================================
   像素图标 · 两种落位（v4.1）
   ------------------------------------------------------------
   .pk-ico    —— 放进 .oi / .si 「牌位」里，尺寸交给牌位的 CSS
   .pk-ico-i  —— 跟着文字走的内联图标，宽高写死在 svg 属性上
   ⚠️ 内联的那种**不能**带 .pk 类 —— .pk 是 width:100%，会盖掉属性。
   ============================================================ */
.pk-ico-i{
  display:inline-block; vertical-align:-3px; margin-right:5px; flex:0 0 auto;
}
.panel-title .pk-ico-i{ width:17px; height:17px; margin-right:6px; }
.blk .pk-ico-i, .flex-between .pk-ico-i{ vertical-align:-2px; }
.slot .si .pk-ico{ width:24px; height:24px; }
.opt .oi .pk-ico{ width:26px; height:26px; }
.rn .pk-ico-i{ margin-right:4px; }

/* 「不可为但可看」：变灰但仍可点（.locked 是 pointer-events:none，别混用） */
.opt.dim{ opacity:.62; }
.opt.dim .on{ color:var(--txt-dim); }

/* ============================================================
   v4.3 · 战斗页「一屏装下」+ 启动页压缩
   ------------------------------------------------------------
   用户反馈（手机与电脑都有）：
     「看战斗画面就没法操作战斗，操作战斗就看不到战斗画面」
   实测（Toy iframe 414×708 → 主区只剩 504px）：
     旧战斗页 = 舞台 226 + 血条/描述 152 + 战报 176 + 出招 678 = 1294px（超 790px）
   所以这一版把战斗页做成 **flex 撑满主区**：
     舞台 flex:1 吃掉剩余高度、血条压成两行、出招 2×2 固定高度、战报限高内部滚动。
   任何屏高都装得下，且舞台自动伸缩。
   ============================================================ */

/* ---- 战斗页骨架 ---- */
#pageWrap > .page.battle{
  display:flex; flex-direction:column; gap:8px;
  height:100%; min-height:0;      /* 撑满主区内容盒，不产生滚动条 */
}
.page.battle .bt-stage{
  flex:1 1 auto;
  /* ⚠️ 必须给真实最小高度：若写成 min-height:0，屏太矮时这一块会被压到 40px，
     而里面的舞台还有 92px —— 内容直接**叠**在血条和出招上（真踩过）。
     给足最小高度后，装不下就整体滚动，至少不会重叠。 */
  min-height:166px;   /* 舞台 128 + 敌方情报 30 + gap 8 */
  /* 限高放在**外层**：内层舞台跟着它撑满，不会出现「容器撑满、舞台被限高」的空洞 */
  max-height:334px;   /* = 舞台 296 + 情报 30 + gap 8，舞台 296 时小人约占 16.4% */
  display:flex; flex-direction:column; gap:8px;
}
/* 舞台吃掉剩余高度（覆盖前面所有写死高度的 .stage 规则与媒体查询）。
   ⚠️ min-height 从 92 → 112（v4.4 加头顶条）→ 128（v4.5 条加厚到 13/12px）：
      头顶条块底部在 26.5% + 49px 处，块高现在 43px，
      舞台矮于 128 时它会被 overflow:hidden 从上面切掉半截
      （临界值 = 解 0.265h + 49 + 43 ≤ h ≈ 126；取 128 是留一点余量，
        免得某些机型亚像素取整后贴边）。条一加厚，这里必须跟着加。 */
.page.battle .bt-stage > .stage{
  flex:1 1 auto; height:auto; min-height:128px; margin-bottom:0;
}
.page.battle .bt-foe{ flex:0 0 auto; }
.page.battle .bt-acts{
  flex:0 0 auto; max-height:46%;  /* 功法列表展开时最多占主区 46%，超出内部滚 */
  overflow-y:auto;
}
.page.battle .bt-auto{ flex:0 0 auto; margin:0; }
.page.battle .bt-logwrap{
  flex:0 1 auto; min-height:30px;
  display:flex; flex-direction:column; gap:3px;
}
.page.battle .bt-desc{
  flex:0 0 auto; font-size:11.5px; color:var(--txt-faint);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.page.battle .bt-log{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  background:linear-gradient(180deg, rgba(12,13,17,.96), rgba(6,6,8,.98));
  border:1px solid rgba(201,162,77,.16); border-radius:5px; padding:5px 8px;
}
.page.battle .bt-log p{ margin:0 0 2px; font-size:12px; line-height:1.5; }

/* ============================================================
   敌方情报（原来这块是「双方血条」）
   ------------------------------------------------------------
   血条搬到小人头顶之后，这块改成**敌方属性**：攻 / 防 / 五行 / 首领 /
   秘境层数 / 蓄力预警。只放「能改变决策」的一项行，多到换行就换行
   （.bt-stage 的 min-height 已按两行预算过）。
   ============================================================ */
.bt-foe{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 9px;
  padding:5px 9px; border-radius:5px;
  background:linear-gradient(180deg, rgba(20,22,27,.92), rgba(10,11,14,.94));
  border:1px solid rgba(201,162,77,.16);
}
.bt-foe .foe-t{
  font-family:var(--serif); font-size:11.5px; color:var(--gold-lit);
  letter-spacing:.12em;
}
.bt-foe .foe-c{ font-size:11.5px; color:var(--txt-dim); letter-spacing:.02em; }
.bt-foe .foe-c b{ color:var(--txt); font-weight:600; }
.bt-foe .foe-c.boss{
  color:#e08a6a; padding:0 5px; border-radius:3px;
  border:1px solid rgba(224,138,106,.42);
}
.bt-foe .foe-c.warn{
  color:#e8a08f; padding:0 5px; border-radius:3px;
  border:1px solid rgba(232,160,143,.5); background:rgba(232,160,143,.10);
  animation:ovhWarn 1s ease-in-out infinite;
}

/* ---- ★ v7.0：行动条（谁快谁先动，满格出手；身法高者能连动） ---- */
.page.battle .bt-av{
  flex:0 0 auto;
  display:flex; align-items:center; gap:6px;
  padding:0 2px; font-size:10.5px;
}
.bt-av .av-t{
  flex:0 0 auto; font-family:var(--serif); font-size:10.5px; color:var(--gold-lit);
  letter-spacing:.1em;
}
.bt-av .av-b{
  flex:1 1 auto; height:6px; border-radius:3px; overflow:hidden;
  background:rgba(255,255,255,.07); border:1px solid rgba(201,162,77,.14);
}
.bt-av .av-b > i{ display:block; height:100%; border-radius:3px; }
.bt-av .av-b.me  > i{ background:linear-gradient(90deg,#2a5d8f,#5fa8d3); }
.bt-av .av-b.foe > i{ background:linear-gradient(90deg,#8f2f24,#d9604f); }
.bt-av .av-v{ flex:0 0 auto; color:var(--txt-dim); letter-spacing:.02em; }

/* ---- 出招：2×2 网格 ---- */
.act-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.act{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px; min-height:46px; padding:5px 4px; border-radius:5px; cursor:pointer;
  background:linear-gradient(180deg, rgba(24,25,31,.94), rgba(10,11,13,.96));
  border:1px solid rgba(201,162,77,.26);
}
.act:active{ background:linear-gradient(180deg, rgba(52,44,34,.95), rgba(28,24,19,.96)); border-color:rgba(230,198,127,.6); }
.act.on{ border-color:rgba(230,198,127,.6); }
.act .act-i{ line-height:0; color:var(--gold-lit); display:block; }
.act .act-i .ink-ico{ width:17px; height:17px; }
.act .act-t{ font-size:12.5px; color:var(--txt); letter-spacing:.05em; }

/* ---- 功法列表（在同一块区域里替换网格）---- */
.act-head{
  display:flex; align-items:center; gap:10px; margin-bottom:6px;
}
.act-back{
  flex:0 0 auto; cursor:pointer; font-size:12.5px; color:var(--gold-lit);
  padding:3px 9px; border-radius:4px;
  border:1px solid rgba(201,162,77,.42); background:rgba(201,162,77,.10);
}
.act-sp{
  display:flex; align-items:baseline; gap:8px; padding:7px 9px; margin-bottom:5px;
  border-radius:4px; cursor:pointer;
  background:linear-gradient(180deg, rgba(24,25,31,.94), rgba(10,11,13,.96));
  border:1px solid rgba(201,162,77,.26);
}
.act-sp:active{ border-color:rgba(230,198,127,.6); }
.act-sp.locked{ opacity:.45; pointer-events:none; }
.act-sp .as-n{ flex:0 0 auto; font-size:13px; color:var(--txt); }
.act-sp .as-n b{ font-size:10.5px; margin-left:5px; }
.act-sp .as-d{ flex:1 1 auto; min-width:0; font-size:11px; color:var(--txt-dim); }

/* ============================================================
   启动 / 主菜单 · 压缩（原来标题区 + 三行引导把面板顶到屏幕边缘）
   ⚠️ is-create（建档页）的规则更具体，不会被这里覆盖。
   ============================================================ */
.boot-inner{ padding-top:22px; padding-bottom:14px; }
.boot-seal{ width:50px; height:50px; margin:0 auto 9px; border-radius:11px; font:600 26px/50px var(--kai); }
.boot-title{ font-size:30px; letter-spacing:.24em; text-indent:.24em; margin:0 0 2px; }
.boot-sub{ font-size:12px; letter-spacing:.3em; text-indent:.3em; margin:0 0 12px; }
.boot-intro{
  text-align:center; font-size:12.5px; line-height:1.7;
  color:var(--txt-dim); margin-bottom:12px; letter-spacing:.04em;
}
.boot-panel{ padding:12px 12px; }
.boot-panel .opt-list{ gap:7px; }
.boot-panel .opt{ padding:8px 10px; }
.boot-panel .opt .on{ font-size:13.5px; }
.boot-panel .opt .od{ font-size:11.5px; }
.boot-nav{ margin-top:9px; min-height:16px; }
.boot-foot{ margin-top:9px; font-size:11px; }

/* 选功法状态：舞台让位给功法列表（矮屏也得一屏装下）。
   ⚠️ 舞台最低 112px 不能再往下压 —— 头顶那对条会顶到舞台上沿被切掉。 */
.page.battle.spells .bt-stage{ min-height:166px; max-height:230px; }
.page.battle .bt-acts{ max-height:42%; }
/* 功法列表（spells）允许被压扁、内部滚动：功法多的角色列表很长，
   压扁它总好过把整页顶出一条滚动条。4 格出招网格不放行 —— 按钮压扁就点不准了。 */
.page.battle.spells .bt-acts{ flex:0 1 auto; min-height:0; }

/* 极矮屏（≤560px，与上面 .st-side 缩到 38px 的那条媒体查询配套）：
   小人矮了 8px，头顶条整体下降 8px，舞台下限也能跟着从 132 让到 120。 */
@media (max-height:560px){
  .page.battle .bt-stage{ min-height:158px; }
  .page.battle .bt-stage > .stage{ min-height:120px; }
  .page.battle.spells .bt-stage{ min-height:158px; }
  /* 矮屏把出招格子压薄（图标 17→15、字 12.5→12、内边距 5→3，两行共省 ~12px）——
     头顶那两条刚加厚，这里不还一点回去，560px 高的屏就要多滚 12px。
     ⚠️ 这里只能压内容（图标/字号/内边距），**光写 min-height 没有用**：
        `.act` 的自然高度本来就是 46px，min-height 降到 40 也压不下来。 */
  .page.battle .bt-acts .act{ padding:3px 4px; }
  .page.battle .bt-acts .act .act-i .ink-ico{ width:15px; height:15px; }
  .page.battle .bt-acts .act .act-t{ font-size:12px; }
  .page.battle .bt-auto{ padding:6px; }
  .page.battle .bt-foe{ padding:3px 9px; }
}

/* ★ v7.33 · 装备位选择弹窗 */
.gp-lab{
  font-family:var(--serif);font-size:12px;color:var(--gold-lit);
  letter-spacing:.12em;margin:2px 0 6px;
}
.gp-lab + .gp-empty, .gp-empty{
  font-size:12px;color:var(--txt-dim);
  padding:10px 12px;border-radius:8px;background:rgba(0,0,0,.18);margin-bottom:10px;
}
#modalBody .opt{ margin-bottom:6px; }
#modalBody .opt .od{ font-size:11px;line-height:1.45; }

/* ★ v7.35 · 丹药品级角标（左上角小点，颜色即品级） */
.slot .gq{
  position:absolute;left:5px;top:5px;width:7px;height:7px;border-radius:50%;
  box-shadow:0 0 0 1px rgba(0,0,0,.5);
}
.slot .gq1{background:#5fe0bd} .slot .gq2{background:#5fa8d3}
.slot .gq3{background:#b58bf0} .slot .gq4{background:#e8c46a}

/* ★ v7.45 · 研读等级徽标（入门 / 小成 / 大成 …） */
.opt .od .db{ color:var(--jade-lit); font-weight:600; letter-spacing:.04em; }
.opt .od .db0{ color:var(--txt-faint); font-weight:400; }
.opt .od .dbmax{ color:var(--gold-lit); font-weight:700; }

/* ============================================================
   ★ v7.50 · 排版规范（名录行 / 四列行 / 要点格 / 容器格）
   ------------------------------------------------------------
   这一层只做「行怎么排」，不动配色与层级：
     · .opt.row1   名录行：56px，描述强制一行，右列只放状态
     · .row.drow   四列行：名称+细目 / 效果 / 状态（丹方、器谱用）
     · .facts      要点格：2×2 数字块，替代连续散文
     · 储物袋格子定高，名字最多两行，不再把行撑歪
   ============================================================ */

/* ---- 名录行 ---- */
.opt.row1{ padding:7px 12px; min-height:52px; align-items:center; }
/* 牌位跟着收：36px 的图标框会把行高顶到 63px，名录制要的是密度 */
.opt.row1 .oi{ width:30px; height:30px; border-radius:5px; }
.opt.row1 .oi .pk-ico{ width:22px; height:22px; }
.opt.row1 .oi .ink-ico{ width:18px; height:18px; }
.opt.row1 .on{ font-size:13.5px; line-height:1.35; }
.opt.row1 .od{
  margin-top:1px; line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.opt.row1 .ov{
  white-space:nowrap; max-width:42%; overflow:hidden; text-overflow:ellipsis;
  font-variant-numeric:tabular-nums; padding-left:6px;
}
/* 普通行也可以只留一行细目（商店 / 法宝这类） */
.row.row1{ padding:8px 11px; }
.row.row1 .rd{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---- 四列数据行 ---- */
.row.drow{
  display:grid; grid-template-columns:minmax(0,1fr) 96px 50px;
  gap:7px; align-items:center; padding:7px 10px;
}
.row.drow .rn{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.row.drow .nm{
  display:flex; align-items:center; gap:6px;
  font-family:var(--serif); font-size:13.5px; color:var(--txt);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.row.drow .rd{
  font-size:11px; color:var(--txt-faint); line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.row.drow .eff{
  font-size:11px; color:var(--txt-dim); text-align:right;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-variant-numeric:tabular-nums;
}
.row.drow .st{ font-size:11.5px; text-align:right; white-space:nowrap; color:var(--txt-faint); }
.row.drow .st.ok{ color:var(--jade); }
.row.drow .st.lack{ color:var(--gold-lit); }
.row.drow .st.no{ color:var(--txt-faint); }
.row.drow.locked{ opacity:.58; }

/* ---- 要点格 ---- */
.facts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.fact{
  background:rgba(0,0,0,.24); border:1px solid var(--line-soft);
  border-radius:8px; padding:7px 10px; min-height:46px;
}
.fact .fk{ font-size:11px; color:var(--txt-faint); letter-spacing:.04em; }
.fact .fv{
  font-family:var(--serif); font-size:15px; color:var(--txt);
  margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-variant-numeric:tabular-nums;
}
.fact .fv.gold{ color:var(--gold-lit); }
.fact .fv.jade{ color:var(--jade); }
.fact .fv.cin{ color:var(--cinnabar); }
.fact .fv.az{ color:var(--azure); }

/* ---- 储物袋：格子定高 + 名字两行封顶 ----
   ⚠️ 必须用 minmax(0,1fr)：`1fr` 的隐式最小尺寸是 min-content，
      行内不能断行的长名字（下品九转还魂丹）会把整列撑宽，第四列直接被推出屏幕。 */
.grid-bag{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid-bag .slot{ height:88px; min-width:0; align-content:flex-start; }
.grid-bag .slot .sn{ max-width:100%; overflow-wrap:anywhere; }
.grid-bag .slot .sn{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; line-height:1.22; max-height:2.44em; font-size:10.5px;
}
.bag-chips{ display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; -webkit-overflow-scrolling:touch; }
.bag-chips .btn{ flex:0 0 auto; padding:4px 9px; font-size:11.5px; }

/* ---- 名录行 · 两行版（68px）：给「没有详情页、文案本身就是信息」的列表用
   （城镇一览、秘境一览这类 —— 描述砍成一行会丢掉风味，就给它两行，
     但绝不让第三行把行高撑开）---- */
.opt.row2{ padding:8px 12px; min-height:68px; align-items:center; }
.opt.row2 .od{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; line-height:1.35; max-height:2.7em;
}
.opt.row2 .ov{ white-space:nowrap; max-width:34%; overflow:hidden; text-overflow:ellipsis; padding-left:8px; }

/* ---- 四列数据行的窄屏兜底：效果列在 360px 下再收一点 ---- */
@media (max-width:379px){
  .row.drow{ grid-template-columns:minmax(0,1fr) 92px 50px; gap:6px; }
}

/* ---- 胜机 / 小指标横排（竞技页的四场胜机、三阵胜机） ---- */
.meter-row{ display:flex; gap:6px; }
.meter{
  flex:1 1 0; min-width:0; text-align:center;
  background:rgba(0,0,0,.24); border:1px solid var(--line-soft);
  border-radius:7px; padding:5px 2px;
}
.meter .mk{ display:block; font-size:10px; color:var(--txt-faint); line-height:1.2; }
.meter .mv{
  display:block; margin-top:1px; font-family:var(--serif); font-size:13px;
  color:var(--txt); font-variant-numeric:tabular-nums;
}
.meter .mv.jade{ color:var(--jade); }
.meter .mv.cin{ color:var(--cinnabar); }
.meter .mv.gold{ color:var(--gold-lit); }

/* ---- 并排按钮（参研这类「一个看详情、一个放弃」的次要动作）---- */
.btn.grow{ flex:1 1 0; min-width:0; }
.btn.tall{ min-height:44px; }

/* ============================================================
   ★ v7.53 · 参研页重排（用户定）
   ------------------------------------------------------------
   以前五个面板堆叠 1655px，要滑两屏半；现在一屏三段：
     ① 主卡（书名 / 还需多久 / 进度 + 熟练度 / 两个次要按钮）
     ② 分类 chips  ③ 三列名录  ④ 师父一条
   ============================================================ */

/* ---- 主卡 ---- */
.std-hero .std-top{display:flex;align-items:flex-start;gap:10px;margin-top:2px;}
.std-left{min-width:0;flex:1;}
.std-name{
  font-family:var(--serif);font-size:17.5px;color:var(--txt);
  letter-spacing:.04em;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.std-sub{margin-top:4px;font-size:11px;color:var(--txt-faint);letter-spacing:.02em;}
.std-right{margin-left:auto;text-align:right;flex:0 0 auto;padding-left:8px;}
.std-le{font-size:9.5px;color:var(--txt-faint);letter-spacing:.16em;}
.std-big{
  margin-top:2px;font-family:var(--serif);font-size:18px;color:var(--gold-lit);
  font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.2;
}
.std-meta{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  margin-top:6px;font-size:10.5px;color:var(--txt-faint);
}
.std-meta b{font-family:var(--serif);font-size:11.5px;color:var(--gold-lit);font-weight:400;}
.std-prof{margin-top:9px;}
.pbar.thin{height:5px;border-radius:3px;}
.pbar.thin>i{background:linear-gradient(90deg,#7d6428,#d9b45b);}
.std-tip{margin-top:7px;font-size:10.5px;line-height:1.5;color:var(--txt-faint);}
.std-tip b{color:var(--gold-lit);font-weight:400;}

/* ---- 分类 chips ---- */
.std-chips{display:flex;gap:6px;flex-wrap:wrap;margin:9px 0 1px;}
.std-chip{
  height:27px;padding:0 11px;border-radius:14px;
  display:inline-flex;align-items:center;
  font-size:11px;letter-spacing:.02em;color:var(--txt-dim);
  border:1px solid var(--line-soft);background:rgba(0,0,0,.26);
  font-family:var(--sans);font-weight:400;cursor:pointer;
}
.std-chip.on{
  color:#1a1408;border-color:transparent;
  background:linear-gradient(180deg,#e6cd8c,#c9a24d);
  font-weight:600;
}

/* ---- 师父：压成一条 ---- */
.std-ask{
  display:flex;align-items:center;gap:10px;margin-top:10px;
  padding:10px 12px;border-radius:8px;
  border:1px solid rgba(201,162,77,.22);
  background:linear-gradient(180deg, rgba(217,180,91,.06), rgba(0,0,0,.18));
  cursor:pointer;
}
.std-ask-i{
  width:26px;height:26px;border-radius:5px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(201,162,77,.32);color:var(--gold-lit);
}
.std-ask-i svg{width:15px;height:15px;}
.std-ask-t{min-width:0;flex:1;}
.std-ask-t b{
  display:block;font-family:var(--serif);font-size:12.5px;color:var(--txt);
  letter-spacing:.1em;font-weight:600;
}
.std-ask-t em{display:block;margin-top:2px;font-style:normal;font-size:10px;color:var(--txt-faint);}
.std-ask-go{margin-left:auto;font-size:11px;color:var(--gold);white-space:nowrap;}

/* ---- ★ v7.56 · 参研名录的熟练度列（数字 + 2px 细条，靠右对齐）----
   用户定：不要正文里写纯数字，要像上一版那样给一条进度条，位置也靠右。
   固定 62px 宽 + 状态列固定 44px，所有行的细条才会落在同一条竖线上。 */
.opt .sp{
  flex:0 0 auto;width:56px;text-align:right;
  font-size:10.5px;color:var(--txt-dim);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.opt .sp b{font-family:var(--serif);font-size:11.5px;color:var(--txt);font-weight:400;}
.opt .sp i{
  display:block;height:2px;border-radius:2px;margin-top:4px;
  background:rgba(255,255,255,.09);position:relative;overflow:hidden;
}
.opt .sp i::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w,0%);
  background:linear-gradient(90deg,#8a6a1e,#e6cd8c);border-radius:2px;
}
.opt .sp.plain{font-size:11px;color:var(--txt-faint);}
.opt .ov{min-width:40px;text-align:right;}