/* ===========================================================================
 *  FC《吞食天地Ⅱ》UI 复刻样式
 *  逻辑分辨率固定 256×240（NES 原生），整体 integer scale 到窗口。
 *  字体 12px 点阵中文（Zpix / 缝合像素），关闭一切抗锯齿与平滑。
 * =========================================================================== */

/* 点阵中文字体是「可选增强」：
 *   把 Zpix.ttf 放进 assets/ 即自动启用。
 * 这里刻意不写 @font-face —— 否则字体缺失时浏览器必然抛一次 404 红字，
 * 会被误认成游戏坏了。改由 Assets.loadFont() 先探测存在再注入，
 * 做到「装了就用、没装零报错」。缺字体时回落下方 font stack，不影响功能。 */

:root{
  /* --- NES 2C02 调色板取样 --- */
  --c-black:#000000;  --c-white:#fcfcfc;  --c-gray:#bcbcbc;  --c-dgray:#7c7c7c;
  --c-blue:#0078f8;   --c-lblue:#3cbcfc;  --c-dblue:#0000bc;
  --c-red:#f83800;    --c-pink:#e40058;   --c-lred:#f87858;
  --c-green:#00b800;  --c-lgreen:#3cbc3c; --c-ygreen:#b8f818;
  --c-orange:#f8b800; --c-skin:#fcd8a8;   --c-brown:#a44400;
  --c-cyan:#3cbcbc;    --c-purple:#6844fc;
  /* 战略模式语义色（P3：不硬套 2C02，避免与 --c-orange 提示橙撞车） */
  --c-gold:#ffd24a;    /* 数值高亮 / 星标 / 进度条（战略模式专用） */
  --c-rare:#ff9ad5;    /* 稀有装备 */
  --scale:3;
  --zoom:1;            /* 网页版手动缩放档：作用于手柄（不缩游戏外框）；APK 恒 1。工具栏/设置按钮不随 --zoom 缩放（回退 v2.1.12 行为，见 #toolbar/#tb-settings） */
  /* b0.6.41：顶部安全区——刘海/状态栏留白，回退 8px（安卓 WebView 无 env 时） */
  --safe-top: max(28px, env(safe-area-inset-top, 28px));
  --safe-top-num: 28;          /* JS fit() 用：顶部安全区数值(px)，真机刘海由 --safe-top 视觉兜底 */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-bottom-num: 0;        /* JS fit() 用：底部安全区数值(px) */
  /* 移动端磁吸布局：游戏框宽与安全区间距，供 .pad-dir/.pad-ab 固定定位使用。
   * b0.6.45③：框宽不再含 --zoom（手动缩小只缩手柄、不缩框），横屏手柄定位用真实框宽 */
  --frame-w: calc(256px * var(--scale));
  --gap-l: calc(env(safe-area-inset-left, 0px) + 10px);
  --gap-r: calc(env(safe-area-inset-right, 0px) + 10px);
  /* b?.?: 各主题文字标与游戏外框之间的纵向安全距离（上下留白）。[PLACEHOLDER·真机定] */
  --label-gap: 24px;
}

/* ---------- 字体 ----------
 * 需求：改用「微软正黑体」（Microsoft JhengHei）。它是繁体中文 UI 字体、
 * 走旧字形，字面比思源/微软雅黑更"竖直"，配三国题材比简体黑体贴。
 * 该字体是微软版权字体，不能随包分发，所以只能声明本地名字：
 *   Windows/装了 Office 的 Mac → 直接命中 Microsoft JhengHei；
 *   iOS/macOS → 退 PingFang TC / Heiti TC（同为繁体字形）；
 *   Android → 退 Noto Sans TC；再不济才回到点阵字体与 SimSun。
 * 中英文名都写：某些系统只认 '微軟正黑體' 这个本地化名。 */
/* 内嵌中文字体（v1.31）：改用「阿里巴巴普惠体 2.0 55 Regular」（免费商用授权）。
 * 已从完整字体按本游戏实际用字子集化（assets/fonts/alibaba.woff2，约 220KB），
 * 含全部 UI 文本、112 将姓名与传记、头像/战斗图标注，零豆腐块。
 * 字体文件随网页/APK 一并发布，不会 404，所有设备显示一致。 */
@font-face{
  font-family:'AlibabaPuHuiTi';
  src:url('../assets/fonts/alibaba.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;  /* 区间声明：UI 以 500(Medium) 请求时走本字库合成 */
}
/* 缺字补丁（P3）：alibaba.woff2 是阿里巴巴普惠体 Regular 的 1870 字子集，
 * 游戏全工程文本（剧情/战略/UI/数据）共用到 2768 个不同字符，其中约 900 个不在主子集内
 * （市/购/店/巡/灾/赏/▶▼… 等），直接 fallback 到系统字体导致同一行字重不齐、跨设备不一致。
 * 本补丁从【阿里巴巴普惠体 Regular】同款字型提取缺字（与主字体视觉一致，不混用 Noto），
 * 插在 Alibaba 之后作第二顺位；unicode-range 限定码位，避免抢走主字体已有字形。 */
@font-face{
  font-family:'AlibabaPatch';
  src:url('../assets/fonts/alibaba-patch.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;  /* 区间声明：与主字体一致，保证缺字补丁也随 500 字重 */
  unicode-range:U+00A0,U+00A7,U+00B0-U+00B2,U+00BD,U+00D7,U+00F7,U+0394,U+03A3,U+03C1,U+2013,U+2039,U+203B,U+2080,U+2161,U+2190-U+2193,U+2208,U+2212,U+221D,U+2229-U+222A,U+2248,U+2260-U+2261,U+2264-U+2265,U+2460-U+2469,U+2500,U+2502,U+250C,U+2510,U+25A0,U+25B2,U+25BC,U+25C6-U+25C7,U+25CB,U+25CF,U+2605-U+2606,U+3014-U+3015,U+4E1D,U+4E27,U+4E32,U+4E43,U+4E4C,U+4E4F,U+4E59,U+4E88,U+4E95,U+4EA6,U+4EC6-U+4EC7,U+4ED9,U+4EEC,U+4EFF,U+4F1D,U+4F38,U+4F6F,U+4F73,U+4FB5,U+4FC3,U+4FD7-U+4FD8,U+4FDE,U+4FE9,U+4FEF,U+4FF1,U+4FFA,U+503A,U+5076,U+5095,U+50A8,U+50AC,U+50B2,U+5101,U+5156,U+5195,U+5197,U+51A4,U+51B0,U+51B7,U+51BB,U+51CB,U+51DD,U+51E1,U+51EF,U+51F9,U+5265,U+526A,U+5272,U+529E,U+52A1,U+52A3,U+52D8,U+52E4,U+52FF-U+5300,U+5339,U+5348,U+5356,U+535A,U+5370,U+5382,U+5384,U+53C9,U+53E8,U+53EC,U+53F9,U+5410,U+5413,U+5417,U+5427,U+5439,U+543B-U+543C,U+5446,U+5462,U+5472,U+549A,U+54AC,U+54B3,U+54C8-U+54C9,U+54E5,U+54E8,U+54FC,U+5507,U+5543-U+5544,U+554A,U+5550,U+556A,U+5578,U+5582-U+5583,U+558A,U+5598,U+559C,U+55A7,U+55B7,U+55D3,U+55E3,U+5634,U+5636,U+5654,U+56DA,U+56F0,U+5703,U+5708,U+573E,U+5740,U+574D,U+575E-U+5760,U+5768,U+5782-U+5783,U+57A6,U+57AE,U+57C3,U+57CB,U+5802,U+582A,U+5835,U+584C,U+5851,U+5893,U+5899,U+589F,U+591C,U+592E-U+592F,U+5938-U+5939,U+5948,U+5951,U+5954,U+5992,U+5A03,U+5A18,U+5A31,U+5A49,U+5A7F,U+5A9A,U+5AC2,U+5B69,U+5B87,U+5B8B,U+5B8F,U+5BA0-U+5BA1,U+5BB0,U+5BC4,U+5BC6,U+5BD2,U+5BDD-U+5BDE,U+5BE1,U+5BE8,U+5C16,U+5C18,U+5C1D,U+5C24,U+5C2C,U+5C34,U+5C48,U+5C4A,U+5C82,U+5C98,U+5CB3,U+5CB8,U+5CD9,U+5CF0,U+5D69,U+5DB7,U+5DC5,U+5DCD,U+5DE1-U+5DE2,U+5DE9,U+5E02,U+5E16,U+5E1B,U+5E3D,U+5E42,U+5E61,U+5E78,U+5E7B,U+5E84,U+5E97,U+5E99,U+5E9C,U+5EA7,U+5EB5-U+5EB6,U+5ECA,U+5ED3,U+5F0A,U+5F26,U+5F3C,U+5F40,U+5F69,U+5F70,U+5F79,U+5F8A,U+5F92,U+5F95,U+5F98-U+5F99,U+5FC6,U+5FD8,U+5FF5,U+6002,U+6012,U+6015,U+6025,U+6043,U+6050,U+6068,U+606A,U+6084,U+608D,U+6094,U+60A0,U+60A3,U+60A6,U+60CA,U+60D1,U+60DF-U+60E0,U+60E6,U+60E8,U+60EF-U+60F0,U+60F6,U+6108,U+6127,U+6155,U+6168,U+6170,U+6177,U+61BE,U+61C2,U+61D2,U+623F,U+6241,U+6249,U+624E,U+6252,U+626D,U+626F-U+6270,U+6273,U+6279,U+627C,U+627E,U+6284,U+6293,U+629A,U+62B1,U+62B5,U+62BC,U+62C2,U+62C4,U+62C6-U+62C7,U+62CC,U+62D3,U+62E2,U+62E7-U+62E8,U+62F1,U+62F3,U+62F7,U+62FD-U+62FE,U+6316,U+6323,U+633A,U+6346,U+6361,U+638F-U+6390,U+63A0,U+63A9-U+63AA,U+63BA,U+63E1,U+63ED,U+63F4,U+63FD,U+641C,U+642C,U+6467,U+6469,U+6492,U+6495,U+64C2,U+64C5,U+64E6,U+64FA,U+6512,U+654F,U+6559,U+655B,U+655D,U+65AF,U+65BD,U+65C1,U+65C5,U+65D2,U+65F1,U+65F7,U+6614,U+6620,U+6642,U+6655-U+6656,U+6666,U+6674,U+6676,U+6682,U+6687,U+6696,U+6715,U+6717,U+673D,U+6746,U+6751,U+675C,U+6760,U+6775,U+679A,U+67A2,U+67D4,U+67DC,U+67E9,U+67EF,U+680B,U+6811,U+6842,U+6869,U+6876,U+6893,U+6897,U+68A2,U+68A6,U+68B3,U+68CB,U+68D2,U+68EE,U+690D,U+695A,U+699C,U+69A8,U+69DF,U+6A59,U+6B23,U+6B3A,U+6B6A,U+6B7C,U+6B92,U+6BB4,U+6BBF,U+6BC1,U+6BD9,U+6BEB,U+6C11,U+6C1B,U+6C41,U+6C47,U+6C64,U+6C70,U+6C74,U+6C83,U+6CA6,U+6CB8,U+6CBC,U+6CDB,U+6CDE,U+6CE1,U+6CE5,U+6CFC-U+6CFD,U+6D01,U+6D17,U+6D3D,U+6D45,U+6D69,U+6D78,U+6D82,U+6D89,U+6D8C,U+6DA7,U+6DA9-U+6DAA,U+6DB8,U+6DC6,U+6DD6,U+6DD8,U+6DDD,U+6DE1,U+6DFB,U+6E10,U+6E1A-U+6E1B,U+6E1D,U+6E2D,U+6E34,U+6E5B,U+6E7F,U+6EAF,U+6ED4,U+6EE5,U+6EE8-U+6EE9,U+6EF4,U+6F20,U+6F2B,U+6F58,U+6F5C,U+6F84,U+6FD2,U+6FE1,U+704C,U+706F,U+707C,U+707E,U+7089,U+708E,U+7092,U+70AC-U+70AD,U+70D8,U+70DD,U+70E9,U+70EC-U+70ED,U+70FD,U+7109,U+7115,U+7119,U+7168,U+7184,U+7199,U+71C3,U+71D5,U+71E5,U+7237,U+7239,U+7259,U+725B,U+7262,U+7272,U+727A,U+7284,U+7292,U+72AF,U+72C2,U+72F1,U+730E,U+731C,U+73CD,U+73E0,U+7403,U+7410,U+7422,U+742E,U+7436,U+74E6,U+752B,U+7533,U+7537,U+7554,U+756A,U+7586,U+758F,U+75A0,U+75AE-U+75AF,U+75BD,U+75C7,U+75D5,U+75DB,U+7626,U+7634,U+7696,U+76C8,U+76D1-U+76D2,U+76EF,U+76F2,U+7701,U+7720,U+7726,U+7736,U+7741,U+7762,U+7768,U+777F,U+778E,U+7792,U+77A5,U+77B0,U+77EB,U+7814,U+781A,U+783A,U+788D-U+788E,U+7891,U+78B0,U+78F7,U+793C,U+7940,U+795A,U+795F,U+7968,U+7978,U+797A,U+79BE,U+79C1,U+79C9,U+79D1,U+79D8,U+79E3,U+7A0D-U+7A0E,U+7A1A,U+7A3D,U+7A3F,U+7A46,U+7A76-U+7A77,U+7A83,U+7A9D,U+7A9F,U+7AA5,U+7AD9,U+7ADE,U+7AE0,U+7AFF,U+7B03,U+7B28,U+7B3C,U+7B51,U+7B5B,U+7BE1,U+7C73,U+7C92,U+7C98,U+7C9C,U+7CAE,U+7CB1-U+7CB2,U+7CB9,U+7D0A,U+7D27,U+7D2B,U+7DF4,U+7EA0,U+7EB3,U+7EB9,U+7EBD,U+7EC7,U+7ECA,U+7EDC,U+7EEA,U+7EF5-U+7EF6,U+7EF8,U+7F0E,U+7F14-U+7F15,U+7F1A,U+7F2A,U+7F34,U+7F55,U+7F62,U+7F69,U+7F81,U+7F8C,U+8010,U+8026,U+803B,U+806A,U+8086,U+80A1,U+80A4,U+80C0-U+80C1,U+80DE,U+80E4,U+80EB,U+80F8,U+8106,U+8109-U+810A,U+8129,U+8150,U+8154,U+8170,U+817B,U+8180,U+818A,U+818F,U+819D,U+81A8,U+81FB,U+8206,U+821B,U+821E-U+821F,U+8239,U+8273,U+827A,U+8292,U+82A6,U+82C7,U+82D7,U+8328,U+8361,U+8363,U+8367,U+836F,U+83AB,U+83F2,U+840D-U+840E,U+846B-U+846C,U+84AF,U+84B8,U+8513,U+85A8,U+864F,U+8651,U+8654,U+865E,U+86C9,U+86CB,U+86F0,U+8702,U+8737,U+8757,U+879F,U+8822,U+8845,U+8854,U+8877,U+887D,U+888B,U+88C2,U+88D5,U+88E4,U+88E8,U+892A,U+89C2,U+89C5,U+8A13,U+8A3B,U+8A93,U+8AF8,U+8BAF,U+8BB2,U+8BBF,U+8BC4,U+8BD1,U+8BD9,U+8BE1,U+8BF1,U+8C0D-U+8C0E,U+8C10,U+8C23,U+8C2C,U+8C31,U+8C46,U+8C6A-U+8C6B,U+8C8C,U+8D1D-U+8D1E,U+8D22,U+8D26,U+8D29-U+8D2B,U+8D2D,U+8D30,U+8D35,U+8D38,U+8D4B-U+8D4C,U+8D4F,U+8D60,U+8D74,U+8D81,U+8DC3,U+8DEA,U+8DF5,U+8E0F,U+8E22,U+8E2A,U+8E39,U+8E44,U+8E72,U+8E81,U+8F70,U+8F89,U+8F8E,U+8F96,U+8F98,U+8FB1,U+8FED,U+8FF9,U+9022,U+9074,U+90A2,U+90AA,U+90BB,U+90C1,U+90CA,U+90D1,U+914B,U+916C,U+9177,U+9189,U+9192,U+9274,U+93D6,U+949D-U+949E,U+94A5,U+94B3,U+94BB,U+94C3,U+952D,U+95F2,U+95F7,U+95F9,U+95FB,U+95FF,U+9601,U+9605,U+9608,U+960E,U+9614,U+9616,U+9631,U+963B,U+964B-U+964C,U+965F,U+9668,U+966A,U+9694,U+9698-U+9699,U+969C,U+96B6,U+96CC,U+96D5,U+96D9,U+9706,U+9716,U+971C,U+975B-U+975C,U+9774,U+978B,U+978D,U+97AD,U+97F5,U+987D,U+9882,U+9897,U+98A0,U+98A4,U+98D9,U+996D-U+996E,U+9971,U+997F,U+9986,U+9999,U+99AC,U+9A7C,U+9A7E,U+9A84,U+9A9A,U+9AA4-U+9AA5,U+9AEF,U+9AFB,U+9B42,U+9B44,U+9B54,U+9C8D,U+9C9C,U+9CA8,U+9E21,U+9EBE,U+9EEF,U+9F0E,U+9F84,U+FF0B,U+FF1E,U+FF5C;
}

:root{
  --font-cjk:'AlibabaPuHuiTi','AlibabaPatch','Microsoft JhengHei','微軟正黑體',
    'PingFang TC','Heiti TC','Noto Sans TC','Source Han Sans TC',
    'MingLiU','PMingLiU','Zpix','Fusion Pixel','SimSun',monospace;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html,body{
  height:100%; background:#000; overflow:hidden; overscroll-behavior:none;
  font-family:var(--font-cjk); font-weight:500;
  -webkit-tap-highlight-color:transparent; user-select:none;
}

/* ---------- 关闭一切文字平滑 ----------
 * 只写在 html,body 上是不够的：#fc-screen 带 transform:scale()，
 * Safari / WebKit 会把它提成独立合成层并重新栅格化，层内的继承属性
 * 在部分版本会被重置回默认的 subpixel-antialiased。这里对 #fc-screen
 * 及其所有后代显式钉死，加 !important 防被组件级样式覆盖。
 *
 * 诚实说明（不粉饰）：-webkit-font-smoothing 在 Chrome/Safari 里只对 macOS 生效，
 * iOS Safari 与 Android WebView 会忽略它——那两个平台的文字锐利度实际上由
 * 「缩放倍率是否让字号落在整数像素上」决定，所以真正的关键改动在 touch.js
 * 的 fit()：把倍率吸附到 0.25 的整数倍（12px 基准字号 ×0.25 恒为整数）。 */
#fc-screen, #fc-screen *{
  -webkit-font-smoothing:none !important;
  -moz-osx-font-smoothing:unset !important;
  font-smooth:never !important;
  text-rendering:optimizeSpeed;
  font-synthesis:none;
  font-kerning:none;
  font-variant-ligatures:none;
  -webkit-text-size-adjust:none;
  text-size-adjust:none;
}
img,canvas{ image-rendering:pixelated; image-rendering:crisp-edges; }

#cabinet{ height:100%; display:flex; flex-direction:column; align-items:center;
  justify-content:flex-start; padding:var(--safe-top) 0; position:relative; z-index:1; }
/* 内容（#screen-wrap / #pad / #toolbar）始终压在皮肤装饰层之上，避免外壳皮肤盖住游戏或按钮 */
/* 网页版独占「全屏」按钮：默认隐藏（.web-only），仅网页端 JS 解除隐藏；APK 不显示。 */
.web-only{ display:none !important; }
/* 平台分级可见性（v2.0.2）：
 *  APK(html.android)        ：放大/缩小/全屏 均隐藏；横/竖 走原生桥保留（规则在下方 android 段）。
 *  移动端浏览器(html.mobile)：隐藏 横/竖（lock 无法强制转屏，横竖交给设备）；全屏 保持 .web-only 隐藏（与 APK 同）。
 *  电脑浏览器(html.desktop)  ：保留 全屏；隐藏 横/竖 + 隐藏全部主题字标(掌机 LOGO)。 */
html.mobile #tb-fullscreen { display:none !important; }
html.desktop #tb-orient,
html.mobile #tb-orient     { display:none !important; }
/* v2.0.30：唤醒（保持屏幕常亮）仅 APK 有；网页版（mobile/desktop）隐藏 */
html.desktop #tb-wake,
html.mobile #tb-wake       { display:none !important; }
html.desktop body.th-md::before,
html.desktop body.th-fc::before,
html.desktop body.th-gba::before,
html.desktop body.th-gb::before { display:none; }
/* 系统级全屏（视频式）：进入后内容垂直居中、纯黑底，整体随 --scale 等比放大填满视口 */
#cabinet:fullscreen, #cabinet:-webkit-full-screen{ justify-content:center; background:#000; }

/* ===========================================================================
 *  主题外壳皮肤（b0.6.40③ / b0.6.40④）：MD / FC / GBA / GB 四套"掌上游戏机全屏皮肤"
 *  仅作用于 body 背景与 body::before/::after 装饰层；装饰层 z-index:0 垫在 #cabinet(z-index:1)
 *  之下，而 #screen-wrap / #pad / #toolbar 均为不透明上层，自然遮挡装饰层——绝不与按钮/工具栏重叠。
 *  装饰层 pointer-events:none，亦不拦截触摸。内容从顶部排布（无顶部空白），故装饰只落在底部空白区，
 *  不会压到游戏框。品牌字样为风格化文字（非官方 logo 资源，精确 logo 另配图）。
 * ======================================================================== */
body.th-md::before, body.th-fc::before, body.th-gba::before, body.th-gb::before,
body.th-md::after,  body.th-fc::after,  body.th-gba::after,  body.th-gb::after {
  position:fixed; pointer-events:none; z-index:0; content:"";
}

/* ---- MD（世嘉 Mega Drive / Genesis 风，深灰黑壳 + 红蓝点缀）---- */
body.th-md { background: radial-gradient(130% 90% at 50% -10%, #4a4a4a 0%, #1d1d1d 50%, #080808 100%); }
body.th-md::before { content:""; left:0; right:0; margin:0 auto; top:calc(var(--safe-top) + 240px * var(--scale) + var(--label-gap)); bottom:auto; z-index:0;
  width:62px; height:20px; background:url('../assets/fc/logo-sega.svg') center/contain no-repeat; opacity:.95;
  /* b0.6.45②：品牌字样在 #fc-screen 外，补 transform 使其随游戏外框(自动适配)缩放 */
  transform:scale(var(--scale)); }

/* ---- FC（任天堂 Family Computer 风：深红机壳）----
 * 深红外壳由 body 背景承担；"Nintendo" 字标(::before)落在游戏框下方，随框(自动适配)缩放。 */
body.th-fc { background: radial-gradient(130% 90% at 50% -10%, #9e1b1b 0%, #6a1212 45%, #380909 100%); }
body.th-fc::before { content:""; left:0; right:0; margin:0 auto; top:calc(var(--safe-top) + 240px * var(--scale) + var(--label-gap)); bottom:auto; z-index:1;
  width:67px; height:17px; background:url('../assets/fc/logo-nintendo.svg') center/contain no-repeat; opacity:.96;
  transform:scale(var(--scale)); }

/* ---- GBA（Game Boy Advance SP 风，经典靛紫壳）---- */
body.th-gba { background: radial-gradient(130% 90% at 50% -10%, #6b5b95 0%, #3a2f5c 45%, #1c1630 100%); }
body.th-gba::before { content:""; left:0; right:0; margin:0 auto; top:calc(var(--safe-top) + 240px * var(--scale) + var(--label-gap)); bottom:auto; z-index:0;
  width:108px; height:15px; background:url('../assets/fc/logo-gba.svg') center/contain no-repeat; opacity:.95;
  transform:scale(var(--scale)); }
body.th-gba::after { right:8px; bottom:6px; width:44px; height:44px;
  background: radial-gradient(circle, #1c1630 0 1.5px, transparent 2px) 0 0 / 8px 8px; opacity:.5; }

/* ---- GB（Game Boy DMG 风：鲜艳黄机壳 + 深灰拟物按钮）---- */
body.th-gb { background: radial-gradient(130% 90% at 50% -10%, #ffe14d 0%, #f2c200 45%, #b8860b 100%); }
body.th-gb::before { content:""; left:0; right:0; margin:0 auto; top:calc(var(--safe-top) + 240px * var(--scale) + var(--label-gap)); bottom:auto; z-index:0;
  width:73px; height:14px; background:url('../assets/fc/logo-gameboy.svg') center/contain no-repeat; opacity:.95;
  transform:scale(var(--scale)); }

/* v2.1.67：APK 横屏时隐藏底部品牌字样（游戏框已铺满整屏高度，无需再显示机壳 logo）。
 * 仅作用于 html.android（APK 环境）+ 横屏；竖屏与移动网页横屏保持原样显示。 */
@media (orientation:landscape){
  html.android body.th-md::before, html.android body.th-fc::before,
  html.android body.th-gba::before, html.android body.th-gb::before { display:none; }
}

/* v2.1.71：横屏（移动端 / APK）去掉 28px 刘海留白（横屏刘海在左/右，顶部无需安全区）。
 * v2.1.72：改为上下各留 8px = 机身唇沿宽度（#screen-wrap 的 box-shadow 0 0 0 5px 灰 + 0 0 0 8px 黑）；
 * 配合 fit() 的 sh=(innerHeight-16)/240 → 240×scale 的框上下各内缩 8px，令「灰边 + 黑边」整圈露出、
 * 不被屏幕上下边裁掉（用户 2026-09-16：整体再缩小一点点、露出那圈灰边和黑边）。竖屏仍保留 28px 刘海安全区。
 * 主题字标 top 公式同样含 --safe-top，随之上移 8px、仍对齐框底。 */
@media (orientation:landscape){
  /* v2.2.18f：横屏顶部安全区降到 8px（= 机身唇沿宽），令 240×scale 的框能以 8px 唇沿贴满整屏高度。
   * 原来只给 android/mobile；现补上桌面网页版 desktop——网页版横屏也要像 APK 一样铺满高度。
   * 注意必须带平台类：:root 的 --safe-top 特指性(0,1,0) 高于裸 html(0,0,1)，须用 html.xxx(0,1,1) 才压得住。 */
  html.android, html.mobile, html.desktop{ --safe-top:8px; }
}

#screen-wrap{ width:calc(256px * var(--scale)); height:calc(240px * var(--scale));
  position:relative; flex:0 0 auto;
  /* b0.6.40④：去掉投影，改为"屏幕凹槽边框"——外圈是机身唇沿(bezel)，
   * 屏幕本体(#fc-screen)用 inset 阴影做出"陷入机壳"的凹槽感。所有主题通用。 */
  box-shadow:0 0 0 5px #2b2b2b, 0 0 0 8px #0c0c0c; }

#fc-screen{
  width:256px; height:240px; position:absolute; top:0; left:0;
  transform:scale(var(--scale)); transform-origin:top left;
  background:#000; overflow:hidden; font-size:12px; line-height:12px;
  color:var(--c-white);
  /* 屏幕凹槽：inset 阴影让画面像陷入机壳的凹坑，配合 #screen-wrap 的唇沿 = 凹槽边框 */
  box-shadow:inset 0 0 0 2px #050505, inset 0 3px 12px rgba(0,0,0,.78);
}

.scene{ position:absolute; inset:0; display:none; }
.scene.on{ display:block; }

/* ---------- FC 窗口：白框黑底 + 四角切边 ---------- */
.win{
  position:absolute; background:#000; color:var(--c-white);
  border:2px solid var(--c-white); padding:3px;
  clip-path:polygon(3px 0,calc(100% - 3px) 0,100% 3px,100% calc(100% - 3px),
    calc(100% - 3px) 100%,3px 100%,0 calc(100% - 3px),0 3px);
}
.win.solid{ background:#000; }
.hidden{ display:none !important; }

/* 光标：原作的三角形选择箭头 */
.mi{ position:relative; padding-left:14px; height:13px; line-height:13px; cursor:pointer;
  white-space:nowrap; overflow:hidden; }
/* v2.1.68 #144/#151：选中光标 ▶ 由 ::before 单独绘制（左侧绝对定位、不占排版宽度），
 * 故选中项与非选中项文字都从同一 padding-left 起排、天然对齐；并把缩进由 9px 提到 14px，
 * 让光标与文字之间保留约 7px 安全距离（修掉"光标贴名字太近"）。菜单名本身不再内嵌 ▶ 字符，
 * 避免与选中态光标视觉重复。 */
.mi.sel::before{ content:'▶'; position:absolute; left:2px; top:0; width:10px; text-align:left; color:var(--c-white);
  animation:blink .6s steps(2,end) infinite; }
.mi.dim{ color:var(--c-dgray); }
@keyframes blink{ 0%,60%{opacity:1} 61%,100%{opacity:.35} }

/* ENG-UI-217 #9（修正）：武将管理信息框（组团buff框 / 武将资料框）光标选中态——
 * 作废描边(outline)+慢闪烁，改为仅蓝色边框。蓝色与「选中武将」高亮蓝一致
 * （.r-row.sel 的 --c-dblue=#0000bc）。信息框本身是 .win（已有 2px 边框），
 * 仅改边框色、宽度不变，故无布局偏移。 */
.info-sel{ border:2px solid var(--c-dblue); }

/* ========================= 标题 ========================= */
#sc-title{
  background-color:#000;
}
/* 主标题图：像素图，改走 <img> 标签 + 整数倍 transform 放大（与人物立绘同一套
 * 无损管线）。原 title.jpg 是有损格式，硬边被块效应弄脏，故转存为无损 PNG。 */
.title-img{ position:absolute; top:0; left:0; width:256px; height:auto;
  image-rendering:pixelated; image-rendering:crisp-edges; z-index:0; }
/* 文字大标题已替换为像素图，隐藏旧文字版 */
.title-art{ display:none; }
/* 向上挪一个字高(12px)：118→106，给标题下方留更多呼吸感 */
.title-menu{ top:106px; left:78px; width:100px; z-index:3; background:rgba(0,0,0,.72);
  display:flex; flex-direction:column; align-items:center; }
/* 主菜单选项文字在菜单框内居中；选中箭头紧贴文字左侧、不计入居中，间距略大于原 9px */
.title-menu .mi{ padding-left:0; text-align:center; overflow:visible; }
.title-menu .mi.sel::before{ left:auto; right:100%; margin-right:2px; }
/* 标题底部的英雄列阵——刘关张赵葛，用复刻版原版立绘 */
.title-heroes{ position:absolute; bottom:20px; left:0; width:256px; z-index:2;
  display:flex; justify-content:center; align-items:flex-end; gap:4px; pointer-events:none; }
.title-heroes .gen-sprite{ width:auto; height:auto; max-height:40px; max-width:38px;
  image-rendering:pixelated; filter:drop-shadow(1px 2px 0 rgba(0,0,0,.75)); }
/* 最左/最右武将左右镜像（CSS 翻面，不动布局，仍置底对齐） */
.title-heroes .gen-sprite.mirror{ transform:scaleX(-1); }
/* 人物下层叠放的随机战斗背景：置底对齐、位于立绘之后(z-index 低于 .title-heroes 的 2) */
.title-bg{ position:absolute; bottom:20px; left:0; width:100%; height:56px; z-index:1;
  overflow:hidden; pointer-events:none; }
.title-bg img{ width:100%; height:100%; object-fit:cover; object-position:center bottom;
  image-rendering:pixelated; opacity:.5; }
.t-copy{ position:absolute; bottom:4px; width:256px; text-align:center; z-index:4;
  /* ④ 外框下方文字标：基准 12px，不写 font-size 公式。
   * .t-copy 位于 #fc-screen 内，父级已 transform:scale(--scale*--zoom) 随框 1:1 缩放（含 --zoom），
   * 故此处直接用 12px，撤掉上一步误加的 calc(12px*--scale*--zoom) 双重缩放回归。 */
  font-size:12px; color:var(--c-dgray); transform:scale(.75); text-shadow:1px 1px 0 #000; }
.t-ver{ position:absolute; bottom:-10px; width:256px; text-align:center; z-index:4;
  font-size:12px; color:#6a8a6a; transform:scale(.7); letter-spacing:2px; text-shadow:1px 1px 0 #000; }

/* ========================= 选将 ========================= */
.w-tabs{ top:2px; left:2px; width:252px; height:18px; padding:1px 2px;
  display:flex; gap:2px; align-items:center; }
.k-tab{ flex:1; text-align:center; height:12px; line-height:12px; cursor:pointer;
  color:var(--c-dgray); }
.k-tab .k-n{ font-weight:normal; }
.k-tab.on{ color:#000; background:var(--c-white); }
.k-tab.on.shu{ background:var(--c-lgreen); }
.k-tab.on.wei{ background:var(--c-lblue); }
.k-tab.on.wu{ background:var(--c-pink); color:var(--c-white); }
.k-tab.on.qun{ background:var(--c-orange); }

.w-roster{ top:22px; left:2px; width:130px; height:152px; padding:2px; }  /* v2.2.15b8：height 148→152，下沿 170→174 与组团buff框下沿(174)对齐 */
.roster-head{ display:flex; font-size:12px; color:var(--c-orange); height:12px; margin-top:-1px;  /* v2.2.15b11：表头字上移 1px */
  border-bottom:1px solid var(--c-dgray); margin-bottom:1px; }
/* 表头与名单共用同一左缩进（10px = 光标位），「武将」列与下方人名严格左对齐；
 * 「武/智/速」列标题居中于各自数据列之上（数据本身仍右对齐，位置不变）。 */
.roster-head span:nth-child(1){ width:50px; padding-left:10px; text-align:left; }
.roster-head span{ width:22px; text-align:center; }
.roster-body{ height:121px; overflow-y:auto; touch-action:pan-y; }
/* 全局自定义滚动条：与武将管理名册列表一致（3px 暗色），禁用浏览器原生滚动条。
 * 所有带 overflow 的面板（名册/装备/合成/战况/资料/图鉴…）统一走这套，不再出现原生条。 */
::-webkit-scrollbar{ width:3px; height:3px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--c-dgray); border-radius:2px; }
* { scrollbar-width:thin; scrollbar-color:var(--c-dgray) transparent; }
.r-row{ display:flex; height:13px; line-height:13px; cursor:pointer; position:relative; }
/* v2.0.56 rev2：.rn 改为内部 flex，名字 .rn-txt 可截断，墓碑 .tomb 紧贴名字末尾。
 * 关键约束：墓碑必须呆在 50px 名字列内部，不增加行宽，因此绝不挤压右侧三围。 */
.r-row .rn{ display:flex; align-items:center; gap:1px; width:50px; padding-left:10px; overflow:hidden; }
.r-row .rn-txt{ flex:1 1 auto; overflow:hidden; white-space:nowrap; }
/* v2.0.65：名字超宽不再跑马灯，改为字宽压缩（左对齐 + scaleX 压瘦），
 * 让字变瘦长以避免被右侧黄点/墓碑遮挡，保持静态可读。 */
.r-row .rn-txt.compress{ transform: scaleX(0.82); transform-origin: left center; }
/* v2.1.69 #5：三字武将名 + 墓碑——旧版用 scaleX(0.7) 纯视觉压瘦，不改变布局宽度，
 * 三字(~36px)+墓碑(~10px)=46px > 50-10 padding=40px 可用宽，故第三字被 overflow:hidden 裁掉。
 * 改为真实缩字号(9px)：三字≈27px + 墓碑≈10px = 37px ≤ 40px，留 3px 余量，第三字完整可见。
 * .compress 仍用 scaleX(0.82) 兜长名（无墓碑），二者不共存。 */
.r-row .rn-txt.rn-narrow{ font-size:9px; transform:none; min-width:0; }
.r-row span.v{ width:22px; text-align:right; color:var(--c-gray); font-size:9px; line-height:13px; }  /* v2.2.18 R8：三围数值缩两号(12→9)分隔；buff 增益改由 JS 内联阵营色，不再走 .eq-bonus */
.r-row.sel{ background:var(--c-dblue); }
.r-row.sel::before{ content:'▶'; position:absolute; left:0; width:10px; text-align:center; }
.r-row.taken{ color:var(--c-dgray); }
/* 墓碑：紧跟 .rn-txt，占自身宽；top:1px 对齐名字基线；grayscale 保持肃穆。
 * 注意：墓碑必须挂在 .rn 内部（见 select.js 渲染），才能不挤三围。 */
.r-row .tomb{ flex:0 0 auto; position:relative; top:1px; font-size:10px; color:var(--c-dgray); filter:grayscale(1); }
/* v2.1.12 历史墓碑：史载已殁者半透明（50%），与「本线剧情阵亡」的剧情碑（全不透明）视觉区分。 */
.r-row .tomb.tomb-hist{ opacity:.5; }
.roster-page{ height:12px; line-height:12px; color:var(--c-dgray);
  font-size:9px; white-space:nowrap; overflow:hidden; display:flex; align-items:center; justify-content:center; }
/* 名册底部提示：『1/N 阵营』固定(.rp-fixed 黑底遮罩)，后方 B 键提示溢出时横向滚动（复用装备行 eq-marquee）。
 * 默认整体居中（justify-content:center）；仅整行溢出时切 .overflow（左对齐 + 提示字区撑满滚动），
 * 最左『1/N 阵营』钉死在最左不溢出，右侧字开始滚。 */
.roster-page .rp-fixed{ flex:0 0 auto; position:relative; z-index:2; background:#000; padding-right:4px; }
.roster-page .rp-scroll{ flex:0 0 auto; min-width:0; white-space:nowrap; }
.roster-page .rp-inner{ display:inline-block; white-space:nowrap; will-change:transform; }
.roster-page.overflow{ justify-content:flex-start; }
.roster-page.overflow .rp-scroll{ flex:1 1 auto; overflow:hidden; }
.roster-page .rp-scroll.marquee .rp-inner{ animation: eq-marquee 7s linear infinite; }

.w-detail{ top:22px; left:134px; width:120px; height:104px; padding:2px; font-size:9px; }  /* v2.2.15b9：base 9px，资料框内除名字(12px)外文字统一 9px */
.d-name{ color:var(--c-orange); }
.d-line{ height:12px; line-height:12px; display:flex; justify-content:space-between; }
.d-line .lb{ color:var(--c-gray); }
.d-est{ color:var(--c-red); }
.d-tags{ color:var(--c-lblue); font-size:9px; line-height:10px; height:10px;
  white-space:nowrap; overflow:hidden; margin:0 0 1px; }
/* v2.0.64：个性签名 = 蓝字（用户指定基底，与 d-tags 同款亮蓝）。
 * 删掉旧版「签」灰标签后，签名只通过这一行蓝字呈现，单一系统。 */
.d-sign{ color:var(--c-lblue); font-size:9px; line-height:11px; height:11px;
  white-space:nowrap; overflow:hidden; margin:0 0 2px; }
/* 个性签名（武将资料框 .d-tags）溢出时左右滚动，复用 .d-eq-scroll 的 eq-marquee 关键帧，
 * 效果与装备文字一致；.d-sign-inner 内层承载滚动，容器 overflow:hidden 裁切。 */
.d-tags .d-sign-inner{ display:inline-block; white-space:nowrap; will-change:transform; }
.d-tags.marquee .d-sign-inner{ animation: eq-marquee 7s linear infinite; }
/* —— 选将详情：左上头像 + 名字/阵营色，下方 7 行信息，名字 12px 其余 9px —— */
.w-detail .d-top{ display:flex; gap:3px; height:28px; margin-bottom:0; align-items:flex-start; }
.w-detail .d-face{ width:28px; height:28px; flex:0 0 auto; box-sizing:border-box;
  object-fit:cover; object-position:center top; image-rendering:pixelated;
  border:1px solid var(--c-white); background:#000; }
.w-detail .d-noface{ background:#111; }
.w-detail .d-id{ flex:1; min-width:0; overflow:hidden; }
.w-detail .d-id .d-name{ height:12px; line-height:12px; font-size:12px; color:var(--c-white);  /* v2.2.18 R8：资料框武将名改白 */
  white-space:nowrap; overflow:hidden; }
.w-detail .d-k{ height:10px; line-height:10px; font-size:9px; white-space:nowrap; overflow:hidden;
  display:flex; justify-content:space-between; }
.w-detail .d-k .d-w{ flex:0 0 auto; }
.w-detail .d-name{ height:12px; line-height:12px; font-size:12px; color:var(--c-white);  /* v2.2.18 R8：资料框武将名改白 */
  white-space:nowrap; overflow:hidden; }
.w-detail .d-line{ height:10px; line-height:10px; font-size:9px; display:flex; gap:4px;
  margin-bottom:2px; white-space:nowrap; overflow:hidden; }
.w-detail .d-line .lb{ color:var(--c-gray); }
.d-abis{ display:flex; gap:4px; height:10px; line-height:10px; font-size:9px;
  margin:0 0 2px; white-space:nowrap; overflow:hidden; }
.d-equip{ display:flex; gap:3px; height:10px; line-height:10px; font-size:9px;
  position:relative; margin-top:0; margin-bottom:2px; }
/* 「装备」标签遮罩保护：不透明黑底 + 抬升层级，滚动文字始终压在其下、不被盖住 */
.d-equip .lb{ color:var(--c-gray); flex:0 0 auto; position:relative; z-index:2; background:#000; }
.d-eq-scroll{ flex:1 1 auto; min-width:0; overflow:hidden; white-space:nowrap;
  /* 不再使用左侧渐隐遮罩：滚动文字滚到不透明黑底「装备」标签下方时被自然盖住（.d-equip .lb 黑底 + 抬升层级），无需淡出 */ }
.d-eq-scroll i{ font-style:normal; padding-right:6px; }
/* 跑马灯动画作用于内部包裹层（.d-eq-inner），容器本身固定不动；
 * 滚动内容被容器 overflow:hidden 裁切，绝不会越界压到左侧「装备」标签。 */
.d-eq-inner{ display:inline-block; white-space:nowrap; will-change:transform; }
/* 装备专用：自有关键帧 eq-marquee（整条离场 + 停顿 2s），不复用共用 marquee（依赖 JS 注入 --shift，装备未设） */
.d-eq-scroll.marquee .d-eq-inner{ animation: eq-marquee 7s linear infinite; }
.d-bonus{ font-style:normal; color:var(--c-ygreen); font-size:9px;
  transform:scale(.85); transform-origin:left center; }


.w-buffs{ top:128px; left:134px; width:120px; height:46px; padding:2px 3px; overflow:hidden; }  /* v2.2.15b7：top 124→128，随资料框增高下移、底沿 170→174，与下方 w-party(176) 留 2px */
.bf-t{ color:var(--c-orange); font-size:9px; height:10px; line-height:10px; white-space:nowrap; overflow:visible; }
.bf-i{ font-size:9px; height:10px; line-height:10px; color:var(--c-ygreen); white-space:nowrap; overflow:visible; }
.bf-i.neg{ color:var(--c-lred); }

.w-party{ top:176px; left:2px; width:252px; height:30px; padding:2px;
  display:flex; flex-direction:column; justify-content:flex-start; }  /* v2.2.15b7：top 172→176，随 buff 框下移、与 w-buffs 底(174) 留 2px */
/* v2.1.0 影武者难度自选窗：与 w-buffs 同款几何，置于其右侧空白区（编成界面右下角）。
 * 仅终局启用时由 select.js 移除 .hidden 显示。 */
.w-shadow-diff{ top:120px; left:134px; width:120px; height:50px; padding:2px 3px; overflow:hidden; }
.w-shadow-diff.hidden{ display:none; }
/* v2.1.0 孤狼系统进度：定位在难度窗下方，纯展示（无点击交互）。
 * 复用 .w-shadow-diff 的橙色调但改用青色区分「在野」数，强调动态。 */
.w-wanderer{ top:172px; left:134px; width:120px; padding:2px 3px; overflow:hidden; }
.w-wanderer.hidden{ display:none; }
.wp-t{ color:var(--c-cyan, #6cf); height:11px; line-height:11px;
  white-space:nowrap; overflow:hidden; transform:scale(.88); transform-origin:left center; }
.wp-v{ color:var(--c-gray); height:11px; line-height:11px;
  white-space:nowrap; overflow:hidden; transform:scale(.82); transform-origin:left center; }
.wp-v .wp-r{ color:var(--c-lred, #f88); }
.sd-t{ color:var(--c-orange); height:11px; line-height:11px; margin-bottom:1px;
  white-space:nowrap; overflow:hidden; transform:scale(.88); transform-origin:left center; }
.sd-d{ display:flex; flex-direction:column; height:11px; line-height:11px; cursor:pointer;
  white-space:nowrap; overflow:hidden; transform:scale(.82); transform-origin:left center; }
.sd-d .sd-n{ color:var(--c-yellow, #fc8); }
.sd-d.on .sd-n{ color:#000; background:var(--c-yellow, #fc8); }
.sd-d.on{ background:var(--c-dgray); }
.sd-d.locked .sd-n{ color:var(--c-dgray); }
.sd-d .sd-s{ color:var(--c-gray); }
.sd-d .sd-lk{ color:var(--c-lred); }
.sd-hint{ color:var(--c-dgray); height:10px; line-height:10px; white-space:nowrap;
  overflow:hidden; transform:scale(.76); transform-origin:left center; margin-top:1px; }
/* 队名 + 共享等级标题条（b0.6）：现整队统一，势力名不再显示，留空即可，故隐藏此条，
 * 让 5 个已选武将框整体向上移动、填进原标题条所在区域。 */
.party-title{ display:none; }
.party-title .pt-lv{ color:#c4a83a; }
/* #party-slots 是 w-party 内唯一的子块；必须自己成为 flex 容器。
 * 之前没给它 display:flex，导致 5 个 p-slot 挤在同一个块级子元素里被压成一行首格，
 * 表现就是"只显示第一个被选择的武将"。现在让它横向铺开每个名字小框。 */
#party-slots{ display:flex; gap:2px; width:100%; flex:0 0 auto; min-height:0; align-items:center; }
.p-slot{ flex:1 1 0; min-width:0; height:22px; border:1px solid var(--c-dgray); position:relative;  /* v2.2.15b2：20→22，与选将条 .mi 等高(两行按钮统一 22px)，仍填满 party 22px 内容区、外框间距 2px */
  display:flex; align-items:center; justify-content:center;
  text-align:center; cursor:pointer; overflow:hidden; padding:0 1px; }
.p-slot.fill{ border-color:var(--c-white); background:rgba(255,255,255,.06); }
.p-slot.pe-sel{ border-color:var(--c-orange); background:rgba(255,170,0,.18); }
.p-slot.pe-sel .pn{ color:#fff !important; }
.p-slot .pn{ width:100%; font-size:12px; line-height:12px;
  transform:scale(.82); transform-origin:center center;
  white-space:nowrap; overflow:hidden; text-overflow:clip; }
.p-slot.empty{ color:var(--c-dgray); }

.w-selbtn{ top:208px; left:2px; width:252px; height:30px; padding:2px;  /* v2.2.15b7：top 204→208（随 party 下移），底沿 234→238、画布底余量 6px→2px；腾出 4px 匀给资料框 */
  display:flex; gap:2px; align-items:center; }
.w-selbtn .mi{ flex:1; padding-left:0; display:flex; align-items:center; justify-content:center; text-align:center; height:22px; line-height:1;
  border:1px solid var(--c-dgray); }
.w-selbtn .mi.sel{ border-color:var(--c-white); background:var(--c-dblue); }
.w-selbtn .mi.sel::before{ display:none; }

/* ========================= 装备对话框 ========================= */
/* v2.1.9：标题「装备 — 黄忠」的字间距统一，不再靠手动空格硬撑。 */
.eq-title{ letter-spacing:2px; }
.eq-wrap{ display:flex; gap:4px; }
.eq-side{ flex:1; min-width:0; }
.eq-h{ color:var(--c-orange); height:12px; line-height:12px; margin-bottom:2px; }
.eq-sl, .eq-wh{
  border:1px solid var(--c-dgray); margin-bottom:2px; padding:1px 3px;
  font-size:10px; line-height:13px; white-space:normal; word-break:break-word;
  display:flex; align-items:flex-end; gap:2px; cursor:pointer; }
.eq-sl.sel, .eq-wh.sel{ border-color:var(--c-white); background:var(--c-dblue); }
.eq-sn{ color:var(--c-lblue); margin-right:2px; flex:0 0 auto; }
.eq-name{ flex:0 0 auto; }
.eq-wh-main{ flex:1 1 auto; min-width:0; display:flex; align-items:flex-end; gap:2px; overflow:hidden; }
/* v2.1.9：绿色效果字缩到与底部操作提示（.m-hint font-size:8px）一致，并与物品名下对齐。 */
.eq-ef{ color:var(--c-ygreen); font-size:8px; line-height:8px; flex:0 0 auto; position:relative; top:-3px; }
.eq-empty{ color:var(--c-dgray); flex:1 1 auto; }
.eq-wh-count{ flex:0 0 auto; font-size:8px; line-height:8px; color:var(--c-gray); text-align:right; position:relative; top:-3px; }

/* 装备/合成界面滚动作用域（需求④）：.m-body 默认整体滚动；加 .eq-mode 后
 * 左右两栏各自内部滚动，底部操作行（合成按钮 + 说明）锁死不随光标滚动。
 * v2.1.11：旧版只给 .eq-store 加 overflow-y，合成界面左表(待合成托盘) 选满 10 行后溢出，
 * 光标下移会把整个 .m-body 顶上去——底部「合成」按钮和说明跟着一起滚出视野。
 * 左右两栏同为 .eq-side，一并给滚动容器；表头 sticky 吸顶，滚内容不滚标题。
 * 刻意不加 position:relative —— .eq-store 上挂着滚动提示箭头(.scroll-hint)，
 * 一旦让它变成定位祖先，箭头会从「弹窗底部提示文字下方」掉到「右表底部」，v2.1.10 验收过的落点就没了。
 * 光标跟随改由 select.js 的 scrollRowIntoBox() 用 getBoundingClientRect 差值实现，不依赖 offsetParent。 */
.m-body.eq-mode{ overflow:hidden; display:flex; flex-direction:column; }
.m-body.eq-mode .eq-wrap{ flex:1 1 auto; min-height:0; }
.m-body.eq-mode .eq-side{ overflow-y:auto; overflow-x:hidden; }
.m-body.eq-mode .eq-h{ position:sticky; top:0; z-index:1; background:var(--c-black); }

/* v2.1.9：合成按钮与底部说明放在同一行，左侧固定「合成」按钮，右侧描述文字太长时横向滚动。 */
.eq-actions-new{ display:flex; gap:4px; margin-top:2px; flex:0 0 auto; align-items:flex-end; }
.eq-actions-new .eq-btn{ flex:0 0 auto; }
.eq-desc-scroll{
  flex:1 1 auto; min-width:0; overflow:hidden; white-space:nowrap;
  font-size:8px; line-height:13px; color:var(--c-gray); align-self:flex-end; }
.eq-desc-scroll .eq-desc-inner{ display:inline-block; white-space:nowrap; }
/* 复用武将资料框蓝字的 eq-marquee（整条离场 + 末尾停顿 2s，周期 7s） */
.eq-desc-scroll.marquee .eq-desc-inner{ animation:eq-marquee 7s linear infinite; }

.eq-btn{ display:inline-block; color:var(--c-orange); border:1px solid var(--c-orange);
  padding:0 4px; cursor:pointer; }
.eq-btn.sel{ border-color:var(--c-white); background:var(--c-dblue); color:var(--c-white); }
.eq-wh.rare{ color:var(--c-orange); }   /* 仓库里神器以金色特殊显示 */
.eq-sl .rare{ color:var(--c-orange); }   /* 装备槽里的神器同样橙显 */
.d-equip .rare{ color:var(--c-orange); } /* 详情页装备列表里的神器橙显 */
/* v2.1.10：合成界面重写为 .eq-wrap 双表布局，全面复用装备界面样式；原 .synth-* / .synth-mode 样式退役。 */
.eq-wh.dim{ color:var(--c-dgray); opacity:.5; }   /* 合成右表：该材料已被选满（余量 0）置灰不可选 */
.eq-btn.disabled{ opacity:.4; pointer-events:none; }   /* 合成按钮未集满 10 件时置灰 */

/* ========================= 战斗 ========================= */
/* 战场：纯黑底 + 复刻版战斗背景（PNG 上半部透明，露出黑色天空；底部地面压住人物下方）。
 * 上方 2/3（160px）给敌我阵营，下方 1/3（80px）给指令区。 */
.bt-field{ position:absolute; top:0; left:0; width:256px; height:160px;
  background-color:#000; overflow:hidden; image-rendering:pixelated; }
/* Android WebView 对 CSS background-image 的 file:// 支持不稳定，
 * 用 img 元素垫在战场底部更可靠；PNG 上半部透明，露出黑色天空。 */
/* 地形背景：源图已裁掉上方透明区，现为底部窄地形带。
 * 不再用 object-fit:cover（会把窄带放大 2 倍并裁掉左右），改为按原始比例
 * 铺在战场底部、宽度撑满、不放大，保留完整场景宽度。 */
.bt-back{ position:absolute; left:0; bottom:0; width:100%; height:auto; pointer-events:none; }
/* ---- FC 原版站位：我方左列 / 敌方右列，各 5 槽 ----
 * 行距 28px，5 人共占 140px，上下各留边距：顶部不超出游戏框，底部不压战斗背景。
 * 槽内左半 28px 是「横排姓名 + 兵力数字」，右半是「立绘 + 粗血条」。
 * 纵深由水平偏移体现：越靠前越靠中线。 */
.bt-line{ position:absolute; top:0; width:120px; height:160px; }
.bt-line.ally{ left:0; }
.bt-line.enemy{ right:0; }

/* 天气粒子层（ENG-WX-IMPL-01）：置于背景 .bt-back 之上、立绘 .bt-line 之下 */
.bt-back{ z-index:0; }
.bt-line{ z-index:2; }
.wx-fx{ position:absolute; top:0; left:0; width:256px; height:160px;
  image-rendering:pixelated; pointer-events:none; z-index:1; }

/* 出阵界面天气/地形行（GDD §5.1 / §7.5）：单色白描图标 + 文言横幅 + 白话子行 */
.wx-block{ margin:2px 0 0; }
.wx-row{ display:flex; align-items:center; gap:6px; }
.wx-label{ color:#9c9c9c; }
.wx-val{ color:#e8c060; }
.wx-icon{ flex:0 0 60px; width:60px; height:60px; display:flex; align-items:center; justify-content:center;
  background:#000000; position:absolute; top:8px; right:8px; z-index:0; }   /* v2.0.35：图标垫在所有文字下层（z-index 5→0），滚动时黑底不再压字；ENG-UI-217 #10 锚定 #modal-box；v2.1.6 底色改纯黑 */
.wx-svg{ display:block; image-rendering:pixelated; }
.wx-banner{ flex:1; color:#cfd2da; line-height:13px; text-align:center; display:block; }   /* ENG-UI-217 #10：文言整行居中 */
.wx-plain{ color:#8a8f99; line-height:12px; margin:1px 0 0; }
/* v2.0.85 雷暴封阵告警（出阵界面）：本战没有阵型属于颠覆性规则，
 * 混在灰色 plain 里会被当背景信息略过；出阵界面正是玩家刚布完阵的地方，必须单独一行、用警示色。 */
.wx-alert{ color:var(--c-orange, #e8a020); line-height:12px; margin:2px 0 0;
  border-left:2px solid var(--c-orange, #e8a020); padding-left:4px; }
/* 单槽：v0.4 行距压到 20px（原 28px），5 人占 100px，整块上移、底部不再压战斗背景。
 * JS 负责写 top（行号 × 20px）与横向纵深偏移（--dx）。 */
.bt-slot{ position:absolute; width:116px; height:22px; }
.bt-line.ally  .bt-slot{ left:0; }
.bt-line.enemy .bt-slot{ right:0; }
/* 姓名栏 + 兵力数字：紧贴屏幕左右边缘，兵力数字在上、姓名紧贴其下（v0.4 R6）。 */
.bt-slot .nm{ position:absolute; top:1px; left:2px; width:28px; height:10px;
  display:flex; align-items:center; justify-content:center; overflow:hidden; }
.bt-line.enemy .bt-slot .nm{ left:auto; right:2px; }
.bt-slot .nm span{ font-size:9px; line-height:10px; color:#fff;
  white-space:nowrap; text-align:center; text-shadow:1px 1px 0 #000; }
/* 兵力数字：置于姓名上方，水平居中。 */
.bt-slot .sol{ position:absolute; bottom:1px; left:2px; width:28px; height:8px;
  font-size:7px; line-height:8px; color:var(--c-gray);
  text-align:center; text-shadow:1px 1px 0 #000; }
.bt-line.enemy .bt-slot .sol{ left:auto; right:2px; }
/* 立绘容器：立于己方血条正上方，左缘与血条左缘对齐（后站位 dx=0 时完全对齐）。
 * 纵深 --dx 仍按阵型将其向右推移（越靠前越靠近中线）。b0.6 需求②。 */
.bt-slot .spr{ position:absolute; bottom:6px;
  display:flex; align-items:flex-end; justify-content:center; }
.bt-line.ally  .bt-slot .spr{ left:30px; }
.bt-line.enemy .bt-slot .spr{ right:30px; }
/* 纵深偏移：front 比 mid 更靠中线 22px，mid 比 back 更靠 12px。敌我镜像。 */
.bt-line.ally  .bt-slot .spr{ transform:translateX(var(--dx, 0px)); }
.bt-line.enemy .bt-slot .spr{ transform:translateX(calc(var(--dx, 0px) * -1)); }
.e-unit, .f-unit{ cursor:pointer; }
.bt-slot canvas{ display:block; margin:0 auto; }
/* 立绘尺寸（v0.4 在 v0.3 基础上再缩 ~30%）：22px → 15px。 */
.bt-slot .gen-sprite{ width:auto; height:auto; --gs:1.1;
  max-height:calc(15px * var(--gs,1)); max-width:21px; image-rendering:pixelated;
  filter:drop-shadow(0 0 0 #000) drop-shadow(1px 2px 0 rgba(0,0,0,.65)); }
.bt-slot .gen-sprite.flip{ transform:scaleX(-1); }
.bt-slot .gen-sprite.atk{ animation:lunge .26s ease-out; }
.bt-slot .gen-sprite.flip.atk{ animation:lunge-m .26s ease-out; }
@keyframes lunge-m{ 0%{transform:scaleX(-1) translateY(0)}
  40%{transform:scaleX(-1) translateY(-3px) scale(1.05)}
  100%{transform:scaleX(-1) translateY(0)} }
.bt-slot .gen-sprite.downed{ max-height:18px; opacity:.85;
  filter:drop-shadow(0 0 0 #000) drop-shadow(1px 1px 0 rgba(0,0,0,.5)) saturate(.75) brightness(.92); }
/* v2.0.84：静寂 fade 隐身已移除（原版静寂是布阵者机制，无隐身表现），fadeblink 动画随用随删。 */
@keyframes lunge{ 0%{transform:translateY(0)} 40%{transform:translateY(-3px) scale(1.05)}
  100%{transform:translateY(0)} }
/* 粗血条：立在立绘下方。我方低饱和度黄，敌方低饱和度紫。
 * 长度按本阵营 5 人兵力上限比例决定，最长不超过最前站位。
 * 血条背景槽用深黑/深紫，前景用低饱和色。 */
.bt-slot .hpbar{ position:absolute; bottom:1px; height:5px; max-width:42px;
  background:rgba(0,0,0,.75); border:1px solid #000; box-sizing:border-box; }
.bt-line.ally  .bt-slot .hpbar{ left:30px; }
.bt-slot .hpbar i{ display:block; height:100%; }
.bt-line.ally  .bt-slot .hpbar i{ background:#c4a83a; }
/* 敌方血条从右往左生长：容器靠右，i 也靠右。 */
.bt-line.enemy .bt-slot .hpbar{ right:30px; left:auto; }
.bt-line.enemy .bt-slot .hpbar i{ background:#8a5fa0; position:absolute; right:0; top:0; }
/* v2.1.28 第⑨条：撤退成功的副将 —— 立绘与血条 100% 透明（人已离场，不该还杵着）。
 * 姓名/兵力小字保留：玩家还能看出「这员将撤了」，而不是槽位凭空消失。
 * 仅战略模式设 u.fled（剧情模式引擎无此标记），故对剧情战斗零影响。 */
.bt-slot.fled .spr, .bt-slot.fled .hpbar{ opacity:0; }
/* 适应地形：在该武将适应场地作战时，血条染低饱和色（我方绿/敌方红），
 * 让"主场优势"一眼可见。!important 压过默认填充色。 */
.bt-line.ally  .bt-slot.tadapt .hpbar i{ background:#8fbf8f !important; }
.bt-line.enemy .bt-slot.tadapt .hpbar i{ background:#c89090 !important; }
.bt-slot.dead{ opacity:.28; filter:grayscale(1); }
/* b0.6.8 需求⑤：疑心/缚杀 → 立绘与血条去饱和（灰显）。.gray 作用于整槽，立绘+血条同灰。 */
.bt-slot.gray .gen-sprite{ filter:grayscale(1) saturate(0); opacity:.72; }
.bt-slot.gray .hpbar i{ filter:grayscale(1) saturate(0); }
.bt-slot.gray .nm span{ color:#9a9a9a !important; }
/* 目标选择箭头：与立绘保持 10px 安全距离（b0.6 需求③），不再紧贴遮挡。
 * 全体模式下所有目标箭头循环闪烁，提示玩家"这一击将波及全体"。 */
.bt-slot.tsel .spr::after,
.bt-slot.tsel-all .spr::after{ position:absolute; top:50%; transform:translateY(-50%);
  color:var(--c-orange); font-size:12px; line-height:12px; z-index:40; }
/* 目标箭头：敌方在立绘左侧（朝右指），我方在立绘右侧（朝左指）。 */
.bt-line.enemy .bt-slot.tsel .spr::after,
.bt-line.enemy .bt-slot.tsel-all .spr::after{ content:'▶'; left:-10px; }
.bt-line.ally  .bt-slot.tsel .spr::after,
.bt-line.ally  .bt-slot.tsel-all .spr::after{ content:'◀'; right:-10px; }
.bt-slot.tsel .spr::after{ animation:blink .5s steps(2) infinite; }
.bt-slot.tsel-all .spr::after{ animation:blink .24s steps(2) infinite; }
.e-hit{ animation:shake .18s steps(3) 2; }
@keyframes shake{ 0%{transform:translateX(0)} 33%{transform:translateX(-3px)}
  66%{transform:translateX(3px)} 100%{transform:translateX(0)} }
.dmg-pop{ position:absolute; color:var(--c-white); font-size:12px; text-shadow:1px 1px 0 #000;
  animation:pop .8s ease-out forwards; pointer-events:none; z-index:9; }
.dmg-pop.crit{ color:var(--c-orange); }
.dmg-pop.heal{ color:var(--c-ygreen); }
@keyframes pop{ 0%{transform:translateY(0);opacity:1} 100%{transform:translateY(-16px);opacity:0} }

/* ================= 下方指令区（162~240，屏幕下 1/3）=================
 * 右侧 58~254 是一个【三层叠放】的同尺寸矩形，从下到上：
 *     w-msg 战况（z15，常驻底层，默认可见）
 *     w-cmd 指令框（z20，轮到下令时盖上来）
 *     w-sub 二级菜单（z21，谋略/部将）
 * 三者 top/left/width/height 必须完全一致——它们是同一个"窗口位"的三种内容，
 * 尺寸一旦不同步，切换时框线会跳一下，那种抖动在 FC 版式里特别扎眼。
 * 改这里请三条一起改。
 *
 * 左侧 2~54 是 52px 窄列，只放两样东西并与指令框严格对齐：
 *     bt-actor-face  顶对齐（top 均为 163）
 *     bt-actor 标签  底对齐（237 = 163 + 74）
 * ==================================================================== */
.w-msg{ top:163px; left:58px; width:196px; height:74px; padding:2px 4px; z-index:15; }
.msg-inner{ height:100%; overflow-y:auto; touch-action:pan-y; line-height:12px; font-size:10px; }

/* 发令武将头像：与指令框顶对齐。52px 是这块窄列能给到的最大方形，
 * 再大就压到下面的「某某的指令」标签了。 */
.bt-actor-face{ position:absolute; top:163px; left:2px; width:52px; height:52px;
  background:#000; border:2px solid var(--c-white); overflow:hidden; z-index:20;
  image-rendering:pixelated; }
.bt-actor-face img{ display:block; width:100%; height:100%;
  object-fit:cover; object-position:center top; image-rendering:pixelated; }
.bt-actor-face.dead{ filter:grayscale(1) brightness(.6); }
.bt-actor-face.turncoat{ filter:grayscale(1); transform:scaleX(-1); }
/* b0.6.8 需求⑤：疑心/缚杀 → 左下角头像去饱和 */
.bt-actor-face.gray img{ filter:grayscale(1) saturate(0); opacity:.72; }
/* 命令面板：3 行 × 2 列（攻击 总攻 / 谋略 部将 / 防御 撤退）。
 * 阵型入口已移至谋略二级菜单最下方。
 * 行高 21px × 3 = 63px，正好落在 74 - 边框4 - 内边距6 = 64px 的内容区里。
 * 左对齐 + 留 14px 给 ▶ 光标：居中排版会让光标压到字上，FC 原版也是左对齐。 */
.w-cmd{ top:163px; left:58px; width:196px; height:74px; padding:4px 2px; z-index:20;
  display:grid; grid-template-columns:repeat(3,1fr); align-content:center; gap:1px 0; }
.w-cmd .mi{ width:auto; height:21px; line-height:21px; padding-left:12px;
  text-align:left; font-size:12px; }
.w-cmd .mi.sel::before{ left:2px; }
/* 计策/阵形窗：与战况框、指令框同一个窗口位。 */
.w-sub{ top:163px; left:58px; width:196px; height:74px; padding:2px 3px; z-index:21;
  overflow:hidden; display:flex; flex-direction:column; }
.sub-grid{ display:flex; flex-wrap:wrap; align-content:flex-start;
  flex:1 1 auto; overflow-y:auto; min-height:0; }
/* 计策/阵形列表项：文字超出列宽时由 JS 加 .marquee 触发横向循环滚动，
 * 每滚动完一次停顿 2 秒（keyframes 末段 40% ≈ 2s）后从头再来。 */
/* 部将第一级：敌我两列姓名列表（左我方、右敌方）。
 * 用 grid 5 行 × 2 列 + order 重排，DOM 仍行优先但视觉列优先，导航保持上下跨行、左右换列。 */
.w-sub.peek-mode .sub-grid{ display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:14px;
  flex:0 0 auto; align-content:start; }
.w-sub.peek-mode .sub-grid .mi{ width:auto; }
.sub-note.peek{ flex:1 1 auto; overflow-y:auto; min-height:0; line-height:12px; }
.sub-note.peek .pk-r{ font-size:9px; white-space:nowrap; }
.sub-note.peek .pk-r b{ color:var(--c-orange); font-weight:normal; }
.sub-note.peek .pk-r.hi{ color:var(--c-ygreen); }
.sub-grid .mi{ width:50%; overflow:hidden; white-space:nowrap; }
/* 阵型入口：单独占一整行并居左，视觉上与上方计策网格断开，
 * 明确告诉玩家「这一行是换阵，不是计策」。 */
.sub-grid .mi.form-opt{ width:100%; text-align:left; padding-left:4px;
  border-top:1px solid var(--c-dgray); }
.sub-grid .mi > span{ display:inline-block; white-space:nowrap; will-change:transform; }
.sub-grid .mi.marquee > span{ animation: marquee 5s linear infinite; }
@keyframes marquee {
  0%   { transform: translateX(0); }
  12%  { transform: translateX(0); }                 /* 起始短停 */
  52%  { transform: translateX(var(--shift, 0)); }  /* 滚动到尾 */
  92%  { transform: translateX(var(--shift, 0)); }  /* 末尾停顿 2 秒 */
  100% { transform: translateX(0); }
}
/* 装备跑马灯专用：整体横向滚动至整条离场（-100% 自身宽），再停顿 2 秒后重启（每轮之间留 2s 间隔）；
 * 不依赖 --shift；循环重置时容器已空（整条在左界外），故无可见跳变。
 * ENG-UI-217 #11：0%~28% 起点先停 2 秒 → 28%~72% 滚动离场 → 72%~100% 末态停 2 秒；
 * 循环回卷（−100%→0%）发生在离场不可见处即"复位"，故呈「停2s→滚→复位→停2s→滚」循环。 */
@keyframes eq-marquee {
  0%   { transform: translateX(0); }
  28%  { transform: translateX(0); }        /* 起点先停 2 秒（7s×0.28≈2s） */
  72%  { transform: translateX(-100%); }   /* 约 3s 滚动至离场 */
  100% { transform: translateX(-100%); }   /* 末态停 2 秒（总时长 7s） */
}
/* 描述文字改为正常流、可换行，避免阵形/计策说明被 nowrap + 绝对定位裁掉；
 * flex:0 0 auto + border-top 让它恒定贴在窗口最下一栏，列表怎么滚都不动。 */
.sub-note{ position:static; color:var(--c-gray); line-height:11px; padding:2px 4px 0;
  font-size:10px; white-space:normal; word-break:break-word; overflow:visible; transform:none;
  flex:0 0 auto; border-top:1px solid var(--c-dgray); background:#000;
  /* v2.0.89：高度保险——内容超高时只压缩自己并内部滚动，绝不把阵型名列表(.sub-grid)挤出窗口 */
  max-height:48px; overflow-y:auto; }

/* 长按 B「偷看战场」的遗留样式。v0.2 起下方 UI 全部落在 163px 以下、
 * 不再压住战场，已无「偷看」的对象，app.js 里也不再进入 peek 态。
 * 规则保留只为兼容旧调用路径，正常玩不会命中。 */
#sc-battle.peek #bt-cmd,
#sc-battle.peek #bt-sub,
#sc-battle.peek #bt-actor,
#sc-battle.peek #bt-actor-face{ display:none !important; }

/* 「某某的指令」：与指令框【底对齐】——237 = 163(top) + 74(height)。
 * 字号压到 8px 是被 52px 窄列逼出来的：最长的名字 3 字 + "的指令" 共 6 字，
 * 6 × 8 = 48px，正好塞进 52px 减去左右各 1px 边框和 1px 内边距。 */
.bt-actor{ position:absolute; top:222px; left:2px; width:52px; height:15px;
  color:var(--c-orange); background:#000; border:1px solid var(--c-white);
  line-height:13px; text-align:center; font-size:8px; letter-spacing:0;
  z-index:22; white-space:nowrap; overflow:hidden; cursor:pointer; }
.bt-actor.ghost{ color:transparent; background:transparent; border-color:transparent; }

/* ========================= 部将全屏信息面板 =========================
 * 覆盖整个 256×240 游戏内框，与参考图一致：
 * 左侧大头像+姓名+兵种+兵力；右侧武力/智力/速度/攻击/防御五项+小方格条；
 * 底部装备栏两列。 */
.bt-peek-full{ position:absolute; top:0; left:0; width:256px; height:240px;
  background:#000; border:2px solid var(--c-white); box-sizing:border-box;
  z-index:30; padding:4px 5px 3px; color:#fff; display:flex; flex-direction:column; }
.bpk-layout{ display:flex; height:158px; flex:0 0 auto; }
.bpk-left{ width:86px; flex:0 0 86px; padding-right:6px; box-sizing:border-box; }
.bpk-face{ width:72px; height:72px; background:#111; border:1px solid #555;
  image-rendering:pixelated; object-fit:cover; object-position:center top; }
.bpk-name{ margin-top:6px; font-size:14px; line-height:16px; color:var(--c-orange);
  text-align:center; }
.bpk-class{ margin-top:2px; font-size:10px; line-height:12px; color:var(--c-gray);
  text-align:center; }
/* 全屏窗签名：与信息框蓝字同款，单一系统 */
.bpk-sign{ margin-top:2px; font-size:10px; line-height:12px; color:var(--c-lblue);
  text-align:center; }
/* 右侧空闲区两个文本框（已习阵型 / 已习计谋）：边框/直角/字号/字色对齐底部装备框 .bpk-equip */
.bpk-box2{ margin-top:6px; font-size:10px; line-height:13px; color:#fff;
  border:2px solid var(--c-white); padding:2px 5px; text-align:left; white-space:nowrap; overflow:hidden; }
.bpk-hp{ margin-top:4px; font-size:12px; line-height:14px; text-align:center; white-space:nowrap; }
/* v2.2.12：兵力过万/过十万时自动降字号，避免 86px 左栏里的「兵 12345/12345」溢出 */
.bpk-hp.sm{ font-size:10px; line-height:12px; }
.bpk-hp.xs{ font-size:9px; line-height:11px; }
.bpk-right{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:flex-start;
  gap:5px; padding-top:2px; }
.bpk-stat{ display:flex; align-items:center; gap:2px; font-size:11px; line-height:12px; }
.bpk-stat label{ width:22px; text-align:left; }
.bpk-stat val{ width:26px; text-align:right; }
.bpk-bars{ flex:1 1 auto; display:flex; align-items:center; gap:1px; }
.bpk-bar{ width:7px; height:11px; background:#222; border:1px solid #444; box-sizing:border-box; }
.bpk-bar.on{ background:var(--c-orange); border-color:var(--c-orange); }
/* v2.0.67：组团buff增益格子——与装备/裸值橙格区分，用实绿（--c-green）。 */
.bpk-bar.on.buff{ background:var(--c-green); border-color:var(--c-green); }
/* v2.2.18 R8：名单/资料框里 buff 增益的数值改着阵营色（见 select.js buffStyle 内联），不再走实绿 .eq-bonus；
 * 战斗部将窗的 buff 绿格/绿字仍走 .buff-bonus（实绿），二者区分。 */
.buff-bonus{ color:var(--c-green); }
.buff-bonus .buf-add, .buf-add{ color:var(--c-green); font-size:9px; }
.bpk-equip{ margin-top:auto; min-height:34px; flex:0 0 auto; border:2px solid var(--c-white); padding:3px 4px;
  display:flex; flex-wrap:wrap; gap:2px 8px; align-content:flex-start; }
.bpk-eq{ width:calc(50% - 4px); font-size:10px; line-height:13px; color:#fff; }
.bpk-eq.empty{ color:var(--c-dgray); }
.bpk-eq .rare{ color:var(--c-orange); }
/* v2.2.12：部将框右栏（属性条之下）的「组合」框——与底部装备框 .bpk-equip 同款 2px 白边，
 * 撑满右栏剩余高度；首行白字标题「组合：」，下方组合名黄绿字（--c-ygreen）自动换行。
 * （v2.2.11 曾误放在血条正下方做全宽一行，已按用户版面图迁移到此。） */
.bpk-combo{ flex:1 1 auto; min-height:34px; border:2px solid var(--c-white);
  padding:3px 4px; overflow:hidden; }
.bpk-combo-h{ font-size:10px; line-height:13px; color:#fff; }
.bpk-combo-l{ margin-top:1px; font-size:10px; line-height:13px; color:var(--c-ygreen);
  word-break:break-all; }
.bpk-foot{ flex:0 0 auto; text-align:center; margin-top:3px;
  font-size:9px; line-height:11px; color:var(--c-gray); }

/* ========================= 弹窗 ========================= */
/* z-index:50 必须高于标题场景里 .title-art(3)/.title-heroes(2)/.t-copy(4)
 * 也高于战斗场景的 .w-cmd(20)/.w-sub(21)/.bt-actor(22)——
 * 否则带 z-index 的标题元素会按 CSS 层叠顺序盖到弹窗之上（弹窗本身 z:auto 落在
 * 同级 positioned 元素的第 6 步，而正 z-index 子元素在第 7 步）。提层后弹窗稳居最顶。 */
/* ====== Task5 黑屏过场 ====== */
#sc-cutscene{ background:#000; z-index:40; }
.cs-stage{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; padding:12px; }
/* v2.0.90：头像区改为 flex 流内（不再绝对定位）——顶部锚定、flex:1 吃满文本上方的剩余空间；
 * 文本变多向上顶时头像区被压缩，img 等比缩小，位置（顶部锚点）始终不动，文本永不与头像重叠。
 * margin-top:8px 补偿原 top:20px 锚点（12px stage padding + 8px = 20px，视觉位置分毫不差）。 */
.cs-portrait{ position:relative; width:96px; margin-top:8px; min-height:24px;
  flex:1 1 auto; display:flex; align-items:flex-start; justify-content:center; }
.cs-port-l{ align-self:flex-start; }
.cs-port-r{ align-self:flex-end; transform:scaleX(-1); }
/* img 等比缩放：剩余空间够时 96×96，被文本压缩时按比例缩小，不裁切不拉伸 */
.cs-face{ height:100%; width:auto; max-width:100%; aspect-ratio:1/1; image-rendering:pixelated; }
.cs-text{ width:100%; max-width:260px; min-height:60px; background:rgba(0,0,0,.8); border:2px solid #555; border-radius:4px; padding:8px; margin-bottom:24px;
  flex:0 0 auto; }
.cs-name{ color:#fc8; font-size:12px; margin-bottom:4px; }
.cs-line{ color:#fff; font-size:13px; line-height:1.5; }
.cs-hint{ position:absolute; bottom:6px; right:12px; color:#666; font-size:10px; }
/* ====== 通用弹窗 ====== */
#sc-modal{ background:rgba(0,0,0,.55); z-index:50; }
.w-modal{ top:14px; left:8px; width:240px; height:212px; padding:5px; overflow:hidden;
  display:flex; flex-direction:column; }
/* v2.0.23 #3：战斗结果界面长按 B 瞥看战场——给 #sc-modal 加 .peek-result 使其透明且不可点，
 * 露出背后 #sc-battle / #bt-field。!important 确保覆盖任何主题对 #sc-modal/.w-modal 的 opacity 设定。 */
#sc-modal.peek-result{ opacity:0 !important; pointer-events:none; }
/* 确认弹窗里的选项菜单：复用 .mi 光标，单独加间距，避免和正文挤在一起 */
.cf-menu{ margin-top:8px; }

/* ========================= 屏保（防 OLED 烧屏） ========================= */
/* 全屏黑遮罩，z-index 高于一切游戏层（含弹窗 50）。Web 层只能黑掉 WebView/页面，
 * 原生状态栏黑屏需原生代码，超出本样式范围。 */
#ss-overlay{ position:fixed; inset:0; background:#000; z-index:9999; display:none; }
#ss-overlay.on{ display:block; }
/* 主标题图缩小 50%（游戏中 .title-img 为 256px → 128px），渐变时长须与 ScreenSaver.FADE_MS 一致 */
#ss-title{ position:absolute; width:128px; height:auto; opacity:0;
  transition:opacity .8s ease; pointer-events:none; image-rendering:pixelated; }
.cf-menu .mi{ height:15px; line-height:15px; padding-left:14px; }
.cf-menu .mi + .mi{ margin-top:2px; }
.m-title{ color:var(--c-orange); text-align:center; height:14px; flex:0 0 auto; }
.m-body{ height:162px; overflow-y:auto; line-height:13px; white-space:normal;
  word-break:break-word; flex:0 0 auto; }
/* v2.2.18：音乐欣赏固定头部（标题+状态两行灰字）从滚动区移出后须占固定高度，
 * 否则与固定 162px 的 .m-body 叠加超出 .w-modal(212px) 框，把 .m-foot 挤出可视区（"跑偏"）。
 * 自身直接置灰+居中（不依赖 .dim 作用域），并让含 .m-sub 的弹窗把 .m-body 让出 30px：
 * 标题14 + 头部30 + 正文132 + 脚24 = 200 ≤ 212-10内边距。 */
.m-sub{ text-align:center; color:var(--c-dgray); font-size:8px; line-height:13px;
  height:30px; flex:0 0 auto; overflow:hidden; }
.w-modal.with-sub .m-body{ height:132px; }
.m-body .row{ display:flex; justify-content:space-between; min-height:12px; line-height:13px; gap:8px; }
.m-body .row > span:first-child{ white-space:normal; word-break:break-word; }
.m-body .ok{ color:var(--c-ygreen); } .m-body .no{ color:var(--c-lred); }
.m-body .dim{ color:var(--c-dgray); }
/* 命中率·阵型修正 说明块（阵型选择/阵图兵略/操作说明 三处复用 formationTacHitNote） */
.m-body .cx-tachit{ margin-top:4px; padding-top:3px; border-top:1px dashed var(--c-dgray); line-height:13px; }
.m-body .cx-tachit b{ color:var(--c-ygreen); font-weight:normal; }
/* v2.0.85 天气×阵型 说明块（阵图兵略/阵型选择/战斗阵型命令 三处复用 formationWeatherNote）
 * 与 cx-tachit 同款分隔线，比它再紧一点——这块常有三行，行距放宽会把整页顶出屏。 */
.m-body .cx-wxnote{ margin-top:3px; padding-top:3px; border-top:1px dashed var(--c-dgray); line-height:12px; }
/* 战斗结算：武将名（我军行）以上段落整体居中，我军列表保持左对齐 */
.rs-top{ text-align:center; }
/* 底部操作提示条（需求 v1.32-①）：左 B 取消 / 右 A 决定，与原手柄布局一致，直接可点。
 * 保留原 foot 文案作居中提示，左右各挂一个真实按钮。 */
.m-foot{ display:flex; align-items:center; justify-content:space-between; gap:6px;
  height:24px; line-height:13px; flex:0 0 auto; margin-top:auto; }
.m-foot .m-hint{ flex:1; text-align:center; font-size:8px; transform:scale(.95);
  white-space:nowrap; overflow:hidden; color:var(--c-dgray); }
.fb{ font-family:inherit; cursor:pointer; border:1px solid var(--c-dgray);
  background:#000; color:var(--c-white); padding:2px 6px; font-size:11px;
  line-height:14px; white-space:nowrap; }
.fb:active{ background:#222; }
.fb-a{ border-color:var(--c-orange); color:var(--c-orange); }
/* v2.0.86：翻页按钮右推聚拢。
 * .m-foot 是 justify-content:space-between，四个按钮会被均匀铺满整条，
 * 「←上阵」和「下阵→」隔着一整个屏幕宽——点的时候手要横穿一次屏幕。
 * 给「上一条」加 margin-left:auto：它右边的所有按钮（上一条 + 下一条）被一起推到右侧，
 * 左侧的 B 返回 / 目录 保持原位置，两枚翻页键挨在一起。 */
.fb-r{ margin-left:auto; }
#sc-gallery .w-gfoot .fb{ font-size:11px; }
.scrollable{ overflow-y:auto; }

/* ENG-UI-217 #8：可滚动界面底部闪烁下箭头（提示可下滑）。
 * 由 attachScrollHint(container) 注入到定位宿主（#modal-box / #bt-peek-full 等）底部居中；
 * pointer-events:none 不挡操作；z-index 高于内容；默认 display:none，由 JS 控制显隐
 * （仅当容器真正可滚动且未滚到底时显示，滚到底/无溢出则隐藏）。 */
.scroll-hint{
  position:absolute; left:50%; bottom:6px; transform:translateX(-50%);
  width:0; height:0; pointer-events:none; z-index:60;
  border-left:4.9px solid transparent; border-right:4.9px solid transparent;
  border-top:6.3px solid #ffffff;            /* 白色向下三角，约 9.8px 宽（×0.7，等边等比缩小 30%，居中不变） */
  animation: blink 1s steps(2,end) infinite;
  display:none;
}
/* v2.1.10：滚动提示箭头统一落在「↑↓切换·←→换栏」提示文字正下方、贴弹窗底边（bottom=3），
 * 与侦察/出阵弹窗完全一致；装备面板不加 position:relative，宿主走到 #modal-box。 */

/* ========================= 阵图兵略（翻页手册 + 页内滚动） ========================= */
/* 复用 .w-modal 弹窗框。
 * v2.0.85：overflow 由 hidden 改 auto —— 旧版「固定 162px 且不滚动」是为了迁就一页塞得下，
 *  代价是阵型说明只能写短句、1~5 位挤成一坨。现在 ↑↓ 直接滚页、触屏可拖，
 *  文字想写多长写多长（立绘尺寸不受影响，仍是 22px，用户明确要求不放大）。
 *  overscroll-behavior:contain 防滚动穿透：滚到尽头继续拖，不会带着整个页面一起动。 */
.codex-body{ overflow-y:auto; height:162px; white-space:normal; line-height:13px;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
/* v2.0.86：阵型页改成「外层禁滚 + 左栏独滚 + 右栏立绘钉死」。
 * 旧版整页一起滚，右栏 5 个立绘会跟着文字往上跑、末将滚出视野——
 * 玩家看的是「这个阵谁站哪」，立绘一跑，站位图就废了。
 * 现在外层 .codex-fmt-body 关掉 overflow，滚动只发生在 .cx-fmt-l 内部。 */
.codex-fmt-body{ overflow:hidden !important; }
.cx-cap{ margin-bottom:4px; color:var(--c-dgray); }
.cx-tip{ margin-top:6px; color:var(--c-dgray); font-size:9px; line-height:11px; }
/* 阵型页：左文右图双栏，站位图复用战斗 .fm-mock 几何（右侧 86px 刚好容纳 5 将紧凑堆叠）。
 * height:100% 撑满 .codex-body 的 162px，左栏才有「可滚动的高度」可言。 */
.cx-fmt{ display:flex; gap:5px; height:100%; }
.cx-fmt-l{ flex:1 1 auto; min-width:0; height:100%; overflow-y:auto;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding-right:2px; }
.cx-fmt-r{ flex:0 0 86px; }        /* 不参与滚动：立绘位置恒定 */
/* v2.0.86：左栏除标题（.cx-h 12px）外一律 8px。
 * 旧版只有 .cx-desc/.cx-mods 是 8px，站位条 / 速度行 / 计谋命中块 / 天气块 / 特殊提示
 * 全都继承 .m-body 的 13px 行高默认值，一页里两种字号混排，读起来像排版事故。
 * 特异性 .cx-fmt-l(0-1-0) + div(0-0-1) + :not(.cx-h)(0-1-0) = 0-2-1，
 * 压得住 .m-body .cx-tachit / .cx-wxnote（0-2-0）。 */
.cx-fmt-l > div:not(.cx-h){ font-size:8px; line-height:11px; }
.cx-h{ font-size:12px; margin-bottom:2px; }
/* v2.0.85：阵型介绍内文统一 8px（用户拍板）。行高同步收到 11px，
 * 8px 字配 13px 行高会散得像两行，8px 字需要更紧的行距才像一段话。 */
.cx-desc{ font-size:8px; line-height:11px; color:var(--c-white); margin:2px 0 3px; }
/* 1~5 位号位表：字号跟内文对齐（8px），每位单独一行由 JS 用 <br> 分隔。 */
.cx-mods{ font-size:8px; line-height:11px; }
/* 计谋页：v2.0.86 内文跟阵型页对齐（8px / 11px），标题仍是 12px。
 * 旧版 .cx-tac 是 10px，和阵型页翻着看时字号跳变，像两个不同人排的版。 */
.cx-tac{ font-size:8px; line-height:11px; }
.cx-tac .cx-h{ font-size:12px; }
.cx-tac .cx-desc{ margin:3px 0; font-size:8px; line-height:11px; }
.cx-tac .cx-tip{ font-size:8px; line-height:11px; }
.scrollable::-webkit-scrollbar{ width:3px; }
.scrollable::-webkit-scrollbar-thumb{ background:var(--c-dgray); }

/* ========================= 手柄 & 工具条 ========================= */
/* user-select / touch-callout 一并禁掉：安卓长按手柄键会弹出「选择文本」菜单，
 * 那一下会吞掉 touchend，按钮就永远停在按下态——和 touch.js 里的修复是一套的。 */
#pad{ margin-top:46px; width:calc(256px * var(--scale) * var(--zoom)); max-width:96vw;
  display:flex; justify-content:space-between; align-items:center;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.pad-dir{ display:flex; flex-direction:column; align-items:center; }
.pad-mid{ display:flex; }
.pb{ width:calc(34px * 0.9 * var(--zoom) * min(var(--scale), 1)); height:calc(34px * 0.9 * var(--zoom) * min(var(--scale), 1)); background:#2b2b2b; color:#ddd; border:2px solid #454545;
  font-size:13px; cursor:pointer; font-family:inherit; }
.pb:active{ background:#111; }
.pb-c{ background:#1d1d1d; border-color:#333; cursor:default; }
/* FC 手柄 SELECT / START：A/B 左侧两枚小键（战略模式：START=系统菜单/本月终了，SELECT=查看当前城） */
.pb-fc{ width:calc(44px * var(--zoom) * min(var(--scale), 1)); height:calc(18px * var(--zoom) * min(var(--scale), 1));
  margin-right:4px; border-radius:5px; background:#262626; border-color:#3a3a3a; color:#bbb;
  font-size:9px; line-height:1; padding:0; }
/* v2.2.18：右簇横排 SELECT START B A（B 保留原 margin-left:8px）。
 * 注：SELECT/START 仅战略模式显示，其纵向位置由 strategic/strategic.css 以 position:fixed 接管；
 *     此处不再设 align-self（试过但被战略样式覆盖、非战略态 .pb-fc 又恒隐藏 → 视觉零效果）。 */
.pad-ab{ display:flex; align-items:center; gap:4px; }
.pb-fc:active{ background:#111; color:#fff; }
.pb-r{ width:calc(40px * 0.9 * var(--zoom) * min(var(--scale), 1)); height:calc(40px * 0.9 * var(--zoom) * min(var(--scale), 1)); border-radius:50%; background:#8b1a1a; border-color:#c33;
  color:#fff; margin-left:8px; }
/* 移动端磁吸：方向键与 A/B 脱离 #pad 文档流，固定钉在屏幕左右侧。
 * ① 竖屏底对齐：top 吸附 --handle-y（touch.js fit() 算出的"框底↔屏底"空隙纵向中心），
 * 配合 transform:translateY(-50%) 使手柄整体居于该空隙正中。--handle-y 缺省 50% 回退到屏幕垂直中心。 */
.pad-dir, .pad-ab{ position:fixed; z-index:4; top:var(--handle-y, 50%); transform:translateY(-50%); }
/* 竖屏（默认）：磁吸屏幕左右缘 */
.pad-dir{ left:var(--gap-l); }
.pad-ab { right:var(--gap-r); }
/* 横屏（宽高比 > 1.3）：掌机布局——方向键在游戏框正左、A/B 在框正右，三者整体水平居中（框中心=50vw） */
@media (min-aspect-ratio: 13/10){
  /* 横屏掌机布局：方向键居中于「外框左缘—屏幕左缘」之间；AB 居中于「外框右缘—屏幕右缘」之间。
   * 左空隙 = [0, 50vw-frame_w/2]，中点 x = 25vw - frame_w/4；右空隙 = [50vw+frame_w/2, 100vw]，中点 x = 75vw + frame_w/4。
   * 用 left 定位到空隙中点 + translateX(-50%) 使手柄自身水平居中，不再贴框边。 */
  .pad-dir{
    left:calc(25vw - var(--frame-w) / 4);
    right:auto;
    /* v2.2.18d：横版方向键纵向中心下移，使其与 A/B 簇纵向中心对齐（A/B 位置一律不动）。
     * 下移量 = A/B 横向布局自身的下移量「半个 B 键直径」：B 40px×0.9=36 → 18px；粗指针 64×0.9 → 28.8px。
     * 与 .pad-ab 偏移【同值但各自独立写死】——不建立方向键↔AB 的绑定位置关系，只做视觉对齐。 */
    transform:translate(-50%, calc(-50% + 18px * var(--zoom) * min(var(--scale), 1)));
  }
  html.coarse .pad-dir{
    transform:translate(-50%, calc(-50% + 28.8px * var(--zoom) * min(var(--scale), 1)));
  }
  .pad-ab{
    left:calc(75vw + var(--frame-w) / 4);
    right:auto;
    /* 横屏：AB 整体下移约半个 B 键直径（v2.0.7 下移一整个太靠下，现上移半个）；偏移复用 B 键同公式，随 --scale 同步缩放。
     * B 键基础直径 40px ×0.9 = 36px → 半个 = 18px（原 20px），与 .pb-r 同比缩小保持一致。 */
    transform:translate(-50%, calc(-50% + 18px * var(--zoom) * min(var(--scale), 1)));
  }
  /* 粗指针（触摸/APK）：B 键直径 64px ×0.9 = 57.6px → 下移量半个 = 28.8px（原 32px） */
  html.coarse .pad-ab{
    transform:translate(-50%, calc(-50% + 28.8px * var(--zoom) * min(var(--scale), 1)));
  }
  .pad-dir, .pad-ab{ top:50%; bottom:auto; }
  /* 横屏：收起态「设置」移到右下角（留安全距离）；网页版/APK/移动端一致；展开态工具栏仍居中不变 */
  /* v2.2.18b 关键修复：选择器加 html 前缀，特指性升到 (1,0,1) 压过下面的基类 #tb-settings(1,0,0)。
   * 根因：基类 #tb-settings 在源码里排在本文本块【之后】（见下方「工具栏可收起」段），
   *       同特指性下【后写者胜】→ 基类的 left:50%/translateX(-50%) 会覆盖掉这里的 left:auto/transform:none，
   *       与这里的 right:… 叠加 → 按钮被拉成约 50vw 的长条（用户反复报的「横屏设置按钮那么长」真正根因，
   *       此前只改 transform:none 无效正是因为它被基类盖掉了）。 */
  html #tb-settings{
    left:auto;
    right:calc(env(safe-area-inset-right, 0px) + 10px);
    bottom:calc(env(safe-area-inset-bottom, 0px) + 10px);
    transform:none;   /* 取消基类 translateX(-50%)；不随 --zoom 缩放 */
  }
}

/* ============ v2.2.18i：虚拟手柄隐藏态 ============
 * pad-off         = 手动隐藏（持久；工具栏「🎮 手柄 OFF」开关）
 * pad-near-square = 窗口接近正方形、实测「手柄与画面框重叠」时的临时自动隐藏（fit() 判定）
 * 自动隐藏用 visibility（保留几何 → fit() 仍能精确测量是否重叠），手动隐藏直接 display:none。
 * !important 用于压过主题里的 #pad.th-* .pad-ab{display:flex} 等规则。 */
html.pad-off .pad-dir, html.pad-off .pad-ab { display:none !important; }
html.pad-near-square .pad-dir, html.pad-near-square .pad-ab { visibility:hidden !important; pointer-events:none !important; }
/* 手柄不再占列 → 释放 #pad 顶部留白，画面框得以铺满 */
html.pad-off #pad, html.pad-near-square #pad { margin-top:0; }
/* 隐藏态把顶部安全区降到 8px（=机身唇沿），让框贴满可用高度（同横版处理） */
html.pad-off, html.pad-near-square { --safe-top:8px; }
/* 手柄手动隐藏态：「设置」按钮可长按拖动换位（拖动逻辑在 touch.js） */
html.pad-off #tb-settings.pad-draggable { cursor:grab; touch-action:none; }
html.pad-off #tb-settings { transition:opacity .4s ease; }                 /* v2.2.18i：闲置淡出用 */
html.pad-off #tb-settings.pad-idle { opacity:.5; }                          /* v2.2.18i：5s 无触碰/划过 → 半透明 */
html.pad-off #tb-settings.pad-dragging  { cursor:grabbing; opacity:.9; }    /* 拖动中压过 idle（顺序靠后） */

/* b0.6.41：工具栏脱离文档流、钉在整屏底部；不再参与 #cabinet 列布局，
 * 因此不会挤动「游戏外框 + 手柄」的位置。z-index:5 压在皮肤装饰层(0)与游戏框之上。 */
/* b0.6.41：工具栏钉在屏幕底部、居中成一块"掌机面板"（不再是独立暗色长条）；
 * 脱离文档流故不挤动外框/手柄；宽度对齐控制台列，各主题给同色面板，浮于背景图上、像掌机的一部分。 */
/* 工具栏不再有圆角大底框（所有主题统一去除）：仅作按键的浮动容器，按钮自身即"掌机按键" */
#toolbar{ position:fixed; left:50%; transform:translateX(-50%); transform-origin:center bottom; bottom:10px; z-index:5; margin:0;
  width:calc(256px * var(--scale) + 30px); max-width:96vw;
  padding:6px 10px; padding-bottom:calc(6px + env(safe-area-inset-bottom, 0px));
  display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.tb{ background:#232323; color:#bbb; border:1px solid #444; padding:4px 8px;
  font-family:inherit; font-size:12px; cursor:pointer; }
.tb:hover{ background:#333; color:#fff; }

/* b0.6.43：工具栏可收起（默认 collapsed，只留右上角「设置」）。
 * 收起：#toolbar 隐藏、#tb-settings 显示；点设置展开，点返回再收起。
 * 网页版与 APK 共用，初始均 collapsed。 */
#toolbar.collapsed{ display:none; }
#tb-settings{ display:none; position:fixed; left:50%; transform:translateX(-50%); transform-origin:center bottom; bottom:10px; z-index:6; }
#toolbar.collapsed ~ #tb-settings{ display:block; }

/* 这两条只是 JS 起来之前的兜底档位。真正的缩放由 touch.js 的 fit() 按实际
 * 视口逐档算出来写成行内 --scale（行内优先级高于媒体查询），避免 360px 宽的
 * 手机被 1.5 倍的 384px 撑出横向滚动条。 */
@media (max-width:820px){ :root{ --scale:2; } }

/* ========================= 触摸设备增强 =========================
 * 只改 #fc-screen 之外的「机壳」部分。屏内一切尺寸必须保持在 256×240
 * 逻辑分辨率上，动一下就破坏 FC 版式。 */

/* 34px 按钮远低于 48dp 最小触控目标，手指按十次错三次。
 * 方向键 52px、AB 64px（最高频，给最大目标）。 */
html.coarse .pb{ width:calc(52px * 0.9 * var(--zoom) * min(var(--scale), 1)); height:calc(52px * 0.9 * var(--zoom) * min(var(--scale), 1)); font-size:20px; }
html.coarse .pb-r{ width:calc(64px * 0.9 * var(--zoom) * min(var(--scale), 1)); height:calc(64px * 0.9 * var(--zoom) * min(var(--scale), 1)); font-size:18px; margin-left:12px; }
html.coarse .tb{ padding:9px 12px; font-size:13px; }
/* 手机竖屏：游戏外框+手柄组向顶部磁吸（留 --safe-top 安全区），工具栏已固定到底部 */
html.coarse #cabinet{ justify-content:flex-start; }
/* 网页版行为：手机竖屏浏览时工具栏横向空间紧，隐藏「Σ 数据」按钮（按钮仍在 DOM，
 * 仅视觉隐藏，点击事件不会触发；横屏或桌面恢复显示）。 */
@media (orientation: portrait) and (pointer: coarse){
  #tb-sim{ display:none !important; }
}

/* 触摸端 :active 触发不可靠（滑动、多指时常丢），改用 touch.js 加的 .on 类 */
.pb.on{ background:#111; }
.pb-r.on{ background:#5e0f0f; }

/* ==================== 手柄皮肤主题（v1.41 需求② / v1.43 改默认=MD）====================
 *  切换方式：给 #pad 挂 .th-md / .th-fc / .th-gba，默认（索引 0）即 th-md。
 *
 *  两条硬约束，改这段务必遵守：
 *  ① 主题规则一律不写 width/height ——尺寸归 html.coarse 那两条管
 *     （粗指针设备 52/64px）。这里 #pad.th-x .pb 的 ID 特指性(1,2,0) 会压过
 *     html.coarse .pb(0,2,1)，一旦写了宽高就会把触摸端的大按钮打回 34px，
 *     手指按十次错三次的老毛病立刻复发。
 *  ② 同理，.pb.on / .pb-r.on 的按下反馈也会被 ID 压掉，
 *     所以每套主题都必须自己重写 .on 与 :active，否则按下去没反应。
 *  全部用 CSS 渐变 + 内外阴影实现，不引入任何位图，APK 体积零增长。 */

/* ---------- 主题 2：FC / Family Computer 拟物（b0.6.40④ 改真实 FC 机）----------
 * 外壳（body.th-fc）：深红机壳 + 香槟金前面板（见上方 body 皮肤块）。
 * 手柄：黑色 A/B 键 + 深红圆角矩形底色（.pad-ab 背板），方向键带深红描边。
 * 背板加在 .pad-ab 上——这是 FC 主题对"v1.42 起按钮悬空"的刻意例外，仅 FC 有。 */
#pad.th-fc .pad-ab{ display:flex; align-items:center; gap:0; }   /* 去掉共享红底框：A/B 各自独立红底框 */
#pad.th-fc .pb{
  border:1px solid #7a1414; border-radius:3px; color:#cfcfcf;          /* 深红描边 */
  background:linear-gradient(160deg,#4c4c4c 0%,#2b2b2b 42%,#141414 100%);
  text-shadow:0 1px 1px rgba(0,0,0,.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),
             inset 0 -2px 3px rgba(0,0,0,.65),
             0 2px 3px rgba(0,0,0,.6);
}
#pad.th-fc .pb-c{
  background:radial-gradient(circle at 50% 45%,#242424 0%,#111 62%,#050505 100%);
  border-color:#7a1414;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.9);   /* 十字键中心的凹陷圆盘 */
}
#pad.th-fc .pb-r{
  position:relative;                                                 /* 让 ::before 红底框相对自身定位 */
  border-radius:50%; border:1px solid #000; color:#fff;               /* 黑色 A/B 键 */
  background:radial-gradient(circle at 34% 28%,#3a3a3a 0%,#161616 50%,#000 100%);
  text-shadow:0 1px 1px rgba(0,0,0,.55);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.18),
             inset 0 -3px 4px rgba(0,0,0,.6),
             0 2px 3px rgba(0,0,0,.5);
}
#pad.th-fc .pb.on, #pad.th-fc .pb:active{
  background:linear-gradient(160deg,#1e1e1e 0%,#121212 50%,#080808 100%);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.9); transform:translateY(1px);
}
#pad.th-fc .pb-c.on, #pad.th-fc .pb-c:active{ transform:none; }  /* 中心块不是按键 */
#pad.th-fc .pb-r.on, #pad.th-fc .pb-r:active{
  background:radial-gradient(circle at 34% 28%,#222 0%,#0a0a0a 50%,#000 100%);
  box-shadow:inset 0 3px 6px rgba(0,0,0,.7); transform:translateY(2px);
}
/* A/B 各自独立的红色底框（圆角极小），黑键浮于其上；工具栏红面板同此风格 */
#pad.th-fc .pb-r::before{ content:""; position:absolute; inset:-7px -5px; z-index:-1;
  background:linear-gradient(160deg,#7a1414 0%,#4a0c0c 100%); border:1px solid #380909;
  border-radius:3px; box-shadow:inset 0 1px 2px rgba(255,255,255,.18), 0 2px 3px rgba(0,0,0,.4); }

/* ---------- 主题：GB / Game Boy DMG 拟物（b0.6.40④ 新增）----------
 * 外壳（body.th-gb）：鲜艳黄机壳（见上方 body 皮肤块）。
 * 手柄：深灰拟物按钮（方向键硬塑料灰 + A/B 深灰圆钮），不画背板、按钮悬空。 */
#pad.th-gb .pb{
  border:1px solid #0d0d0d; border-radius:6px; color:#e8e8e8;
  background:linear-gradient(165deg,#5a5a5a 0%,#3a3a3a 46%,#222 100%);
  text-shadow:0 1px 1px rgba(0,0,0,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),
             inset 0 -2px 3px rgba(0,0,0,.6),
             0 2px 3px rgba(0,0,0,.5);
}
#pad.th-gb .pb-c{
  background:radial-gradient(circle at 50% 44%,#2c2c2c 0%,#161616 68%,#0a0a0a 100%);
  border-color:#0d0d0d;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.85);
}
#pad.th-gb .pb-r{
  border-radius:50%; border:1px solid #0a0a0a; color:#fff;
  background:radial-gradient(circle at 33% 27%,#5a5a5a 0%,#343434 44%,#161616 100%);
  text-shadow:0 1px 1px rgba(0,0,0,.5);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.3),
             inset 0 -3px 5px rgba(0,0,0,.5),
             0 3px 5px rgba(0,0,0,.5);
}
#pad.th-gb .pb.on, #pad.th-gb .pb:active{
  background:linear-gradient(165deg,#3f3f3f 0%,#262626 50%,#141414 100%);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.9); transform:translateY(1px);
}
#pad.th-gb .pb-c.on, #pad.th-gb .pb-c:active{ transform:none; }
#pad.th-gb .pb-r.on, #pad.th-gb .pb-r:active{
  background:radial-gradient(circle at 33% 27%,#3f3f3f 0%,#222 48%,#0a0a0a 100%);
  box-shadow:inset 0 3px 6px rgba(0,0,0,.7); transform:translateY(2px);
}

/* ---------- 主题 3：GBA 拟物 ----------
 * 参照初代靛紫机型：深灰十字键 + 高光很强的圆润紫钮。
 * A/B 做斜向错位（A 偏上、B 偏下），这是 GBA 辨识度最高的一处细节。
 * v1.42 起同样去掉 .pad-dir / .pad-ab 的紫色机身底板，按钮悬空。 */
#pad.th-gba .pb{
  border:1px solid #0d0d12; border-radius:5px; color:#d7d3e6;
  background:linear-gradient(165deg,#4d4d59 0%,#2d2d37 45%,#16161d 100%);
  text-shadow:0 1px 1px rgba(0,0,0,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),
             inset 0 -2px 3px rgba(0,0,0,.62),
             0 2px 3px rgba(0,0,0,.55);
}
#pad.th-gba .pb-c{
  background:radial-gradient(circle at 50% 42%,#2b2b35 0%,#15151b 68%,#0a0a0e 100%);
  border-color:#0d0d12;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.85);
}
#pad.th-gba .pb-r{
  border-radius:50%; border:1px solid #241a4f; color:#efeaff;
  background:radial-gradient(circle at 33% 26%,#9b8ae4 0%,#5f4eb0 42%,#33266b 100%);
  text-shadow:0 1px 1px rgba(0,0,0,.5);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.4),
             inset 0 -3px 5px rgba(0,0,0,.45),
             0 3px 5px rgba(0,0,0,.5);
}
#pad.th-gba .pb-r[data-key="a"]{ transform:translateY(-5px); }
#pad.th-gba .pb-r[data-key="b"]{ transform:translateY(5px); }
#pad.th-gba .pb.on, #pad.th-gba .pb:active{
  background:linear-gradient(165deg,#212129 0%,#131318 50%,#08080b 100%);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.9); transform:translateY(1px);
}
#pad.th-gba .pb-c.on, #pad.th-gba .pb-c:active{ transform:none; }
#pad.th-gba .pb-r[data-key="a"].on, #pad.th-gba .pb-r[data-key="a"]:active{
  background:radial-gradient(circle at 33% 26%,#6d5cbe 0%,#3f3286 48%,#241a55 100%);
  box-shadow:inset 0 3px 6px rgba(0,0,0,.7); transform:translateY(-3px);
}
#pad.th-gba .pb-r[data-key="b"].on, #pad.th-gba .pb-r[data-key="b"]:active{
  background:radial-gradient(circle at 33% 26%,#6d5cbe 0%,#3f3286 48%,#241a55 100%);
  box-shadow:inset 0 3px 6px rgba(0,0,0,.7); transform:translateY(7px);
}

/* ---------- 主题 1（默认）：Material Design 拟物 ----------
 * 参照 Material Design 的 raised button / FAB：圆角、明显 elevation 阴影，
 * 按下时底部实体厚度收短 + 整体下沉，营造实体按键被压下的触感。
 * 十字键深蓝灰板，A/B 为 Indigo 圆形钮（MD 经典色）。v1.43 起作为默认主题。 */
#pad.th-md .pb{
  border:1px solid #1f2933; border-radius:8px; color:#eceff1;
  background:linear-gradient(165deg,#546e7a 0%,#37474f 46%,#263238 100%);
  text-shadow:0 1px 1px rgba(0,0,0,.7);
  box-shadow:0 3px 0 #1c262b, 0 4px 6px rgba(0,0,0,.5);   /* elevation + 底部实体厚度 */
}
#pad.th-md .pb-c{
  background:radial-gradient(circle at 50% 44%,#2b373d 0%,#1b2429 68%,#10171a 100%);
  border-color:#1f2933;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.85);
}
#pad.th-md .pb-r{
  border-radius:50%; border:1px solid #283593; color:#eef0ff;
  background:radial-gradient(circle at 33% 27%,#7986cb 0%,#3f51b5 44%,#283593 100%);
  text-shadow:0 1px 1px rgba(0,0,0,.5);
  box-shadow:0 4px 0 #1a237e, 0 5px 8px rgba(0,0,0,.5);   /* FAB 经典 elevation */
}
#pad.th-md .pb.on, #pad.th-md .pb:active{
  background:linear-gradient(165deg,#455a64 0%,#263238 50%,#1b2429 100%);
  box-shadow:0 1px 0 #1c262b, 0 1px 2px rgba(0,0,0,.6); transform:translateY(2px);
}
#pad.th-md .pb-c.on, #pad.th-md .pb-c:active{ transform:none; }
#pad.th-md .pb-r.on, #pad.th-md .pb-r:active{
  background:radial-gradient(circle at 33% 27%,#5c6bc0 0%,#303f9f 48%,#1a237e 100%);
  box-shadow:0 1px 0 #1a237e, 0 1px 3px rgba(0,0,0,.6); transform:translateY(3px);
}

/* 模式列表里神兵逐鹿（隐藏模式）用低饱和度浅紫，暗示其神秘 / 体验属性 */
.mi-shenbing{ color:#b39ddb; }
.mi-shenbing.sel{ color:#c7b3e8; text-shadow:0 0 4px rgba(179,157,219,.6); }

/* 开始训练菜单：四招募模式各用阵营色，遭遇之战白色，神兵逐鹿保持浅紫。
 * v2.2.15：降低四模式饱和度，与「神兵逐鹿」的低饱和风格对齐（原高饱和色过刺眼）。 */
.mi-kuangfu{ color:#6fae6f; }   .mi-kuangfu.sel{ color:#6fae6f; text-shadow:0 0 4px rgba(111,174,111,.6); }
.mi-caowei{ color:#84a0d4; }    .mi-caowei.sel{ color:#84a0d4; text-shadow:0 0 4px rgba(132,160,212,.6); }
.mi-dongwu{ color:#c47a96; }    .mi-dongwu.sel{ color:#c47a96; text-shadow:0 0 4px rgba(196,122,150,.6); }
.mi-qunxiong{ color:#cfae6a; }  .mi-qunxiong.sel{ color:#cfae6a; text-shadow:0 0 4px rgba(207,174,106,.6); }
.mi-encounter{ color:var(--c-white); }
.mi-encounter.sel{ color:var(--c-white); text-shadow:0 0 4px rgba(252,252,252,.6); }
/* 网络对战（P0）：青，区别于单机四模式与遭遇战白 */
.mi-netplay{ color:#5fd0d0; }
.mi-netplay.sel{ color:#5fd0d0; text-shadow:0 0 4px rgba(95,208,208,.6); }

/* 遭遇之战战前设置界面 */
.enc-sub{ color:var(--c-green); margin:6px 0 2px; font-size:11px; }
.enc-streak{ margin-top:6px; color:var(--c-dgray); font-size:11px; }
.enc-streak{ color:#7fd67f; }

/* 禁掉滚动/双指缩放/双击缩放/下拉刷新——都会把固定版式的游戏搞乱 */
#pad, #screen-wrap{ touch-action:none; }
#fc-screen{ touch-action:manipulation; }   /* 屏内菜单仍可直接点，但去掉点击延迟 */

/* 安卓版(APK)隐藏放大/缩小按钮：每次按了界面会突然巨化，体验差。
 * 仅 APK（注入了 Android 桥对象）隐藏，网页版（含安卓手机浏览器）保留。
 * 判定由 app.js 给 <html> 加 'android' 类（仅当桥对象存在）。 */
html.android #tb-scale, html.android #tb-scale-out, html.android #tb-fullscreen{ display:none; }

/* 总攻提示条已退役（v0.2）。
 * 它原本要传达两件事：「现在是总攻」「按 B 可以停」。这两件事现在都由画面本身讲了——
 * 总攻一开，敌我十人整体前压成一字排开，比任何文字提示都直观；停下来时队形弹回阵位，
 * 玩家立刻看得见。多挂一条橙字反而把 FC 版面搞乱。
 * 元素与 showAutoFlag() 调用点保留（避免散落一堆判空），这里直接钉死不显示。 */
#bt-autoflag{ display:none !important; }

/* 屏内「B 返回」键已移除（需求 v1.33-④）：B 功能改由点按「某某的指令」文本框区域触发。 */

/* ============ 群雄览录（进入游戏框架，与 .win 一致） ============ */
#sc-gallery{ background:#000; }
/* 势力页签：复用 .w-tabs 的几何 + .k-tab 配色，仅类名改为 .g-tab 以免与选将耦合 */
#sc-gallery .w-gtabs{ top:2px; left:2px; width:252px; height:18px; padding:2px;
  display:flex; gap:2px; align-items:center; }
#sc-gallery .g-tab{ flex:1; text-align:center; height:12px; line-height:12px; cursor:pointer;
  color:var(--c-dgray); }
#sc-gallery .g-tab.on{ color:#000; }
#sc-gallery .g-tab.shu.on{ background:var(--c-lgreen); }
#sc-gallery .g-tab.wei.on{ background:var(--c-lblue); }
#sc-gallery .g-tab.wu.on{ background:var(--c-pink); color:#fff; }
#sc-gallery .g-tab.qun.on{ background:var(--c-orange); }

/* 名单：左窄列，名称 + 字；可滚动，与选将 roster 同款光标（▶ + 深蓝底） */
#sc-gallery .w-glist{ top:22px; left:2px; width:112px; height:186px; padding:2px; }   /* v2.2.15b6：92→112 加宽左侧名单；高 192→186（底沿 208）给底部导航框让高 */
/* 表头与名单严格对齐：首列「武将」复用名单的 14px 左缩进 + 44px 宽；次列「字」与 .gzi 同宽同右对齐。
 * 光标安全距离：左缩进由 8px 提到 14px（与主菜单 .mi 同款），并给 ::before 定宽 10px，
 * 让 ▶ 与武将名之间留约 5px 间隙（修「光标贴名字太近」）。名字列 50→44px 补偿缩进——
 * 人名最长 3 字（约 36px）仍有余量；名字列 50→44→37px 补偿缩进。「字」列 30px，v2.2.15 起行与表头各留 7px 右侧滚动条槽，避开可见滚动条（修「字」被遮挡）。 */
#sc-gallery .glist-head{ display:flex; color:var(--c-orange); height:12px; padding-left:14px; padding-right:7px; margin-top:-1px;  /* v2.2.15b11：表头字上移 1px */
  border-bottom:1px solid var(--c-dgray); margin-bottom:2px; }
#sc-gallery .glist-head span:nth-child(1){ width:44px; text-align:left; flex:0 0 auto; }
#sc-gallery .glist-head span:nth-child(2){ width:30px; text-align:right; flex:0 0 auto; }
#sc-gallery .glist-body{ height:156px; overflow-y:auto; }   /* v2.2.14：137→157 吃满新增高度；v2.2.15b6 配合名单框降 6px 改为 156 */
/* v2.2.14：取消隐藏滚动条（原 width:0 让人看不出可滚）——走全站 3px 暗灰条，与名册一致。 */
#sc-gallery .g-row{ display:flex; height:13px; line-height:13px; cursor:pointer;
  position:relative; padding-left:14px; padding-right:7px; }
#sc-gallery .g-row .gn{ width:44px; overflow:hidden; flex:0 0 auto; }
#sc-gallery .g-row .gzi{ width:30px; text-align:right; color:var(--c-dgray); overflow:hidden; flex:0 0 auto; }
#sc-gallery .g-row.sel{ background:var(--c-dblue); }
#sc-gallery .g-row.sel::before{ content:'▶'; position:absolute; left:2px; width:10px; text-align:left; }
#sc-gallery .glist-page{ height:12px; line-height:12px; text-align:center; color:var(--c-dgray);
  transform:scale(.8); margin-top:-1px; }  /* v2.2.15b10：整行上移 1px */

/* 详情：右宽列，头像+战斗图、姓名(国色)、字/号/籍/生卒、生平(可滚动) */
#sc-gallery .w-gdetail{ top:22px; left:116px; width:138px; height:186px; padding:2px; overflow-y:auto; }   /* v2.2.15：left 96→116 + width 158→138；v2.2.15b6 高 192→186 + padding 3→2（底沿 208，与 w-glist 对齐） */
#sc-gallery .g-top{ display:flex; gap:2px; height:30px; margin-bottom:2px; align-items:flex-start; }
#sc-gallery .g-portrait, #sc-gallery .g-sprite{ width:28px; height:28px; flex:0 0 auto;
  object-fit:cover; object-position:center top; image-rendering:pixelated; }
/* v2.1.0 影武者版立绘：真素材 + 黑白高对比镜像（与战斗内影·XXX 视觉一致） */
#sc-gallery .g-sprite.g-shadow-spr{ filter:grayscale(1) contrast(1.6); }
#sc-gallery .g-noface{ display:flex; align-items:center; justify-content:center;
  color:var(--c-dgray); font-size:9px; }
#sc-gallery .g-name{ height:13px; line-height:13px; font-size:12px; color:var(--c-orange);
  white-space:nowrap; overflow:hidden; }
#sc-gallery .g-meta{ font-size:9px; line-height:11px; margin:2px 0; color:var(--c-gray);
  white-space:nowrap; overflow:hidden; }
/* 览录签名：与信息框/全屏窗同款蓝字，删除「签」标签后单一系统 */
#sc-gallery .g-sign{ font-size:9px; line-height:11px; color:var(--c-lblue);
  white-space:nowrap; overflow:hidden; margin:2px 0; }
#sc-gallery .g-meta .lab{ color:var(--c-dgray); margin:0 2px 0 6px; }
#sc-gallery .g-meta .lab:first-child{ margin-left:0; }
#sc-gallery .g-bio{ height:82px; overflow-y:auto; font-size:9px; line-height:12px;
  color:var(--c-white); white-space:normal; word-break:break-word; text-align:justify;
  border-top:1px solid var(--c-dgray); padding-top:2px; }
#sc-gallery .g-bio2{ height:16px; overflow-y:auto; font-size:9px; line-height:12px;
  color:var(--c-yellow, #fc8); white-space:normal; word-break:break-word; text-align:justify;
  border-top:1px solid var(--c-dgray); padding-top:2px; margin-top:2px; }

/* 底部操作条：复用 .m-foot 的 .fb / .m-hint 按钮（左 B 右 A），与弹窗提示条同一套 */
#sc-gallery .w-gfoot{ top:210px; left:2px; width:252px; height:30px; padding:2px;   /* v2.2.15b6：高 24→30 加高导航框；top 216→210 与内容框底沿(208)留 2px；padding/gap 统一 2px */
  display:flex; align-items:center; gap:2px; }
#sc-gallery .w-gfoot .m-hint{ flex:1; text-align:center; font-size:8px; transform:scale(.95);
  white-space:nowrap; overflow:hidden; color:var(--c-dgray); }

/* b0.6.15 / v2.0.62：阵型选择——flex 左右两栏，.fm-layout 作为定位基准。
 * 右栏立绘区固定高度；左栏阵名列表限制高度内部滚动；
 * 红蓝图例绝对定位在 .fm-layout 左下角，底部与第 5 立绘底沿对齐，宽度自然向右延伸不溢出左边缘。 */
.fm-layout{ display:flex; gap:10px; align-items:stretch; position:relative; }
.fm-list{ flex:1 1 auto; min-width:0; max-height:156px; overflow-y:auto; }
.fm-preview{ flex:0 0 auto; width:120px; }   /* 立绘位置不动 */
.fm-mock{ margin:2px 0; }
/* b0.6.27：纵向步进抬到 33px（≥1.5 个立绘高），5 将占 4×33+22=154px；
 * 容器给 156px——阵图兵略页高 162px（不滚动）刚好吃得下，再大就要裁切末将。 */
.fm-row{ position:relative; height:156px; }   /* b0.6.27：5×SLOT_H(33)+立绘高（原 104） */
/* 复用战斗 .bt-slot/.spr/.gen-sprite 几何，仅在本弹窗内相对堆叠 + 同盟侧 translateX(--dx) */
.fm-mock .bt-slot{ position:absolute; width:auto; height:16px; }   /* 绝对定位→top:i*SLOT_H 精确生效（原 relative 会与文档流叠加错位） */
.fm-mock .bt-slot .spr{ left:30px; top:0; bottom:auto; transform:translateX(var(--dx,0px)); }   /* 锚定顶部，避免立绘向上溢出裁切（首将顶对齐散开阵） */
.fm-mock .bt-slot .gen-sprite{ max-height:30px; image-rendering:pixelated; }   /* b0.6.16：立绘缩小至 75%（40→30） */
/* b0.6.26：阵图兵略阵型介绍里的立绘整体左移一点（仅 cx-fmt-r，不影响阵营选择预览） */
.cx-fmt-r .fm-mock{ transform:translateX(-7px); }
/* b0.6.27：阵图兵略阵型页立绘 30→22px。理由是算术不是审美——手册页固定 162px
 * 且不滚动，要让纵向步进达到 1.5 个立绘高（33px），5 将总高必须 ≤156px：
 * 4×33+h ≤156 → h ≤22。立绘再大就得牺牲间距，用户要的是间距。 */
.cx-fmt-r .fm-mock .bt-slot .gen-sprite{ max-height:22px; }
.fm-preview .fm-mock .bt-slot .gen-sprite{ max-height:21px; }   /* b0.6.25：阵营选择预览再缩 30%（30→21），slot 位置不变 */
.fm-detail{ width:100%; margin-top:6px; }   /* 阵型注释左右铺开占满宽度 */

/* 阵型红蓝箭头图例——位置按 2.0.80，排版/文案按 v2.0.84。
 * ⚠ 分工（用户拍板，勿再混改）：
 *   ① 位置：绝对定位在 .fm-layout 左下角（left:0/bottom:0），不进入 .fm-preview 流
 *      → 武将立绘位置恒定不变。
 *   ② 排版：1×2 两行（红一行、蓝另起一行）——不回退成 2.0.80 的 2×2 四格。
 *   ③ 文案：v2.0.84 新版（红▲▼=物理攻击倍率 / 蓝▲▼=受到伤害倍率）——不回退旧文案。
 * 字号 7px：保证最长那行（蓝▲▼=受到伤害倍率(物理+计策)）不溢出。 */
.fm-legend{ position:absolute; left:0; bottom:0;
  display:flex; flex-direction:column; gap:2px;
  text-align:left; font-size:7px; line-height:11px; color:var(--c-dgray);
  white-space:nowrap; }
.fm-legend > div{ display:flex; align-items:center; gap:2px; }

/* v2.0.51 阵型预览箭头：立绘右侧箭头（v2.0.84 最终 = 2 行 1 列，共 2 个，用户拍板）。
 * 上 红=物理攻击倍率(mods.atk)、下 蓝=受到伤害倍率(mods.def，物理+计策都吃)；
 * 不用 2.0.80 的 2×2 四箭头——原版无独立的「计策攻/受计」阵型维度（tacDef 已从数据删除）。
 * 方向统一"数值方向"：乘子 >1→▲、<1→▼；无变化渲染 .ph 占位（visibility:hidden）；
 * 整体与立绘间距 = 一个箭头宽（right:-26px）。两箭头上下排列留 1px；总高 17px < 立绘 21px，垂直居中。 */
.fm-mock .bt-slot .fm-arrows{ position:absolute; right:-26px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:1px; pointer-events:none; }
.fm-mock .bt-slot .fm-arrow{ font-size:8px; line-height:8px; height:8px;
  text-shadow:1px 1px 0 #000, -1px -1px 0 #000; }
.fm-mock .bt-slot .fm-arrow.ph{ visibility:hidden; }

/* v2.0.51 需求①：敌人侧命令头像左右镜像（素材头像朝右，敌人应面向我方） */
#bt-actor-face.face-flip img{ transform:scaleX(-1); }


/* v2.0.86 群雄览录：生卒年「通行说法」标记。
 * 7px 灰字贴在同一行末尾——生卒行本身只有「161 – 223」这么点内容，
 * 标记做成独立小字而不是另起一行，是为了不把下面的传记挤出可视区。 */
.g-meta .g-est{ font-size:7px; color:var(--c-dgray); margin-left:2px; }

/* ---------- v2.1.59 开场免责声明：黑场 + 四行字逐行渐显 + 淡出 ---------- */
#sc-splash{ background:#000; z-index:90; }
#sc-splash.fading{ opacity:0; transition:opacity .7s ease; pointer-events:none; }  /* v2.2.15：淡出期间透明层必须禁用 pointer-events，否则会拦掉其下弹窗/菜单的全部点击 */
.splash-box{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px;
}
.splash-line{
  opacity:0; transform:translateY(6px);
  color:#e6e0d2; font-size:16px; line-height:1.6;
  letter-spacing:.28em; text-indent:.28em;   /* text-indent 补偿末字后的字距，保证视觉居中 */
  text-shadow:0 2px 6px rgba(0,0,0,.9);
  animation:splashIn .85s ease forwards;
}
#sc-splash .splash-line:nth-child(1){ animation-delay:.40s; }
#sc-splash .splash-line:nth-child(2){ animation-delay:1.00s; }
#sc-splash .splash-line:nth-child(3){ animation-delay:1.60s; }
#sc-splash .splash-line:nth-child(4){ animation-delay:2.20s; }
@keyframes splashIn{
  from{ opacity:0; transform:translateY(6px); }
  to  { opacity:1; transform:translateY(0); }
}
.splash-load{
  position:absolute; left:0; right:0; bottom:16%;
  text-align:center; color:#8d8578; font-size:11px; letter-spacing:.2em;
  opacity:0; transition:opacity .45s ease;
}
.splash-load.on{ opacity:1; }
.splash-skip{
  position:absolute; left:0; right:0; bottom:8%;
  text-align:center; color:#5f5a51; font-size:10px; letter-spacing:.16em;
  opacity:0; transition:opacity .6s ease;
}
.splash-skip.on{ opacity:1; }
/* 窄屏：字号与间距同步收缩，四行仍居中不溢出 */
@media (max-width:380px){
  .splash-line{ font-size:14px; letter-spacing:.2em; text-indent:.2em; }
  .splash-box{ gap:13px; }
}

/* ===== v2.1.64：CRT 滤镜叠层（工具栏「▦ 滤镜」按钮控制）=====
 * 全屏覆盖游戏内容（含文字，用户要求不豁免），z-index:4 压在 #cabinet(1) 之上、
 * #toolbar(5)/#tb-settings(6) 之下，保证切换按钮始终可读可点。pointer-events:none 不挡操作。
 * Lite=轻量扫描线+孔栅；Full=加重暗角（曲率感）+bloom 余辉滚动条+backdrop 提色。
 * 三态由 body class 切换（crt-lite / crt-full）。 */
#crt-overlay{ position:fixed; inset:0; z-index:4; pointer-events:none; display:none; }

/* Lite：细扫描线 + 极淡 RGB 孔栅 + 轻微暗角 */
body.crt-lite #crt-overlay{
  display:block;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,0.16) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(to right,
      rgba(255,0,0,0.05) 0 1px, rgba(0,255,0,0.05) 1px 2px, rgba(0,0,255,0.05) 2px 3px, transparent 3px 4px);
  box-shadow: inset 0 0 120px 28px rgba(0,0,0,0.32);
}

/* ===== CRT Full（新增，2026-09-16 用户拍板）：细扫描线 + 孔栅 + 柔暗角 + 辉光提亮 + 余辉滚动条 =====
 * 画面整体提亮 + 增辉光：三层压暗各降一档（扫描线 .30→.20、暗角 .58→.36、
 * 内阴影 .6/48→.36/34），backdrop 提亮 1.04→1.20，新增 ::after 整屏辉光；四角不再压黑。
 * 净亮度：中心 ≈0.90×1.20≈1.08、四角 ≈0.90×0.64×0.64×1.20≈0.44（原 Full 四角仅 ≈0.15）。 */
body.crt-full #crt-overlay{
  display:block;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,0.20) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(to right,
      rgba(255,0,0,0.06) 0 1px, rgba(0,255,0,0.06) 1px 2px, rgba(0,0,255,0.06) 2px 3px, transparent 3px 4px),
    radial-gradient(132% 132% at 50% 50%, transparent 62%, rgba(0,0,0,0.36) 100%);
  box-shadow: inset 0 0 150px 34px rgba(0,0,0,0.36);
  -webkit-backdrop-filter: saturate(1.30) contrast(1.04) brightness(1.20);
  backdrop-filter: saturate(1.30) contrast(1.04) brightness(1.20);
}
/* Full 整屏辉光：柔光晕抬升观感亮度，营造荧光面板泛光（不透明度刻意克制） */
body.crt-full #crt-overlay::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(125% 125% at 50% 46%, rgba(170,255,230,0.10), rgba(120,190,255,0.05) 54%, transparent 80%);
}

/* ===== CRT Dark（原 Full 更名，2026-09-16）：粗扫描线 + 明显孔栅 + 强暗角（曲率感）=====
 * 观感与原 Full 完全一致（曲率感更强、整体偏暗），保留给偏好旧手感者。 */
body.crt-dark #crt-overlay{
  display:block;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,0.30) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(to right,
      rgba(255,0,0,0.08) 0 1px, rgba(0,255,0,0.08) 1px 2px, rgba(0,0,255,0.08) 2px 3px, transparent 3px 4px),
    radial-gradient(125% 125% at 50% 50%, transparent 52%, rgba(0,0,0,0.58) 100%);
  box-shadow: inset 0 0 170px 48px rgba(0,0,0,0.6);
  -webkit-backdrop-filter: saturate(1.25) contrast(1.08) brightness(1.04);
  backdrop-filter: saturate(1.25) contrast(1.08) brightness(1.04);
}

/* Full / Dark 共用：余辉滚动条 */
body.crt-full #crt-overlay::before,
body.crt-dark #crt-overlay::before{
  content:""; position:absolute; left:0; right:0; top:0; height:22%;
  background: linear-gradient(to bottom, transparent, rgba(180,255,220,0.07), transparent);
  animation: crt-roll-bar 9s linear infinite;
}
@keyframes crt-roll-bar{ from{ transform:translateY(-30%); } to{ transform:translateY(480%); } }

/* ===== v2.1.66：CRT 荧光余辉（限定游戏画面框 #screen-wrap，不波及 #pad / 主题背景）=====
 * 该层由 app.js 注入为 #screen-wrap 的最后一个子节点，inset:0 覆盖整个游戏框。
 * backdrop-filter 只采样游戏 canvas / 单位其后方内容，因层在 #screen-wrap 内、#pad 与
 * body 主题背景在其外，故荧光余辉天然不增强虚拟手柄与主题背景。
 * 激活条件：① 光效开关开启（body.fx-glow，默认开）；② CRT 开启（crt-lite / crt-full / crt-dark）。
 * 二者同时成立才显示，任一关闭即无余辉；Full/Dark 比 Lite 更强。整层 z-index 仍低于
 * 全屏 #crt-overlay(4)，故扫描线/暗角始终压在最上。 */
#phosphor-overlay{ position:absolute; inset:0; z-index:9; pointer-events:none; display:none; }
body.fx-glow.crt-lite #phosphor-overlay{
  display:block;
  -webkit-backdrop-filter: blur(0.3px) brightness(1.04) saturate(1.06);
  backdrop-filter: blur(0.3px) brightness(1.04) saturate(1.06);
}
body.fx-glow.crt-full #phosphor-overlay{
  display:block;
  -webkit-backdrop-filter: blur(0.2px) brightness(1.14) saturate(1.20);
  backdrop-filter: blur(0.2px) brightness(1.14) saturate(1.20);
}
body.fx-glow.crt-dark #phosphor-overlay{
  display:block;
  -webkit-backdrop-filter: blur(0.2px) brightness(1.08) saturate(1.14);
  backdrop-filter: blur(0.2px) brightness(1.08) saturate(1.14);
}
/* 极淡磷光呼吸（余辉感），不抢戏 */
#phosphor-overlay::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 120% at 50% 50%, rgba(180,255,220,0.05), transparent 70%);
  animation: phosphor-breathe 4.5s ease-in-out infinite;
}
@keyframes phosphor-breathe{ 0%,100%{ opacity:.45 } 50%{ opacity:.9 } }

/* ===== v2.1.66：局部辉光（选中光标 + 命中 + 伤害浮字）=====
 * 仅作用于游戏内容（DOM 选中态 / 命中态 / 伤害数字）；受「光效」开关（body.fx-glow）控制，默认开。
 * 命中抖动（.e-hit 的 shake）为常驻核心反馈，不在此开关范围；此处仅叠加辉光。 */
/* 战斗目标选中光标：黄白描边辉光，套在立绘与 ▶/◀ 闪烁标记上 */
body.fx-glow .bt-slot.tsel .spr, body.fx-glow .bt-slot.tsel-all .spr{
  filter: drop-shadow(0 0 5px rgba(255,230,120,.95));
}
body.fx-glow .bt-slot.tsel .spr::after, body.fx-glow .bt-slot.tsel-all .spr::after{
  filter: drop-shadow(0 0 4px rgba(255,230,120,1));
}
/* 命中暖色辉光（抖动本身常驻，见 .e-hit） */
body.fx-glow .e-hit{ filter: drop-shadow(0 0 4px rgba(255,120,90,.9)); }
/* 伤害 / 治疗浮字加柔光，暴击、治疗按原色 tint */
body.fx-glow .dmg-pop{ filter: drop-shadow(0 0 3px rgba(255,240,160,.85)); }
body.fx-glow .dmg-pop.crit{ filter: drop-shadow(0 0 4px rgba(255,170,60,.95)); }
body.fx-glow .dmg-pop.heal{ filter: drop-shadow(0 0 4px rgba(140,255,150,.9)); }
