/* 界面只有一套：代码绘制，按手机比例铺满。规则挂在 html[data-ui="v2"] 下（ui-skin.js 固定写上），盖过 index.html 里的基础样式。
   设计宽 720：1 个设计单位 --u = 壳宽 ÷ 720。顶栏贴顶、底部贴底，多出来的高度给地图。 */

/* ---------- 颜色、尺寸、字号 ---------- */
html[data-ui="v2"] {
  --sg-paper-hi: #fbe8bd;
  --sg-paper-lo: #e9c88c;
  --sg-paper: #f6d79a;
  --sg-paper-in: #fff3d6;
  --sg-wood: #7a4a1e;
  --sg-wood-dk: #3a220c;
  --sg-wood-lt: #a77a45;
  --sg-ink: #4a2c12;
  --sg-ink-soft: #7a5a3a;
  --sg-gold-hi: #ffd977;
  --sg-gold: #e6a817;
  --sg-gold-line: #e0a640;
  --sg-ok: #2f7a25;
  --sg-warn: #b07a00;
  --sg-bad: #c0281e;
  --sg-night: rgba(30, 18, 8, 0.88);
  --sg-font: "Noto Sans SC", "Microsoft YaHei", "微软雅黑", sans-serif;
  /* 淡爪印：顶栏没有出战宠物的空框、宠物列表的空栏。 */
  --sg-paw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%237a4a1e' fill-opacity='.3'%3E%3Cellipse cx='16' cy='21.5' rx='7.2' ry='6.2'/%3E%3Cellipse cx='7.4' cy='13.4' rx='2.8' ry='3.5' transform='rotate(-22 7.4 13.4)'/%3E%3Cellipse cx='12.6' cy='8.2' rx='2.8' ry='3.6' transform='rotate(-8 12.6 8.2)'/%3E%3Cellipse cx='19.4' cy='8.2' rx='2.8' ry='3.6' transform='rotate(8 19.4 8.2)'/%3E%3Cellipse cx='24.6' cy='13.4' rx='2.8' ry='3.5' transform='rotate(22 24.6 13.4)'/%3E%3C/svg%3E");
}
html[data-ui="v2"] #shell {
  width: min(100vw, calc(100dvh * 9 / 16));
  height: min(100dvh, calc(100vw * 22 / 9));
  border-radius: 0;
  box-shadow: none;
  background: radial-gradient(120% 70% at 50% 42%, #3a2814 0%, #1a1009 72%);
  container-type: size;
  --u: calc(100cqw / 720);
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --topH: calc(140 * var(--u) + var(--sat));
  --botH: calc(248 * var(--u) + var(--sab));
  --bw: calc(4 * var(--u));
  --r: calc(16 * var(--u));
  --fs-xs: max(10px, calc(19 * var(--u)));
  --fs-s: max(11px, calc(22 * var(--u)));
  --fs-m: max(12px, calc(25 * var(--u)));
  --fs-l: max(14px, calc(30 * var(--u)));
  --fs-xl: max(17px, calc(38 * var(--u)));
  --wood-bar:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 calc(3 * var(--u)), transparent calc(3 * var(--u)) calc(13 * var(--u))),
    linear-gradient(180deg, #a06c38 0%, #7d4f24 48%, #5e3a18 100%);
  --paper-bg: linear-gradient(var(--sg-paper-hi), var(--sg-paper-lo));
}
/* 比 9:16 宽（平板横竖、电脑）：照旧居中，留圆角。 */
@media (min-aspect-ratio: 9/16) {
  html[data-ui="v2"] #shell { border-radius: 18px; box-shadow: 0 0 0 3px #3a3224; }
}

/* ---------- 通用组件（以后各界面都用这一套） ---------- */
html[data-ui="v2"] .sgCard {
  box-sizing: border-box;
  background: var(--paper-bg);
  border: var(--bw) solid var(--sg-wood);
  border-radius: var(--r);
  box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, 0.45);
  color: var(--sg-ink);
  font: 700 var(--fs-m)/1.35 var(--sg-font);
}
html[data-ui="v2"] .sgHead {
  display: flex; align-items: center; gap: calc(12 * var(--u));
  margin: calc(-4 * var(--u)) calc(-4 * var(--u)) 0;
  padding: calc(6 * var(--u)) calc(16 * var(--u));
  border-radius: calc(12 * var(--u)) calc(12 * var(--u)) 0 0;
  background: var(--wood-bar);
  color: var(--sg-paper-hi);
  font: 900 var(--fs-l)/1.2 var(--sg-font);
  text-shadow: 0 1px 0 #2a1606;
}
html[data-ui="v2"] .sgHead b { flex: 1; font-weight: 900; }
html[data-ui="v2"] .sgBtn {
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 calc(16 * var(--u));
  border: calc(3 * var(--u)) solid var(--sg-wood);
  border-radius: calc(12 * var(--u));
  background: var(--sg-paper);
  color: var(--sg-ink);
  font: 800 var(--fs-m)/1 var(--sg-font);
  box-shadow: 0 calc(3 * var(--u)) 0 rgba(58, 34, 12, 0.55);
  cursor: pointer;
}
html[data-ui="v2"] .sgBtn.gold, html[data-ui="v2"] .sgBtn.on {
  background: linear-gradient(var(--sg-gold-hi), var(--sg-gold));
}
html[data-ui="v2"] .sgBtn:active { transform: translateY(calc(2 * var(--u))); box-shadow: 0 1px 0 rgba(58, 34, 12, 0.55); }
html[data-ui="v2"] .sgBtn:disabled { opacity: 0.45; }
html[data-ui="v2"] .sgClose {
  box-sizing: border-box;
  width: calc(56 * var(--u)); height: calc(44 * var(--u));
  border: calc(3 * var(--u)) solid var(--sg-wood-dk);
  border-radius: calc(10 * var(--u));
  background: var(--sg-paper);
  color: var(--sg-ink);
  font: 900 var(--fs-m)/1 var(--sg-font);
  cursor: pointer;
}
html[data-ui="v2"] .sgSeg { display: inline-flex; border: calc(3 * var(--u)) solid var(--sg-wood); border-radius: calc(12 * var(--u)); overflow: hidden; }
html[data-ui="v2"] .sgSeg button {
  min-width: calc(110 * var(--u)); height: calc(52 * var(--u));
  border: 0; border-left: calc(2 * var(--u)) solid var(--sg-wood-lt);
  background: var(--sg-paper-in); color: var(--sg-ink-soft);
  font: 800 var(--fs-m)/1 var(--sg-font); cursor: pointer;
}
html[data-ui="v2"] .sgSeg button:first-child { border-left: 0; }
html[data-ui="v2"] .sgSeg button.on { background: linear-gradient(var(--sg-gold-hi), var(--sg-gold)); color: var(--sg-ink); }
html[data-ui="v2"] .sgRow {
  display: flex; align-items: center; justify-content: space-between; gap: calc(16 * var(--u));
  padding: calc(14 * var(--u)) 0;
  border-bottom: calc(2 * var(--u)) dashed rgba(122, 74, 30, 0.35);
}
html[data-ui="v2"] .sgRow > span { font: 800 var(--fs-m)/1.3 var(--sg-font); }
html[data-ui="v2"] .sgHint { margin: calc(12 * var(--u)) 0 0; color: var(--sg-ink-soft); font: 600 var(--fs-xs)/1.5 var(--sg-font); }
html[data-ui="v2"] .sgChip {
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  border: calc(2 * var(--u)) solid var(--sg-gold-line);
  border-radius: 999px;
  background: var(--sg-night);
  color: #fff3d0;
  font: 800 var(--fs-s)/1 var(--sg-font);
}
/* 滚动条：壳里的原生滚动条一律藏掉（原生滚动条上只显示系统箭头光标，鱼骨光标管不到；出现、消失还会挤掉内容宽度），
   ui-scroll.js 给每个滚动区盖一根自己画的（和聊天框的 #chatBar 同一个样子），盖在内容上、不占宽度。
   新加能滚的地方要在 ui-scroll.js 的 SCROLLERS 里登记（或写 data-scroll），不然没有滚动条可拖。 */
html[data-ui="v2"] #shell, html[data-ui="v2"] #shell * { scrollbar-width: none !important; }
html[data-ui="v2"] #shell::-webkit-scrollbar, html[data-ui="v2"] #shell *::-webkit-scrollbar { display: none; width: 0; height: 0; }
html[data-ui="v2"] .sgTrack {
  position: absolute; z-index: 3;
  box-sizing: border-box;
  border-radius: 999px;
  background: rgba(92, 51, 20, 0.22);
  box-shadow: inset 0 0 0 1px rgba(74, 44, 18, 0.35);
  pointer-events: auto; touch-action: none;
}
html[data-ui="v2"] .sgTrack[hidden] { display: none; }
html[data-ui="v2"] .sgTrack.y { width: max(6px, calc(10 * var(--u))); }
html[data-ui="v2"] .sgTrack.x { height: max(6px, calc(10 * var(--u))); }
html[data-ui="v2"] .sgThumb {
  position: absolute; left: 0; top: 0;
  box-sizing: border-box;
  border-radius: 999px;
  background: linear-gradient(90deg, #f6e2b4, #c48945);
  box-shadow: inset 0 0 0 1px #5c3314, 0 1px 0 rgba(255, 255, 255, 0.4);
}
html[data-ui="v2"] .sgTrack.y .sgThumb { width: 100%; }
html[data-ui="v2"] .sgTrack.x .sgThumb { height: 100%; background: linear-gradient(#f6e2b4, #c48945); }
html[data-ui="v2"] .sgTrack:hover .sgThumb, html[data-ui="v2"] .sgTrack.on .sgThumb { filter: brightness(1.12); }
/* 横向的条按住鼠标拖时：里面的卡片不跟着按下变色。 */
html[data-ui="v2"] .sgDragging, html[data-ui="v2"] .sgDragging * { pointer-events: none; }
html[data-ui="v2"] .sgDragging { pointer-events: auto; }

/* ---------- 外框：顶栏、两侧细边、战斗时补上方空档 ---------- */
html[data-ui="v2"] #v2Frame { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
html[data-ui="v2"] #v2Top {
  display: block;
  position: absolute; left: 0; right: 0; top: 0; height: var(--topH);
  background: var(--wood-bar);
  box-shadow: inset 0 calc(-4 * var(--u)) 0 var(--sg-wood-dk), inset 0 calc(-7 * var(--u)) 0 var(--sg-gold-line), 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}
html[data-ui="v2"] #v2RailL, html[data-ui="v2"] #v2RailR {
  display: block;
  position: absolute; top: var(--topH); bottom: var(--botH); width: calc(6 * var(--u));
  background: linear-gradient(90deg, #5e3a18, #8a5a2a 50%, #5e3a18);
  box-shadow: 0 0 calc(6 * var(--u)) rgba(0, 0, 0, 0.5);
}
html[data-ui="v2"] #v2RailL { left: 0; }
html[data-ui="v2"] #v2RailR { right: 0; }
html[data-ui="v2"] #v2Band {
  display: none;
  position: absolute; left: 0; right: 0; top: 0; bottom: calc(var(--botH) + 1032 * var(--u));
  background: var(--wood-bar);
  box-shadow: inset 0 calc(-4 * var(--u)) 0 var(--sg-wood-dk), inset 0 calc(-7 * var(--u)) 0 var(--sg-gold-line);
}
html[data-ui="v2"] #shell.battling #v2Band { display: block; }
html[data-ui="v2"] #shell.battling #v2Top,
html[data-ui="v2"] #shell.battling #v2RailL,
html[data-ui="v2"] #shell.battling #v2RailR { visibility: hidden; }
html[data-ui="v2"] #shell.battling canvas#view { visibility: hidden; }

/* ---------- 顶栏：左边人物（头像、等级牌；右边名字、耐久红条、气力蓝条，气力条下面耐力药 / 气力药两颗药罐，按一下冒泡说还剩多少），
   中间出战宠物（头像、等级牌；名字、耐久条、气力条。宠物气力要装备后才生效，没装备画成锁着的空槽），
   右边一列石币、骨玉、移速。 ---------- */
html[data-ui="v2"] #hudFaceArt, html[data-ui="v2"] #hudPetArt {
  display: block;
  box-sizing: border-box;
  border: var(--bw) solid var(--sg-wood-dk);
  border-radius: var(--r);
  background: radial-gradient(#fff3d0, #e2bd7c);
  box-shadow: 0 0 0 calc(2 * var(--u)) var(--sg-gold-line), 0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.45);
  pointer-events: auto;
  cursor: pointer;
}
html[data-ui="v2"] #hudFaceArt { left: calc(12 * var(--u)); top: calc(var(--sat) + 12 * var(--u)); width: calc(92 * var(--u)); height: calc(92 * var(--u)); }
html[data-ui="v2"] #hudPetArt { left: calc(302 * var(--u)); top: calc(var(--sat) + 20 * var(--u)); width: calc(84 * var(--u)); height: calc(84 * var(--u)); }
/* 没有出战宠物：空框里一枚淡淡的爪印。 */
html[data-ui="v2"] #hudPetArt.empty {
  background: var(--sg-paw) center / 54% no-repeat, radial-gradient(#fff3d0, #e2bd7c);
}
html[data-ui="v2"] #hudFaceLv, html[data-ui="v2"] #hudPetLv {
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  top: calc(var(--sat) + 96 * var(--u)); height: calc(24 * var(--u));
  border: calc(2 * var(--u)) solid var(--sg-gold-line);
  border-radius: 999px;
  background: var(--sg-night);
  font: 800 var(--fs-xs)/1 var(--sg-font);
}
html[data-ui="v2"] #hudFaceLv:empty, html[data-ui="v2"] #hudPetLv:empty { display: none; }
html[data-ui="v2"] #hudFaceLv { left: calc(10 * var(--u)); width: calc(96 * var(--u)); }
html[data-ui="v2"] #hudPetLv { left: calc(300 * var(--u)); width: calc(88 * var(--u)); }
/* 名字：条上面一行米白字，点了和头像一样开角色 / 宠物。 */
html[data-ui="v2"] #hudMeName, html[data-ui="v2"] #hudPetName {
  position: absolute; z-index: 4;
  top: calc(var(--sat) + 8 * var(--u)); height: calc(24 * var(--u));
  box-sizing: border-box; padding-left: calc(4 * var(--u));
  color: #fff3d0; font: 900 var(--fs-s)/calc(24 * var(--u)) var(--sg-font);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 0 #2a1606, 0 0 calc(4 * var(--u)) rgba(0, 0, 0, 0.5);
  pointer-events: auto; cursor: pointer;
}
html[data-ui="v2"] #hudMeName { left: calc(112 * var(--u)); width: calc(176 * var(--u)); }
html[data-ui="v2"] #hudPetName { left: calc(394 * var(--u)); width: calc(144 * var(--u)); }
html[data-ui="v2"] #hudPetName.empty { color: rgba(255, 240, 205, 0.55); font-weight: 700; font-size: var(--fs-xs); }
/* 耐久 / 气力条：深色槽，数字白字黑边居中。值降下来时后面留一截浅色尾巴慢慢跟上（.live 之后才有过渡，第一次画不动）；
   耐久不到四分之一槽边一闪一闪。 */
html[data-ui="v2"] .hudGauge {
  position: absolute; z-index: 4;
  height: calc(22 * var(--u));
  pointer-events: auto; cursor: pointer;
}
html[data-ui="v2"] #hudMeHp, html[data-ui="v2"] #hudMeMp { left: calc(112 * var(--u)); width: calc(176 * var(--u)); }
html[data-ui="v2"] #hudPetHp, html[data-ui="v2"] #hudPetMp { left: calc(394 * var(--u)); width: calc(144 * var(--u)); }
html[data-ui="v2"] #hudMeHp, html[data-ui="v2"] #hudPetHp { top: calc(var(--sat) + 35 * var(--u)); }
html[data-ui="v2"] #hudMeMp, html[data-ui="v2"] #hudPetMp { top: calc(var(--sat) + 61 * var(--u)); }
html[data-ui="v2"] .hudGauge > span {
  position: absolute; inset: 0;
  box-sizing: border-box;
  border: calc(2.5 * var(--u)) solid var(--sg-wood-dk);
  border-radius: 999px;
  background: linear-gradient(#140a03, #2e1a0a);
  box-shadow: inset 0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 222, 160, 0.25);
  overflow: hidden;
}
html[data-ui="v2"] .hudGauge > span > b, html[data-ui="v2"] .hudGauge > span > i {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: calc(var(--p, 0) * 1%);
}
html[data-ui="v2"] .hudGauge > span > b { background: rgba(255, 236, 190, 0.6); }
html[data-ui="v2"] .hudGauge > span > i {
  background: linear-gradient(rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 55%), linear-gradient(#f0745a, #c8381f 60%, #8e2214);
  box-shadow: inset calc(-2 * var(--u)) 0 0 rgba(255, 220, 200, 0.45);
}
html[data-ui="v2"] .hudGauge.mp > span > i {
  background: linear-gradient(rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 55%), linear-gradient(#7cc8f4, #2f80cc 60%, #1a4f90);
  box-shadow: inset calc(-2 * var(--u)) 0 0 rgba(210, 240, 255, 0.45);
}
html[data-ui="v2"] .hudGauge.live > span > i { transition: width 220ms ease-out; }
html[data-ui="v2"] .hudGauge.live > span > b { transition: width 600ms ease-in 300ms; }
html[data-ui="v2"] .hudGauge.live.up > span > b { transition: none; }
html[data-ui="v2"] .hudGauge > em {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font: 800 var(--fs-xs)/1 var(--sg-font); font-style: normal;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  text-shadow: 1px 0 #1a0d04, -1px 0 #1a0d04, 0 1px #1a0d04, 0 -1px #1a0d04;
  pointer-events: none;
}
html[data-ui="v2"] .hudGauge.hp.low > span { border-color: #6e1a0c; }
html[data-ui="v2"] .hudGauge::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 999px;
  box-shadow: 0 0 0 calc(2 * var(--u)) rgba(255, 96, 64, 0.9), 0 0 calc(10 * var(--u)) rgba(255, 70, 40, 0.8);
  opacity: 0;
  pointer-events: none;
}
html[data-ui="v2"] .hudGauge.hp.low::after { animation: hudLow 1.1s ease-in-out infinite; will-change: opacity; }
@keyframes hudLow { 50% { opacity: 1; } }
/* 宠物气力没装备：槽里斜纹、一把小锁「未装备」。没有出战宠物：两条空槽压暗。 */
html[data-ui="v2"] .hudGauge.none { opacity: 0.5; }
html[data-ui="v2"] .hudGauge.off > span {
  background: repeating-linear-gradient(135deg, #2c1b0c 0 calc(5 * var(--u)), #1c1007 calc(5 * var(--u)) calc(10 * var(--u)));
}
html[data-ui="v2"] .hudGauge.off > span > b, html[data-ui="v2"] .hudGauge.off > span > i,
html[data-ui="v2"] .hudGauge.none > span > b, html[data-ui="v2"] .hudGauge.none > span > i { display: none; }
html[data-ui="v2"] .hudGauge.off > em { gap: calc(4 * var(--u)); color: #cdb185; font-weight: 700; text-shadow: 0 1px 0 #000; }
html[data-ui="v2"] .hudGauge.off > em::before {
  content: ""; flex: none; width: calc(12 * var(--u)); height: calc(14 * var(--u));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M3.2 6.4V4.4a2.8 2.8 0 0 1 5.6 0v2' fill='none' stroke='%23cdb185' stroke-width='1.7'/%3E%3Crect x='1.2' y='6.2' width='9.6' height='7.2' rx='1.6' fill='%23cdb185'/%3E%3Crect x='5.3' y='8.6' width='1.4' height='2.6' rx='.7' fill='%232c1b0c'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 右列：石币、骨玉、移速三颗纸胶囊，左头是图标（移速是小字），数靠右。 */
html[data-ui="v2"] #stoneCount, html[data-ui="v2"] #boneCount, html[data-ui="v2"] #walkSpeed {
  display: block;
  box-sizing: border-box;
  left: calc(552 * var(--u)); right: auto; bottom: auto;
  width: calc(156 * var(--u)); height: calc(30 * var(--u));
  border: calc(3 * var(--u)) solid var(--sg-wood-dk);
  border-radius: 999px;
  background: var(--paper-bg);
  box-shadow: inset 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(122, 74, 30, 0.35);
  color: var(--sg-ink);
  font: 900 var(--fs-s)/1 var(--sg-font);
  text-shadow: none;
}
html[data-ui="v2"] #stoneCount { top: calc(var(--sat) + 16 * var(--u)); }
html[data-ui="v2"] #boneCount { top: calc(var(--sat) + 50 * var(--u)); }
html[data-ui="v2"] .count b { left: calc(34 * var(--u)); right: calc(12 * var(--u)); font-variant-numeric: tabular-nums; }
html[data-ui="v2"] #stoneCount::before, html[data-ui="v2"] #boneCount::before {
  content: ""; position: absolute; left: calc(3 * var(--u)); top: 50%;
  width: calc(24 * var(--u)); height: calc(24 * var(--u)); transform: translateY(-50%);
}
/* 石币：灰色石轮。骨玉：白骨头。任务栏奖励、任选一格子里的石币、骨玉用同一个画法。 */
html[data-ui="v2"] #stoneCount::before, html[data-ui="v2"] .qRewChip.qr-stone i,
html[data-ui="v2"] .qRewTile.qr-stone i, html[data-ui="v2"] .wnPickTile.k-stone .wnPickArt i {
  border-radius: 50%;
  background: radial-gradient(circle, transparent 0 24%, #4f4a42 25% 29%, #c9c3b6 31% 50%, #8a8478 64%, #4f4a42 70%, transparent 71%);
}
html[data-ui="v2"] #boneCount::before, html[data-ui="v2"] .qRewChip.qr-bone i,
html[data-ui="v2"] .qRewTile.qr-bone i, html[data-ui="v2"] .wnPickTile.k-bone .wnPickArt i {
  background:
    radial-gradient(circle at 20% 32%, #f6eedc 0 15%, transparent 16%),
    radial-gradient(circle at 20% 68%, #f6eedc 0 15%, transparent 16%),
    radial-gradient(circle at 80% 32%, #f6eedc 0 15%, transparent 16%),
    radial-gradient(circle at 80% 68%, #f6eedc 0 15%, transparent 16%),
    linear-gradient(transparent 40%, #f6eedc 40% 60%, transparent 60%) center / 70% 100% no-repeat;
  filter: drop-shadow(0 0 1px #3a220c) drop-shadow(0 1px 0 #3a220c);
}
/* 耐力药 / 气力药：气力条下面两颗药罐，红圈补耐久、蓝圈补气力，用光了变灰；不写数，按一下冒泡说还剩多少。 */
html[data-ui="v2"] #hudPools {
  display: flex; gap: calc(10 * var(--u));
  left: calc(114 * var(--u)); top: calc(var(--sat) + 88 * var(--u));
  height: calc(32 * var(--u));
}
html[data-ui="v2"] #hudPools button {
  flex: none; box-sizing: border-box;
  width: calc(32 * var(--u)); height: calc(32 * var(--u));
  display: grid; place-items: center;
  border: calc(2.5 * var(--u)) solid var(--sg-wood-dk);
  border-radius: 50%;
  background: radial-gradient(#fff3d0, #e2bd7c);
  box-shadow: 0 0 0 calc(2 * var(--u)) var(--ring), 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.4);
}
html[data-ui="v2"] #hudPoolHpBtn { --ring: #d24a2e; }
html[data-ui="v2"] #hudPoolMpBtn { --ring: #3a8ee0; }
html[data-ui="v2"] #hudPools button:active { transform: scale(0.94); }
html[data-ui="v2"] #hudPools canvas { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
html[data-ui="v2"] #hudPools button.empty { --ring: #7a6a58; }
html[data-ui="v2"] #hudPools button.empty canvas { opacity: 0.45; filter: grayscale(1); }
/* 移速：左边小字「移速」，右边数按稀有度上色（纸底上用深一档的白绿蓝紫橙红），带 ▲，点开强化。 */
html[data-ui="v2"] #walkSpeed {
  display: flex; align-items: center; gap: calc(4 * var(--u));
  top: calc(var(--sat) + 89 * var(--u));
  padding: 0 calc(10 * var(--u)) 0 calc(12 * var(--u));
  letter-spacing: 0;
  cursor: pointer;
}
html[data-ui="v2"] #walkSpeed > span { margin-right: auto; color: var(--sg-ink-soft); font: 800 var(--fs-xs)/1 var(--sg-font); }
html[data-ui="v2"] #walkSpeed > b { font-weight: 900; font-variant-numeric: tabular-nums; }
html[data-ui="v2"] #walkSpeed::after { margin-left: 0; font-size: 0.7em; }
html[data-ui="v2"] #walkSpeed.w150 { color: var(--sg-ink); }
html[data-ui="v2"] #walkSpeed.w250 { color: #2c8a22; }
html[data-ui="v2"] #walkSpeed.w340 { color: #1f68c8; }
html[data-ui="v2"] #walkSpeed.w445 { color: #8a36c4; }
html[data-ui="v2"] #walkSpeed.w540 { color: #c8680a; }
html[data-ui="v2"] #walkSpeed.w600 { color: #c8281c; }
/* 组队时被别人带快了：牌子左上角一枚绿色「带速」（谁带的写在 title），数是全队的。 */
html[data-ui="v2"] #walkSpeed.carry::before {
  content: "带速"; position: absolute; left: calc(-8 * var(--u)); top: calc(-12 * var(--u));
  padding: calc(1 * var(--u)) calc(6 * var(--u)); border-radius: 999px;
  background: linear-gradient(#8fe07a, #2f8a25); color: #fff; text-shadow: 0 1px 1px #0b3d12;
  box-shadow: 0 0 0 calc(2 * var(--u)) #fff3d6; font: 900 max(9px, calc(15 * var(--u)))/1.25 var(--sg-font);
}
/* 移速牌点开带速说明框（10-31）：开着时牌子描一圈金边；键盘聚焦看得见。 */
html[data-ui="v2"] #walkSpeed[aria-expanded="true"] { box-shadow: inset 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(122, 74, 30, 0.35), 0 0 0 calc(3 * var(--u)) var(--sg-gold); }
html[data-ui="v2"] #walkSpeed:focus-visible { outline: calc(3 * var(--u)) solid var(--sg-gold-hi); outline-offset: calc(2 * var(--u)); }

/* ---------- 点开的小说明框（ui-kit.js popTip，一次只开一个；现在只有带速说明框用） ----------
   #playHud 整层穿透，框自己写 pointer-events: auto。位置脚本按锚点算（left / top 像素），--ax 是小尖角的横坐标。
   只在开着时显示；没有循环动画，开框淡入一次。 */
html[data-ui="v2"] .popTip {
  position: absolute; z-index: 9; left: 0; top: 0;
  box-sizing: border-box; max-width: calc(696 * var(--u));
  padding: calc(16 * var(--u)) calc(18 * var(--u)) calc(16 * var(--u));
  border: var(--bw) solid var(--sg-wood);
  border-radius: calc(16 * var(--u));
  background: var(--paper-bg);
  box-shadow: 0 0 0 calc(2 * var(--u)) var(--sg-gold-line), 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, 0.5);
  color: var(--sg-ink);
  pointer-events: auto;
  cursor: var(--bone-cur, default);
  animation: popTipIn 160ms ease-out;
}
html[data-ui="v2"] .popTip:focus { outline: none; }
html[data-ui="v2"] .popTip:focus-visible { outline: calc(3 * var(--u)) solid var(--sg-gold-hi); outline-offset: calc(2 * var(--u)); }
html[data-ui="v2"] .popTipArrow {
  position: absolute; left: var(--ax, 50%); top: calc(-12 * var(--u));
  width: calc(18 * var(--u)); height: calc(18 * var(--u)); margin-left: calc(-9 * var(--u));
  background: var(--sg-paper-hi);
  border-left: var(--bw) solid var(--sg-wood); border-top: var(--bw) solid var(--sg-wood);
  transform: rotate(45deg);
}
html[data-ui="v2"] .popTip.up .popTipArrow { top: auto; bottom: calc(-12 * var(--u)); background: var(--sg-paper-lo); border: 0; border-right: var(--bw) solid var(--sg-wood); border-bottom: var(--bw) solid var(--sg-wood); }
@keyframes popTipIn { from { opacity: 0; transform: translateY(calc(-6 * var(--u))); } to { opacity: 1; transform: none; } }
/* 带速说明框：标题行翅膀章（.uiWing，和队伍页同一个图形）+ 「移速」+ 大号金字；下面全队 / 自己两行、带速的人（头像 + 翅膀章）、一句说明、「去强化」。 */
html[data-ui="v2"] .spTip .spBox { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
html[data-ui="v2"] .spTip .spHead { display: flex; align-items: center; gap: calc(10 * var(--u)); padding-bottom: calc(10 * var(--u)); border-bottom: calc(2 * var(--u)) dashed rgba(122, 74, 30, 0.45); }
html[data-ui="v2"] .spTip .spHead > .uiWing { width: calc(44 * var(--u)); height: calc(44 * var(--u)); }
html[data-ui="v2"] .spTip .spHead > span { color: var(--sg-ink); font: 800 var(--fs-s)/1 var(--sg-font); }
html[data-ui="v2"] .spTip .spHead > b { margin-left: auto; color: #7a4a00; font: 900 var(--fs-xl)/1 var(--sg-font); font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 #fff3d6; }
html[data-ui="v2"] .spTip .spRow { display: flex; align-items: baseline; gap: calc(12 * var(--u)); margin: 0; font: 800 var(--fs-xs)/1.3 var(--sg-font); }
html[data-ui="v2"] .spTip .spRow > span { flex: none; min-width: calc(56 * var(--u)); color: var(--sg-ink); opacity: 1; }
html[data-ui="v2"] .spTip .spRow > b { color: var(--sg-ink); font-weight: 900; font-variant-numeric: tabular-nums; }
html[data-ui="v2"] .spTip .spBy { display: flex; align-items: center; gap: calc(10 * var(--u)); margin: 0; padding: calc(6 * var(--u)) calc(10 * var(--u)); border-radius: calc(12 * var(--u)); background: rgba(255, 243, 214, 0.7); box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(184, 120, 12, 0.45); font: 800 var(--fs-xs)/1.2 var(--sg-font); }
html[data-ui="v2"] .spTip .spBy.self { box-shadow: inset 0 0 0 calc(2 * var(--u)) #b8780c; background: rgba(255, 236, 170, 0.85); }
html[data-ui="v2"] .spTip .spFace {
  position: relative; flex: none; width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #fffdf5, #f6e2b0 62%, #ddb469);
  box-shadow: 0 0 0 calc(2 * var(--u)) var(--sg-gold), 0 0 0 calc(4 * var(--u)) var(--sg-wood-dk);
}
html[data-ui="v2"] .spTip .spFace canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
/* 带速的人头像右下角一枚翅膀章（和队伍页带速人头像角标同一枚 .uiWing；皇冠 2026-10-31 二轮换掉）。 */
html[data-ui="v2"] .spTip .spBadge {
  position: absolute; right: calc(-8 * var(--u)); bottom: calc(-6 * var(--u));
  width: calc(24 * var(--u)); height: calc(24 * var(--u));
}
html[data-ui="v2"] .spTip .spBy > b { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--sg-ink); font-weight: 900; }
html[data-ui="v2"] .spTip .spBy > em { flex: none; margin-left: auto; color: #6e4600; font-style: normal; font-weight: 900; }
html[data-ui="v2"] .spTip .spNote { margin: 0; color: var(--sg-ink); font: 700 var(--fs-xs)/1.45 var(--sg-font); }
html[data-ui="v2"] .spTip .spForge { align-self: flex-end; height: calc(52 * var(--u)); min-width: calc(150 * var(--u)); padding: 0 calc(16 * var(--u)); font: 900 var(--fs-s)/1 var(--sg-font); }

/* 信封：有信才出，挂在地图区右上角、顶栏下沿下面。 */
html[data-ui="v2"] #hudMailBtn {
  left: calc(644 * var(--u)); top: calc(var(--topH) + 14 * var(--u));
  width: calc(64 * var(--u)); height: calc(54 * var(--u));
}
html[data-ui="v2"] #hudMailBadge { min-width: calc(30 * var(--u)); height: calc(30 * var(--u)); font: 800 var(--fs-xs)/calc(30 * var(--u)) var(--sg-font); }
/* 右上角（docs/agent/TRAVEL.md）：一块半透明深底写地图名和坐标（不吃点击），信封有信时排在它左边；下面导航钮，
   和遇敌钮同一种画法（48u 圆盘 + 字牌），导航中圆盘亮绿圈、字牌写「导航中」。 */
html[data-ui="v2"] #mapCorner { right: calc(12 * var(--u)); top: calc(var(--topH) + 14 * var(--u)); gap: calc(10 * var(--u)); max-width: calc(470 * var(--u)); }
html[data-ui="v2"] #mapCornerRow { gap: calc(8 * var(--u)); max-width: 100%; }
html[data-ui="v2"] #mapTag {
  box-sizing: border-box; min-width: 0; max-width: calc(330 * var(--u));
  padding: calc(5 * var(--u)) calc(12 * var(--u)) calc(6 * var(--u));
  border-radius: calc(12 * var(--u));
  background: rgba(24, 14, 6, 0.42);
  color: #fff3d0; text-align: right;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
}
html[data-ui="v2"] #mapTag:has(> b:empty) { display: none; }
html[data-ui="v2"] #mapTag b { display: block; font: 900 var(--fs-s)/1.25 var(--sg-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="v2"] #mapTag span { display: block; color: #ffd98a; font: 800 var(--fs-xs)/1.2 var(--sg-font); font-variant-numeric: tabular-nums; }
/* 坐标下面多一行「约 N 人」（身边人多时才有）：淡一点，不和坐标抢眼。 */
html[data-ui="v2"] #mapTag span#mapTagCrowd { color: #ffe9b8; opacity: 0.8; }
html[data-ui="v2"] #mapTag span#mapTagCrowd[hidden] { display: none; }
/* 地图属性的牌子（view.js paintMapTag）：锁队金色、禁止组队红色，挂在坐标下面。 */
html[data-ui="v2"] #mapTag i#mapTagRule {
  display: inline-block; margin-top: calc(3 * var(--u)); padding: calc(2 * var(--u)) calc(8 * var(--u));
  border-radius: 999px; font: 900 var(--fs-xs)/1.2 var(--sg-font); font-style: normal; letter-spacing: 0.06em; text-shadow: none;
}
html[data-ui="v2"] #mapTag i#mapTagRule[hidden] { display: none; }
html[data-ui="v2"] #mapTag i#mapTagRule.lock { background: linear-gradient(#ffe7a3, #e0a640); color: #4a2a08; box-shadow: 0 0 0 1px rgba(74, 42, 8, 0.6); }
html[data-ui="v2"] #mapTag i#mapTagRule.ban { background: linear-gradient(#e86a4a, #b5301c); color: #fff; box-shadow: 0 0 0 1px rgba(90, 18, 6, 0.65); }
html[data-ui="v2"] #mapNavBtn { width: calc(56 * var(--u)); }
html[data-ui="v2"] #mapNavBtn .navIcon {
  display: block; box-sizing: border-box;
  width: calc(48 * var(--u)); height: calc(48 * var(--u));
  border: calc(2 * var(--u)) solid #3a220c; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #6b4a2c, #2c1a0a 72%);
  box-shadow: 0 calc(2 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.55), inset 0 0 0 calc(2 * var(--u)) rgba(232, 190, 120, 0.35);
}
html[data-ui="v2"] #mapNavBtn .navIcon svg { display: block; width: 100%; height: 100%; }
html[data-ui="v2"] #mapNavBtn span {
  margin-top: calc(-5 * var(--u));
  padding: calc(2 * var(--u)) calc(7 * var(--u));
  border: calc(2 * var(--u)) solid var(--sg-wood-dk); border-radius: 999px;
  background: linear-gradient(#5a3d22, #2c1a0a);
  color: #f6e2bd; font: 900 var(--fs-xs)/1.1 var(--sg-font); white-space: nowrap;
  box-shadow: 0 calc(2 * var(--u)) 0 rgba(0, 0, 0, 0.45);
}
html[data-ui="v2"] #mapNavBtn.on .navIcon { border-color: #1f5a12; box-shadow: 0 0 calc(10 * var(--u)) calc(3 * var(--u)) rgba(110, 230, 80, 0.8), inset 0 0 calc(8 * var(--u)) rgba(120, 230, 90, 0.5); }
html[data-ui="v2"] #mapNavBtn.on span { border-color: #1f4a0e; background: linear-gradient(#7fcb4a, #3c7d1c); color: #fff; text-shadow: 0 1px 1px #1d3a0b; }
/* 聊天展开时右边那一列钮（自动、遇敌、好友）跟着纸往上走，9:16 的壳（电脑、矮手机）里好友钮会顶到导航钮上：展开时导航钮先藏，收起再出。 */
html[data-ui="v2"] #playHud:has(> #hudBot.chatOpen) #mapNavBtn { visibility: hidden; }

/* ---------- 底部：聊天纸、输入行、导航 ---------- */
html[data-ui="v2"] #hudBot {
  top: auto; bottom: 0; height: var(--botH);
  background: var(--wood-bar);
  box-shadow: inset 0 calc(4 * var(--u)) 0 var(--sg-gold-line), inset 0 calc(7 * var(--u)) 0 var(--sg-wood-dk), 0 calc(-4 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.4);
  --chatOpenH: min(calc(640 * var(--u)), calc(100cqh - var(--topH) - 150 * var(--u) - var(--sab)));
}
html[data-ui="v2"] #hudBot.chatOpen { z-index: 9; }
/* 聊天纸。右上角是纸框伸进来的一块「展」（展开后写「收」），和框同色，左边、下边各用一段凹圆角接回纸框，
   看上去是框的一部分；凹圆角画在纸的底色里（--chatTabW / --chatTabH 是那一块的宽高，--chatTabR 是凹圆角）。字和滚动条都让开这一角。 */
html[data-ui="v2"] #chatFrame {
  --chatTabW: calc(52 * var(--u));
  --chatTabH: calc(42 * var(--u));
  --chatTabR: calc(10 * var(--u));
  box-sizing: border-box;
  left: calc(16 * var(--u)); top: calc(12 * var(--u)); width: calc(688 * var(--u)); height: calc(118 * var(--u));
  border: var(--bw) solid #6b3f18;
  border-radius: calc(14 * var(--u));
  background:
    radial-gradient(circle at 0 100%, transparent calc(var(--chatTabR) - 0.6px), #6b3f18 var(--chatTabR)) right var(--chatTabW) top 0 / var(--chatTabR) var(--chatTabR) no-repeat,
    radial-gradient(circle at 0 100%, transparent calc(var(--chatTabR) - 0.6px), #6b3f18 var(--chatTabR)) right 0 top var(--chatTabH) / var(--chatTabR) var(--chatTabR) no-repeat,
    linear-gradient(#fbecc8, #eed39c);
  box-shadow: inset 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(90, 50, 10, 0.35);
  pointer-events: auto;
}
html[data-ui="v2"] #hudBot.chatOpen #chatFrame {
  top: auto; bottom: calc(118 * var(--u) + var(--sab));
  height: var(--chatOpenH);
  box-shadow: inset 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(90, 50, 10, 0.35), 0 calc(-6 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, 0.5);
}
html[data-ui="v2"] #chat {
  padding: calc(8 * var(--u)) calc(var(--chatTabW) + 8 * var(--u)) calc(8 * var(--u)) calc(14 * var(--u));
  color: #3a2a18;
  font: 700 var(--fs-s)/1.45 var(--sg-font);
  pointer-events: auto;
}
/* 私聊那一行（[私聊]名字：…）点了打开和他的聊天页。 */
html[data-ui="v2"] #chat .pmLine { cursor: pointer; }
html[data-ui="v2"] #chat .pmLine:hover { text-decoration: underline; }
/* 系统、结算频道的行（POLISH.md 3.6）：行前一枚小签，字的颜色按类——系统金褐、公告红、播报紫、结算绿、打输灰红。 */
html[data-ui="v2"] #chat .chLine { color: #7a4a10; }
html[data-ui="v2"] #chat .chTag {
  display: inline-block; margin-right: calc(6 * var(--u)); padding: 0 calc(7 * var(--u));
  border-radius: calc(6 * var(--u));
  background: linear-gradient(#c08a3a, #94621e); color: #fff8e4;
  font: 900 max(10px, calc(var(--fs-s) * 0.8))/1.45 var(--sg-font); font-style: normal;
  vertical-align: calc(1 * var(--u));
}
html[data-ui="v2"] #chat .chLine.k-gm { color: #a8241a; }
html[data-ui="v2"] #chat .chLine.k-gm .chTag { background: linear-gradient(#e85a40, #a8241a); }
html[data-ui="v2"] #chat .chLine.k-cast { color: #6a24a8; }
html[data-ui="v2"] #chat .chLine.k-cast .chTag { background: linear-gradient(#a85ce4, #6a24a8); }
html[data-ui="v2"] #chat .chLine.k-settle { color: #2a6a1e; }
html[data-ui="v2"] #chat .chLine.k-settle .chTag { background: linear-gradient(#52b040, #2a7a1e); }
html[data-ui="v2"] #chat .chLine.k-lose { color: #8a4a3a; }
html[data-ui="v2"] #chat .chLine.k-lose .chTag { background: linear-gradient(#a08070, #745646); }
/* 频道列表里只收的两行（系统、结算）：点整行是勾 / 不勾看它，右边小字「只收」，底色浅一点，和能说话的分开。 */
html[data-ui="v2"] #chanPop button.ro { background: var(--sg-paper-in); }
html[data-ui="v2"] #chanPop button.ro small { margin-left: auto; color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1 var(--sg-font); }
html[data-ui="v2"] #chatBar { right: calc(6 * var(--u)); top: calc(var(--chatTabH) + var(--chatTabR) + 4 * var(--u)); bottom: calc(8 * var(--u)); width: calc(10 * var(--u)); }
html[data-ui="v2"] #chatMore {
  display: grid; place-items: center;
  position: absolute; top: 0; right: 0; z-index: 3;
  box-sizing: border-box;
  width: var(--chatTabW); height: var(--chatTabH);
  padding: 0 0 calc(2 * var(--u)) calc(2 * var(--u));
  border: 0;
  border-radius: 0 0 0 calc(16 * var(--u));
  background: #6b3f18;
  box-shadow: inset 0 calc(2 * var(--u)) 0 rgba(255, 220, 160, 0.12);
  color: #ffe3a3;
  font: 900 var(--fs-m)/1 var(--sg-font);
  text-shadow: 0 1px 0 #2a1606;
  pointer-events: auto;
  cursor: pointer;
  transition: color 120ms linear;
}
html[data-ui="v2"] #chatMore:hover { color: #fff6d6; }
html[data-ui="v2"] #chatMore:active { color: #f2c66a; }
html[data-ui="v2"] #chatMore::after { content: "展"; }
html[data-ui="v2"] #hudBot.chatOpen #chatMore::after { content: "收"; }
/* 输入行：「当前」频道、字体颜色（钮上那颗宝石是现在的字色）、输入框（字也是这个颜色）、表情、「发送」。
   两颗图标钮和两头的字钮同高同框，一左一右对称；开着弹出板的那颗变金。 */
html[data-ui="v2"] #chanTag, html[data-ui="v2"] #sendBtn, html[data-ui="v2"] #chatColorBtn, html[data-ui="v2"] #chatFaceBtn {
  box-sizing: border-box;
  top: calc(140 * var(--u)); height: calc(42 * var(--u));
  border: calc(3 * var(--u)) solid var(--sg-wood-dk);
  border-radius: calc(12 * var(--u));
  background: var(--sg-paper);
  color: var(--sg-ink);
  font: 800 var(--fs-m)/1 var(--sg-font);
  box-shadow: 0 calc(3 * var(--u)) 0 rgba(30, 16, 4, 0.6);
}
html[data-ui="v2"] #chanTag { left: calc(16 * var(--u)); width: calc(96 * var(--u)); }
html[data-ui="v2"] #chatColorBtn, html[data-ui="v2"] #chatFaceBtn {
  position: absolute; display: grid; place-items: center;
  width: calc(42 * var(--u)); padding: 0;
}
html[data-ui="v2"] #chatColorBtn { left: calc(120 * var(--u)); }
html[data-ui="v2"] #chatFaceBtn { left: calc(550 * var(--u)); }
html[data-ui="v2"] #sendBtn { left: calc(600 * var(--u)); width: calc(104 * var(--u)); background: linear-gradient(var(--sg-gold-hi), var(--sg-gold)); }
html[data-ui="v2"] #chatColorBtn.on, html[data-ui="v2"] #chatFaceBtn.on { background: linear-gradient(var(--sg-gold-hi), var(--sg-gold)); }
html[data-ui="v2"] #chanTag:active, html[data-ui="v2"] #sendBtn:active,
html[data-ui="v2"] #chatColorBtn:active, html[data-ui="v2"] #chatFaceBtn:active { transform: translateY(calc(2 * var(--u))); box-shadow: none; }
/* 宝石：底色是字色（--cc），左上一点高光、四周压暗，外面一圈金一圈深木。 */
html[data-ui="v2"] #chatColorBtn i, html[data-ui="v2"] .ccSw i {
  display: block;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.9) 0, rgba(255, 255, 255, 0) 42%),
    radial-gradient(circle at 50% 42%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.34) 100%),
    var(--cc, #3a2a18);
  box-shadow: 0 0 0 calc(2 * var(--u)) var(--sg-gold-line), 0 0 0 calc(4 * var(--u)) var(--sg-wood-dk);
}
html[data-ui="v2"] #chatColorBtn i { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
html[data-ui="v2"] #chatFaceBtn::after {
  content: ""; display: block;
  width: calc(28 * var(--u)); height: calc(28 * var(--u));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3CradialGradient id='f' cx='.38' cy='.32' r='.75'%3E%3Cstop offset='0' stop-color='%23fff4c4'/%3E%3Cstop offset='.5' stop-color='%23ffd04a'/%3E%3Cstop offset='1' stop-color='%23d9900c'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='16' cy='16' r='13.4' fill='url(%23f)' stroke='%234a2c12' stroke-width='2.2'/%3E%3Cellipse cx='11.4' cy='12.8' rx='1.8' ry='2.4' fill='%234a2c12'/%3E%3Cellipse cx='20.6' cy='12.8' rx='1.8' ry='2.4' fill='%234a2c12'/%3E%3Cpath d='M9.4 18.2Q16 26 22.6 18.2' fill='none' stroke='%234a2c12' stroke-width='2.3' stroke-linecap='round'/%3E%3Ccircle cx='8.2' cy='18.4' r='1.9' fill='%23f0743c' opacity='.45'/%3E%3Ccircle cx='23.8' cy='18.4' r='1.9' fill='%23f0743c' opacity='.45'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-ui="v2"] #chatInput {
  left: calc(170 * var(--u)); top: calc(140 * var(--u)); width: calc(372 * var(--u)); height: calc(42 * var(--u));
  padding: 0 calc(12 * var(--u));
  border: calc(3 * var(--u)) solid var(--sg-wood-dk);
  border-radius: calc(12 * var(--u));
  background: var(--sg-paper-in);
  box-shadow: inset 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(90, 50, 10, 0.35);
  font: 700 max(16px, calc(25 * var(--u)))/1 var(--sg-font);
}
html[data-ui="v2"] #hudNav {
  position: absolute; left: calc(16 * var(--u)); top: calc(192 * var(--u)); width: calc(688 * var(--u)); height: calc(48 * var(--u));
  display: flex; gap: calc(8 * var(--u));
  pointer-events: auto;
}
html[data-ui="v2"] #hudNav button {
  flex: 1;
  box-sizing: border-box;
  border: calc(3 * var(--u)) solid var(--sg-wood-dk);
  border-radius: calc(12 * var(--u));
  background: var(--sg-paper);
  color: var(--sg-ink);
  font: 900 var(--fs-m)/1 var(--sg-font);
  box-shadow: 0 calc(3 * var(--u)) 0 rgba(30, 16, 4, 0.6);
  pointer-events: auto;
}
html[data-ui="v2"] #hudNav button::after { content: attr(aria-label); }
html[data-ui="v2"] #hudNav button.on { background: linear-gradient(var(--sg-gold-hi), var(--sg-gold)); }
html[data-ui="v2"] #hudNav button:active { transform: translateY(calc(2 * var(--u))); box-shadow: none; }
html[data-ui="v2"] #chanPop { left: calc(16 * var(--u)); bottom: calc(116 * var(--u) + var(--sab)); width: calc(220 * var(--u)); gap: calc(6 * var(--u)); z-index: 10; }
html[data-ui="v2"] #chanPop button {
  height: calc(46 * var(--u));
  border: calc(3 * var(--u)) solid var(--sg-wood-dk);
  border-radius: calc(10 * var(--u));
  background: var(--sg-paper);
  color: var(--sg-ink);
  font: 800 var(--fs-s)/1 var(--sg-font);
  padding: 0 calc(14 * var(--u));
}
html[data-ui="v2"] #chanPop button.on { background: linear-gradient(var(--sg-gold-hi), var(--sg-gold)); }
html[data-ui="v2"] #chanPop i { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
/* 字体颜色板、表情板：从输入行往上弹的纸卡（和任务奖励说明框一套：木边、外圈金线、投影），木纹顶条写名字，
   下沿一个小尖角指着自己那颗钮（--tipX 是尖角离卡里边多远）。和「当前」频道列表一次只开一个，点别处收起；
   z 10 盖过任务栏和展开的聊天。 */
html[data-ui="v2"] #chatColorPop, html[data-ui="v2"] #chatFacePop {
  position: absolute; z-index: 10;
  left: calc(16 * var(--u)); bottom: calc(124 * var(--u) + var(--sab));
  box-sizing: border-box;
  display: flex; flex-direction: column;
  border: var(--bw) solid var(--sg-wood);
  border-radius: var(--r);
  background: var(--paper-bg);
  box-shadow: 0 0 0 calc(2 * var(--u)) var(--sg-gold-line), 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, 0.5);
  color: var(--sg-ink);
  pointer-events: auto;
}
html[data-ui="v2"] #chatColorPop[hidden], html[data-ui="v2"] #chatFacePop[hidden] { display: none !important; }
html[data-ui="v2"] #chatColorPop { width: calc(452 * var(--u)); --tipX: calc(121 * var(--u)); }
html[data-ui="v2"] #chatFacePop { width: calc(688 * var(--u)); --tipX: calc(551 * var(--u)); }
html[data-ui="v2"] #chatColorPop::after, html[data-ui="v2"] #chatFacePop::after {
  content: ""; position: absolute; left: var(--tipX); bottom: calc(-10 * var(--u));
  width: calc(16 * var(--u)); height: calc(16 * var(--u)); margin-left: calc(-8 * var(--u));
  box-sizing: border-box;
  border-right: var(--bw) solid var(--sg-wood);
  border-bottom: var(--bw) solid var(--sg-wood);
  background: var(--sg-paper-lo);
  box-shadow: calc(2 * var(--u)) calc(2 * var(--u)) 0 0 var(--sg-gold-line);
  transform: rotate(45deg);
  pointer-events: none;
}
html[data-ui="v2"] .cpHead {
  display: flex; align-items: center; gap: calc(10 * var(--u));
  height: calc(40 * var(--u)); padding: 0 calc(10 * var(--u)) 0 calc(14 * var(--u));
  border-radius: calc(var(--r) - var(--bw)) calc(var(--r) - var(--bw)) 0 0;
  background: var(--wood-bar);
  box-shadow: inset 0 calc(-2 * var(--u)) 0 rgba(224, 166, 64, 0.65);
  color: #ffe08a;
  font: 900 var(--fs-s)/1 var(--sg-font);
  letter-spacing: 0.08em;
  text-shadow: 0 1px 0 #2a1606;
  white-space: nowrap;
}
html[data-ui="v2"] .cpHead em {
  margin-left: auto;
  color: #e9cf9f;
  font: 700 var(--fs-xs)/1 var(--sg-font); font-style: normal;
  letter-spacing: 0;
}
/* 颜色板：顶条右边一枚纸签写现在的颜色名（就用那个颜色写）；下面 6 × 2 颗宝石，名字也用自己的颜色写，选中的那格描金。 */
html[data-ui="v2"] #chatColorPop .cpHead em {
  padding: calc(5 * var(--u)) calc(12 * var(--u));
  border-radius: 999px;
  background: var(--sg-paper-in);
  box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(122, 74, 30, 0.35);
  color: var(--cc, #3a2a18);
  font-weight: 900;
  text-shadow: none;
}
html[data-ui="v2"] .ccGrid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(6 * var(--u));
  padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(14 * var(--u));
}
html[data-ui="v2"] .ccSw {
  display: flex; flex-direction: column; align-items: center; gap: calc(9 * var(--u));
  padding: calc(10 * var(--u)) 0 calc(8 * var(--u));
  border: 0; border-radius: calc(12 * var(--u));
  background: transparent;
  color: var(--cc);
  font: 900 var(--fs-xs)/1 var(--sg-font);
  transition: background 120ms linear;
}
html[data-ui="v2"] .ccSw i { width: calc(30 * var(--u)); height: calc(30 * var(--u)); transition: transform 120ms ease-out; }
html[data-ui="v2"] .ccSw:hover { background: rgba(255, 249, 230, 0.6); }
html[data-ui="v2"] .ccSw:active i { transform: scale(0.9); }
html[data-ui="v2"] .ccSw.on { background: rgba(255, 249, 230, 0.9); box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--sg-gold); }
html[data-ui="v2"] .ccSw.on i {
  box-shadow: 0 0 0 calc(2 * var(--u)) #fff6d6, 0 0 0 calc(4 * var(--u)) var(--sg-gold), 0 0 calc(10 * var(--u)) rgba(255, 200, 80, 0.85);
}
/* 表情板：10 列，露出四行多一点（看得出能往下滑），格子按下缩一下。 */
html[data-ui="v2"] .cfGrid {
  display: grid; grid-template-columns: repeat(10, 1fr); align-content: start;
  box-sizing: border-box;
  height: calc(280 * var(--u));
  padding: calc(8 * var(--u)) calc(6 * var(--u)) calc(8 * var(--u)) calc(10 * var(--u));
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
}
html[data-ui="v2"] .cfGrid button {
  display: grid; place-items: center;
  height: calc(62 * var(--u)); padding: 0;
  border: 0; border-radius: calc(12 * var(--u));
  background: transparent;
  transition: background 120ms linear;
}
html[data-ui="v2"] .cfGrid button:hover { background: rgba(255, 249, 230, 0.75); box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(224, 166, 64, 0.6); }
html[data-ui="v2"] .cfGrid button:active .cf { transform: scale(0.88); }
html[data-ui="v2"] .cfGrid .cf { width: calc(48 * var(--u)); height: calc(48 * var(--u)); transition: transform 90ms ease-out; }
/* 表情图：data/chatface.webp 一格 26×26（图 24×24 居中）、16 列 8 行（web/tools/export_chat_face.py 导出），
   --c / --r 是第几列第几行。聊天里和一行字一样高（行高 1.45），不撑高那一行。 */
html[data-ui="v2"] .cf {
  display: inline-block;
  width: 1.45em; height: 1.45em;
  vertical-align: top;
  background: url("data/chatface.webp?v=1") no-repeat;
  background-size: 1600% 800%;
  background-position: calc(var(--c) * 100% / 15) calc(var(--r) * 100% / 7);
}

/* ---------- 地图区里的东西 ---------- */
/* 任务栏：贴着左边沿的一只抽屉，往上长。左边内容：木纹顶条（第几环；状态签「▶ 前往 / 执行中」，点签开始或停下），
   任务名、这一环说明（最多四行）、奖励；右边一条木脊：收起钮、竖写「任务」（在木脊正中）、执行灯。
   收起时整只往左滑进边沿，只露出木脊（只动 transform，不重排）。 */
html[data-ui="v2"] #hudQuestWrap {
  --qRail: calc(46 * var(--u));
  box-sizing: border-box;
  left: 0; top: auto; bottom: calc(var(--botH) + 12 * var(--u));
  /* 字有像素下限（10px），窄屏（360 宽的安卓、开了大字号 / 页面缩放的手机）上 290u 装不下顶条的「第 12/15 环」+「执行中」，
     抽屉至少 156 像素宽，顶条一行放得下。 */
  width: max(calc(290 * var(--u)), 156px);
  display: flex; align-items: stretch;
  border-radius: 0 calc(16 * var(--u)) calc(16 * var(--u)) 0;
  box-shadow: calc(2 * var(--u)) calc(4 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, 0.45);
  transition: transform 280ms cubic-bezier(0.22, 0.8, 0.2, 1);
}
html[data-ui="v2"] #hudQuestWrap.min { transform: translateX(calc(var(--qRail) - 100%)); }
/* 收起后只剩木脊，高度也收到木脊自己最矮的那么高（收起钮 + 任务 / 队伍两个标签 + 执行灯）：任务页、满员的队伍页收起来一样矮，
   不再撑着一整页的高度挡画面（用户 2026-10-24 要）。内容滑出去以后（延后 280ms、0 秒）才收高，展开时先恢复高再滑出来，
   滑的过程中不跟着重排；挂在抽屉上沿的练级钮（--qH）跟着落下来。 */
html[data-ui="v2"] #hudQuestMain, html[data-ui="v2"] #hudTeamMain { max-height: 200vh; transition: max-height 0s; }
html[data-ui="v2"] #hudQuestWrap.min > #hudQuestMain, html[data-ui="v2"] #hudQuestWrap.min > #hudTeamMain {
  max-height: 0; overflow: hidden;
  transition: max-height 0s 280ms;
}
html[data-ui="v2"] #hudQuestMain {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  padding-bottom: calc(10 * var(--u));
  border-top: calc(3 * var(--u)) solid var(--sg-wood);
  border-bottom: calc(3 * var(--u)) solid var(--sg-wood);
  background: linear-gradient(rgba(252, 238, 204, 0.97), rgba(236, 207, 152, 0.97));
}
html[data-ui="v2"] #hudQuestTitle {
  display: flex; align-items: center; gap: calc(6 * var(--u));
  height: calc(40 * var(--u));
  padding: 0 calc(8 * var(--u)) 0 calc(12 * var(--u));
  background: var(--wood-bar);
  box-shadow: inset 0 calc(-2 * var(--u)) 0 rgba(224, 166, 64, 0.65);
  white-space: nowrap;
}
html[data-ui="v2"] #hudQuestStep {
  /* 顶条只有一行：再挤也是「第几环」缩成省略号，状态签不缩。 */
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
  padding: calc(4 * var(--u)) calc(9 * var(--u));
  border-radius: 999px;
  background: rgba(30, 16, 4, 0.38);
  box-shadow: inset 0 0 0 1px rgba(255, 224, 138, 0.25);
  color: #ffe08a;
  font: 800 var(--fs-xs)/1 var(--sg-font);
  letter-spacing: 0.04em;
}
html[data-ui="v2"] #hudQuestStep:empty { display: none; }
/* 状态签：没在做时金色「▶ 前往」；执行中变绿，左边一颗呼吸灯。 */
html[data-ui="v2"] #questGoBtn {
  flex: none;
  margin-left: auto;
  display: inline-flex; align-items: center; gap: calc(6 * var(--u));
  height: calc(28 * var(--u)); padding: 0 calc(12 * var(--u)) 0 calc(9 * var(--u));
  border: calc(2 * var(--u)) solid var(--sg-wood-dk);
  border-radius: 999px;
  background: linear-gradient(var(--sg-gold-hi), var(--sg-gold));
  box-shadow: 0 calc(2 * var(--u)) 0 rgba(30, 16, 4, 0.55), inset 0 calc(2 * var(--u)) 0 rgba(255, 255, 255, 0.45);
  color: #4a2a08;
  font: 900 var(--fs-xs)/1 var(--sg-font);
  transition: transform 80ms ease-out, filter 80ms linear;
}
html[data-ui="v2"] #questGoBtn:hover { filter: brightness(1.08); }
html[data-ui="v2"] #questGoBtn:active { transform: translateY(calc(1 * var(--u))) scale(0.97); }
html[data-ui="v2"] #questGoBtn i {
  position: relative; flex: none;
  width: calc(12 * var(--u)); height: calc(12 * var(--u));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3.5l15 8.5-15 8.5z' fill='%234a2a08' stroke='%234a2a08' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-ui="v2"] #questGoBtn.on { background: linear-gradient(#8fe07a, #2f8a25); color: #fff; text-shadow: 0 1px 1px #0b3d12; }
html[data-ui="v2"] #questGoBtn.on i {
  width: calc(10 * var(--u)); height: calc(10 * var(--u));
  border-radius: 50%;
  background: #effff0;
  box-shadow: 0 0 calc(4 * var(--u)) #b8ffb0;
}
html[data-ui="v2"] #questGoBtn.on i::after, html[data-ui="v2"] #hudQuestWrap.running .qRailDot::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  background: rgba(239, 255, 240, 0.8);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  html[data-ui="v2"] #questGoBtn.on i::after, html[data-ui="v2"] #hudQuestWrap.running .qRailDot::after { animation: qRunPulse 1.6s ease-out infinite; }
}
@keyframes qRunPulse { from { transform: scale(1); opacity: 0.9; } to { transform: scale(2.8); opacity: 0; } }
html[data-ui="v2"] #hudQuestLog {
  padding: calc(8 * var(--u)) calc(12 * var(--u)) 0;
  color: #3a2a18;
  font: 700 var(--fs-xs)/1.5 var(--sg-font);
}
html[data-ui="v2"] #hudQuestLog .qName { margin: 0 0 calc(3 * var(--u)); color: var(--sg-ink); font: 900 var(--fs-s)/1.3 var(--sg-font); letter-spacing: 0.02em; }
html[data-ui="v2"] #hudQuestLog .qLog { color: var(--sg-ink-soft); }
/* 「已选：交给奇洛斯 · 改」：一行、放不下省略；还有没选的（.need）金色。「改 / 选」是一颗小钮（view.js 按 data-plan 分派）。 */
html[data-ui="v2"] #hudQuestLog .qPlan { display: flex; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(4 * var(--u)); color: var(--sg-ok); font: 900 var(--fs-xs)/1.4 var(--sg-font); }
html[data-ui="v2"] #hudQuestLog .qPlan.need { color: var(--sg-warn); }
html[data-ui="v2"] #hudQuestLog .qPlan span { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="v2"] #hudQuestLog .qPlanBtn {
  flex: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-width: calc(48 * var(--u)); height: calc(34 * var(--u)); padding: 0 calc(10 * var(--u));
  border: calc(2 * var(--u)) solid var(--sg-wood); border-radius: calc(8 * var(--u));
  background: linear-gradient(var(--sg-gold-hi), var(--sg-gold)); color: var(--sg-wood-dk); font: 900 var(--fs-xs)/1 var(--sg-font);
  box-shadow: 0 calc(2 * var(--u)) 0 rgba(58, 34, 12, 0.45);
}
/* 奖励：「奖励」小标题后一道渐隐的线；下面左边一格一个形象（道具金框、宠物蓝框，按一下看说明，隔几秒扫过一道亮光），
   右边经验、石币、骨玉竖着排，只画图标写数（石币、骨玉和顶栏同一套图标）。 */
html[data-ui="v2"] #hudQuestReward {
  margin: calc(8 * var(--u)) calc(10 * var(--u)) 0;
  padding: calc(7 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u));
  border-radius: calc(12 * var(--u));
  background: rgba(255, 251, 238, 0.72);
  box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(167, 122, 69, 0.34);
}
html[data-ui="v2"] .qRewHead {
  display: flex; align-items: center; gap: calc(6 * var(--u));
  margin: 0 0 calc(6 * var(--u));
  color: #9a6214;
  font: 900 var(--fs-xs)/1 var(--sg-font);
  letter-spacing: 0.2em;
}
html[data-ui="v2"] .qRewHead::after { content: ""; flex: 1; height: calc(2 * var(--u)); border-radius: 999px; background: linear-gradient(90deg, rgba(167, 122, 69, 0.55), transparent); }
html[data-ui="v2"] .qRewList { display: flex; align-items: center; gap: calc(8 * var(--u)); }
/* 一排不换行，放不下就横着滚（GMTOOL 第六节 B3）：换行会把抽屉越撑越高。滚动区里留 4u 边、外边距 -4u 抵掉，
   排版和原来一样大，又不切掉格子底下的阴影和点开时的金圈。放不下时 ui-scroll.js 在底边画一根横条，
   这时（:has 认得出那根条）底边再让出条的高，不压格子右下角的数。 */
html[data-ui="v2"] .qRewTiles {
  display: flex; flex-wrap: nowrap; gap: calc(6 * var(--u));
  box-sizing: content-box;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain; touch-action: pan-x;
  padding: calc(4 * var(--u)); margin: calc(-4 * var(--u));
}
html[data-ui="v2"] .qRewList:has(> .sgTrack:not([hidden])) > .qRewTiles,
html[data-ui="v2"] .qRewPick:has(> .sgTrack:not([hidden])) > .qRewTiles { padding-bottom: max(14px, calc(18 * var(--u))); }
html[data-ui="v2"] .qRewList.hasCoins .qRewTiles { flex: none; max-width: calc(116 * var(--u)); }
html[data-ui="v2"] .qRewTile {
  position: relative; flex: none; overflow: hidden;
  width: calc(54 * var(--u)); height: calc(54 * var(--u)); padding: 0;
  border: calc(2 * var(--u)) solid var(--sg-gold-line);
  border-radius: calc(11 * var(--u));
  background: radial-gradient(circle at 50% 38%, #fffdf5, #f6e2b0 62%, #ddb469);
  box-shadow: 0 calc(2 * var(--u)) 0 rgba(58, 34, 12, 0.4), inset 0 0 0 calc(2 * var(--u)) rgba(255, 255, 255, 0.45);
}
html[data-ui="v2"] .qRewTile.pet { border-color: #5b9bd5; background: radial-gradient(circle at 50% 38%, #f7fbff, #d4e7f7 62%, #9fc3e3); }
html[data-ui="v2"] .qRewTile.open { border-color: #fff; box-shadow: 0 0 0 calc(3 * var(--u)) var(--sg-gold), 0 0 calc(12 * var(--u)) rgba(255, 215, 94, 0.9); }
html[data-ui="v2"] .qRewTile canvas, html[data-ui="v2"] .qRewTile img.rwArt { position: absolute; left: 8%; top: 6%; width: 84%; height: 84%; pointer-events: none; }
/* 奖励形象（reward-tiles.js）：图集还没到、没有这张图时格子里空着，不露浏览器的破图标。 */
html[data-ui="v2"] img.rwArt { -webkit-user-drag: none; user-select: none; }
html[data-ui="v2"] img.rwArt:not([src]), html[data-ui="v2"] img.rwArt.none { visibility: hidden; }
html[data-ui="v2"] .qRewTile em {
  position: absolute; right: calc(3 * var(--u)); bottom: calc(1 * var(--u));
  color: #fff; font: 900 var(--fs-xs)/1 var(--sg-font); font-style: normal;
  text-shadow: 0 0 2px #3a220c, 0 1px 1px #3a220c, 1px 0 1px #3a220c, -1px 0 1px #3a220c;
  pointer-events: none;
}
/* 到手后：骑 / 战 / 装，左上角一枚小圆牌。 */
html[data-ui="v2"] .qRewTile .qRewAuto {
  position: absolute; left: calc(2 * var(--u)); top: calc(2 * var(--u)); z-index: 1;
  min-width: calc(18 * var(--u)); height: calc(18 * var(--u)); padding: 0 calc(3 * var(--u));
  border-radius: 999px; background: #c2412d; border: calc(1.5 * var(--u)) solid #fff3c4;
  color: #fff; font: 900 calc(11 * var(--u))/calc(15 * var(--u)) var(--sg-font); text-align: center;
  pointer-events: none;
}
html[data-ui="v2"] .qRewTile::after {
  content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  transform: translateX(-130%) skewX(-20deg);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  html[data-ui="v2"] .qRewTile::after { animation: qRewShine 4.8s ease-in-out infinite; }
}
@keyframes qRewShine { 0%, 72% { transform: translateX(-130%) skewX(-20deg); } 100% { transform: translateX(330%) skewX(-20deg); } }
/* 任选一：上面一枚「任选一」小牌，下面一排格子（石币、骨玉、经验也画成格子：图标 + 数），整块虚线金框。四样一排放得下，再多横着滚。 */
html[data-ui="v2"] .qRewPick {
  margin-top: calc(6 * var(--u));
  padding: calc(5 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u));
  border: calc(2 * var(--u)) dashed var(--sg-gold-line);
  border-radius: calc(10 * var(--u));
}
html[data-ui="v2"] .qRewPickLab {
  display: inline-block;
  margin-bottom: calc(5 * var(--u));
  padding: calc(3 * var(--u)) calc(8 * var(--u));
  border-radius: 999px;
  background: var(--sg-night); color: #ffd75e;
  font: 900 var(--fs-xs)/1 var(--sg-font); letter-spacing: 0.1em;
}
html[data-ui="v2"] .qRewPick .qRewTiles { flex-wrap: nowrap; gap: calc(5 * var(--u)); }
html[data-ui="v2"] .qRewPick .qRewTile { width: calc(48 * var(--u)); height: calc(48 * var(--u)); }
/* 「N 选 1」里现在选不了的方案（条件不满足）：照样列出来、点得开看原因，画淡（GMTOOL 第六节 B2）。 */
html[data-ui="v2"] .qRewTile.lock { opacity: 0.5; filter: grayscale(0.7); }
html[data-ui="v2"] .qRewTile.coin { display: block; }
html[data-ui="v2"] .qRewTile.coin i { position: absolute; left: 22%; top: 12%; width: 56%; height: 56%; }
html[data-ui="v2"] .qRewCoins { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(3 * var(--u)); }
html[data-ui="v2"] .qRewList:not(.hasTiles) .qRewCoins { flex-direction: row; flex-wrap: wrap; column-gap: calc(14 * var(--u)); }
html[data-ui="v2"] .qRewChip {
  display: flex; align-items: center; gap: calc(6 * var(--u));
  height: calc(22 * var(--u));
  color: #8a3a0e;
  font: 900 var(--fs-xs)/1 var(--sg-font);
  white-space: nowrap;
}
html[data-ui="v2"] .qRewChip i { position: relative; flex: none; width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
html[data-ui="v2"] .qRewChip.qr-exp i,
html[data-ui="v2"] .qRewTile.qr-exp i, html[data-ui="v2"] .wnPickTile.k-exp .wnPickArt i {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6l3.1 6.4 7 1-5.1 4.9 1.2 7L12 17.6l-6.2 3.3 1.2-7L1.9 9l7-1z' fill='%23ffc928' stroke='%238a5a10' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 木脊：深色木条，左边一道金线接内容（像书脊）。分上中下三格，上下两格一样高、放收起钮和执行灯，「任务」在中间那格，
   正好在木脊竖直正中。收起后只剩它贴在左边沿，点它就展开。 */
html[data-ui="v2"] #hudQuestRail {
  flex: none; position: relative;
  width: var(--qRail);
  display: grid; grid-template-rows: calc(32 * var(--u)) 1fr calc(32 * var(--u)); justify-items: center; align-items: center;
  row-gap: calc(6 * var(--u));
  box-sizing: border-box;
  padding: calc(6 * var(--u)) 0;
  border: calc(3 * var(--u)) solid var(--sg-wood-dk);
  border-left: 0;
  border-radius: 0 calc(16 * var(--u)) calc(16 * var(--u)) 0;
  background: linear-gradient(90deg, #5e3a18, #8a5a2e 48%, #6b4423);
  box-shadow: inset calc(2 * var(--u)) 0 0 var(--sg-gold-line), inset calc(6 * var(--u)) 0 calc(5 * var(--u)) rgba(0, 0, 0, 0.3);
}
html[data-ui="v2"] #questMin {
  position: relative; display: block; flex: none;
  width: calc(32 * var(--u)); height: calc(32 * var(--u));
  padding: 0;
  border: calc(2 * var(--u)) solid var(--sg-gold-line);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #5a3d22, #24150a);
  box-shadow: 0 calc(2 * var(--u)) 0 rgba(0, 0, 0, 0.45);
}
html[data-ui="v2"] #questMin::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: calc(8 * var(--u)); height: calc(8 * var(--u));
  border-left: calc(3 * var(--u)) solid #ffe3a3;
  border-bottom: calc(3 * var(--u)) solid #ffe3a3;
  transform: translate(-30%, -50%) rotate(45deg);
  transition: transform 280ms cubic-bezier(0.22, 0.8, 0.2, 1);
}
html[data-ui="v2"] #hudQuestWrap.min #questMin::after { transform: translate(-70%, -50%) rotate(225deg); }
/* 「任务」两个字各占一块、上下排，不用 writing-mode 竖排：竖排字放在网格里，字能占多高要等浏览器先算出那一格；
   有的手机浏览器收起时重排把那一格算矮了，两个字就并排成横的一行（读成「务任」）挤出木脊（Chromium 里正常）。 */
html[data-ui="v2"] .qRailName {
  display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u));
  color: #ffe08a;
  font: 900 var(--fs-s)/1 var(--sg-font);
  white-space: nowrap;
  text-shadow: 0 1px 0 #2a1606;
}
html[data-ui="v2"] .qRailDot {
  position: relative; flex: none;
  width: calc(10 * var(--u)); height: calc(10 * var(--u));
  border-radius: 50%;
  background: rgba(255, 236, 200, 0.22);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}
html[data-ui="v2"] #hudQuestWrap.running .qRailDot { background: #8dff6e; box-shadow: 0 0 calc(6 * var(--u)) #8dff6e; }
html[data-ui="v2"] #hudQuestWrap.min #questTip { display: none !important; }
/* ---------- 组队（team-ui.js）：木脊上「任务 / 队伍」两个竖写标签，点哪个哪个亮；队伍页和任务页同宽同底，换着露。 ---------- */
html[data-ui="v2"] .qRailTabs { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(10 * var(--u)); }
html[data-ui="v2"] .qRailName {
  position: relative;
  width: calc(36 * var(--u)); padding: calc(7 * var(--u)) 0;
  gap: calc(4 * var(--u));
  border: 0; border-radius: calc(10 * var(--u));
  background: transparent;
  color: rgba(255, 224, 138, 0.5);
  cursor: pointer;
}
html[data-ui="v2"] .qRailName.on { color: #ffe08a; background: rgba(20, 10, 2, 0.35); box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(224, 166, 64, 0.55); }
html[data-ui="v2"] .qRailTeamDot {
  position: absolute; right: calc(-3 * var(--u)); top: calc(-3 * var(--u));
  width: calc(12 * var(--u)); height: calc(12 * var(--u));
  border-radius: 50%; background: #e5402a; box-shadow: 0 0 0 calc(2 * var(--u)) #3a220c;
}
html[data-ui="v2"] #hudQuestWrap.team #hudQuestMain { display: none; }
/* 队伍页比任务页宽一点：一行放两个队员，名字要放得下。 */
html[data-ui="v2"] #hudQuestWrap.team { width: max(calc(330 * var(--u)), 176px); }
html[data-ui="v2"] #hudQuestNone { margin: 0; padding: calc(16 * var(--u)) calc(12 * var(--u)); color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.5 var(--sg-font); text-align: center; }
html[data-ui="v2"] #hudQuestWrap:has(#hudQuestNone:not([hidden])) #questGoBtn { visibility: hidden; }
html[data-ui="v2"] #hudTeamMain {
  position: relative;
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  padding-bottom: calc(8 * var(--u));
  border-top: calc(3 * var(--u)) solid var(--sg-wood);
  border-bottom: calc(3 * var(--u)) solid var(--sg-wood);
  background: linear-gradient(rgba(252, 238, 204, 0.97), rgba(236, 207, 152, 0.97));
}
/* 放不下就换行（「再按离队」、字号大），不往右溢出：溢出的钮会落到抽屉收起钮 #questMin 底下，按不到（2026-10-25 量过）。 */
html[data-ui="v2"] #hudTeamMain .tmHead {
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: calc(5 * var(--u)) calc(6 * var(--u));
  box-sizing: border-box; min-height: calc(40 * var(--u)); padding: calc(6 * var(--u)) calc(8 * var(--u)) calc(6 * var(--u)) calc(12 * var(--u));
  background: var(--wood-bar);
  box-shadow: inset 0 calc(-2 * var(--u)) 0 rgba(224, 166, 64, 0.65);
  white-space: nowrap;
}
html[data-ui="v2"] #hudTeamMain .tmCount {
  flex: none; margin-right: auto;
  padding: calc(4 * var(--u)) calc(9 * var(--u));
  border-radius: 999px;
  background: rgba(30, 16, 4, 0.38); box-shadow: inset 0 0 0 1px rgba(255, 224, 138, 0.25);
  color: #ffe08a; font: 800 var(--fs-xs)/1 var(--sg-font); letter-spacing: 0.04em;
}
html[data-ui="v2"] #hudTeamMain .tmBtn {
  flex: none;
  height: calc(28 * var(--u)); padding: 0 calc(7 * var(--u));
  border: calc(2 * var(--u)) solid var(--sg-wood-dk); border-radius: 999px;
  background: var(--sg-paper-in); color: #4a2a08;
  box-shadow: 0 calc(2 * var(--u)) 0 rgba(30, 16, 4, 0.55);
  font: 900 var(--fs-xs)/1 var(--sg-font);
}
html[data-ui="v2"] #hudTeamMain .tmBtn.gold { background: linear-gradient(var(--sg-gold-hi), var(--sg-gold)); }
html[data-ui="v2"] #hudTeamMain .tmBtn.warn { background: linear-gradient(#e86a4a, #b5301c); color: #fff; text-shadow: 0 1px 1px #5a1206; }
html[data-ui="v2"] #hudTeamMain .tmVote {
  display: flex; align-items: center; gap: calc(6 * var(--u));
  margin: calc(8 * var(--u)) calc(8 * var(--u)) 0; padding: calc(6 * var(--u)) calc(8 * var(--u));
  border-radius: calc(10 * var(--u));
  background: rgba(192, 64, 42, 0.14); box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(192, 64, 42, 0.45);
  color: #8a2a10; font: 800 var(--fs-xs)/1.2 var(--sg-font);
}
html[data-ui="v2"] #hudTeamMain .tmVote b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 900; }
html[data-ui="v2"] #hudTeamMain .tmVote span { flex: 1 0 auto; white-space: nowrap; }
html[data-ui="v2"] #hudTeamMain .tmVote em { flex: none; min-width: 1.4em; text-align: center; font-style: normal; font-weight: 900; }
html[data-ui="v2"] #hudTeamMain .tmVote button {
  flex: none; height: calc(26 * var(--u)); padding: 0 calc(10 * var(--u));
  border: calc(2 * var(--u)) solid #7a1e0e; border-radius: 999px;
  background: #c0402a; color: #fff; font: 900 var(--fs-xs)/1 var(--sg-font);
}
html[data-ui="v2"] #hudTeamMain .tmMem {
  position: relative; box-sizing: border-box; min-width: 0;
  display: flex; align-items: center; gap: calc(6 * var(--u));
  padding: calc(5 * var(--u));
  border-radius: calc(10 * var(--u));
  background: rgba(255, 251, 238, 0.7); box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(167, 122, 69, 0.34);
}
html[data-ui="v2"] #hudTeamMain .tmMem.lead {
  margin: calc(8 * var(--u)) calc(8 * var(--u)) 0; padding: calc(7 * var(--u)) calc(8 * var(--u));
  background: rgba(255, 243, 200, 0.95); box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--sg-gold-line);
}
html[data-ui="v2"] #hudTeamMain .tmGrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(6 * var(--u)); margin: calc(6 * var(--u)) calc(8 * var(--u)) 0; }
/* 队员格：头像在上、名字和等级在下，居中。 */
html[data-ui="v2"] #hudTeamMain .tmGrid .tmMem { flex-direction: column; justify-content: center; gap: calc(5 * var(--u)); min-height: calc(100 * var(--u)); padding: calc(8 * var(--u)) calc(4 * var(--u)) calc(6 * var(--u)); text-align: center; }
html[data-ui="v2"] #hudTeamMain .tmGrid .tmName { flex: none; width: 100%; align-items: center; }
html[data-ui="v2"] #hudTeamMain .tmGrid .tmName b, html[data-ui="v2"] #hudTeamMain .tmGrid .tmName small { max-width: 100%; }
html[data-ui="v2"] #hudTeamMain .tmFace {
  position: relative; flex: none;
  width: calc(44 * var(--u)); height: calc(44 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #fffdf5, #f6e2b0 62%, #ddb469);
  box-shadow: 0 0 0 calc(2 * var(--u)) var(--sg-wood);
}
html[data-ui="v2"] #hudTeamMain .tmFace canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
html[data-ui="v2"] #hudTeamMain .tmMem.lead .tmFace { width: calc(52 * var(--u)); height: calc(52 * var(--u)); box-shadow: 0 0 0 calc(2 * var(--u)) var(--sg-gold), 0 0 0 calc(4 * var(--u)) var(--sg-wood-dk); }
/* 队长一行：名字单独一行，下面一行左边等级、右边「转让队长 / 申请队长」。 */
html[data-ui="v2"] #hudTeamMain .tmMem.lead { gap: calc(9 * var(--u)); }
html[data-ui="v2"] #hudTeamMain .tmMem.lead .tmName { gap: calc(5 * var(--u)); }
html[data-ui="v2"] #hudTeamMain .tmSub { display: flex; align-items: center; gap: calc(6 * var(--u)); min-width: 0; }
html[data-ui="v2"] #hudTeamMain .tmSub small { flex: 1; min-width: 0; }
/* 速度翅膀（老板 10-31 二轮第 3 问：鞋子、开战小牌的皇冠统一换成翅膀）：一个图形——一片后掠的三羽翼，根在左下、尖在右上——存成 --wing-svg，
   所有用处都拿它当遮罩（mask），颜色由用处自己给：小图标 .uiWing 是金底圆章里一片深褐翅膀（队伍页带速胶囊、带速人头像角标、带速说明框标题），
   大徽是开战小牌里一对金翅膀（#battleCarry .bcWing，左边那片镜像）。改形状只改这一个变量，别再在 JS 里另存一份路径。 */
html[data-ui="v2"] {
  --wing-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath d='M2 20C5 11 14 4 31 2C28 6 25 7.5 21 8L27 9.5C24 12.5 19 13 15.5 12.5L21.5 15C18 17.5 12 18 8.5 17L11 20C8 21.5 4.5 21.5 2 20Z'/%3E%3C/svg%3E");
}
html[data-ui="v2"] .uiWing {
  position: relative; display: inline-block; flex: none; vertical-align: -0.2em;
  width: 1.4em; height: 1.4em; border-radius: 50%;
  background: linear-gradient(var(--sg-gold-hi), var(--sg-gold));
  box-shadow: 0 0 0 calc(2 * var(--u)) var(--sg-wood-dk);
}
html[data-ui="v2"] .uiWing::before {
  content: ""; position: absolute; inset: 20% 13% 22% 15%;
  background: var(--sg-wood-dk);
  -webkit-mask: var(--wing-svg) center / contain no-repeat; mask: var(--wing-svg) center / contain no-repeat;
}
/* 组队带速（SPEED.md；老板 10-31 第 5 问）：顶条下面一枚翅膀胶囊「「小明」带速」/「你在带速」（有人被带快了才出、不写数，点开带速说明框），
   带速的人头像右下角一枚金底翅膀章（.tmBolt.uiWing）。 */
html[data-ui="v2"] #hudTeamMain .tmSpeed { display: flex; margin: calc(8 * var(--u)) calc(8 * var(--u)) 0; }
html[data-ui="v2"] #hudTeamMain .tmShoePill {
  display: inline-flex; align-items: center; gap: calc(8 * var(--u)); max-width: 100%;
  box-sizing: border-box; height: calc(44 * var(--u)); padding: 0 calc(16 * var(--u)) 0 calc(5 * var(--u));
  border: 0; border-radius: 999px;
  background: linear-gradient(#fff6dc, #f3d796);
  box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--sg-gold-line), 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(58, 34, 12, 0.3);
  color: var(--sg-ink); font: 900 var(--fs-xs)/1 var(--sg-font);
  pointer-events: auto; cursor: pointer;
}
html[data-ui="v2"] #hudTeamMain .tmShoePill > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
html[data-ui="v2"] #hudTeamMain .tmShoePill > .uiWing { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
/* 自己在带速：胶囊亮金一点（不动、不闪）。 */
html[data-ui="v2"] #hudTeamMain .tmShoePill.self { background: linear-gradient(#fff1c2, #f0c75e); box-shadow: inset 0 0 0 calc(2 * var(--u)) #b8780c, 0 0 calc(8 * var(--u)) rgba(255, 217, 119, 0.8); }
html[data-ui="v2"] #hudTeamMain .tmShoePill:focus-visible { outline: calc(3 * var(--u)) solid var(--sg-wood-dk); outline-offset: calc(2 * var(--u)); }
html[data-ui="v2"] #hudTeamMain .tmShoePill:active { transform: translateY(calc(1 * var(--u))); }
html[data-ui="v2"] #hudTeamMain .tmBolt {
  position: absolute; z-index: 1; right: calc(-6 * var(--u)); bottom: calc(-4 * var(--u));
  width: calc(24 * var(--u)); height: calc(24 * var(--u));
  box-shadow: 0 0 0 calc(2 * var(--u)) var(--sg-wood-dk), 0 0 calc(6 * var(--u)) rgba(255, 217, 119, 0.9);
  pointer-events: auto; cursor: pointer;
}
html[data-ui="v2"] #hudTeamMain .tmFlag {
  position: absolute; z-index: 1; left: calc(-6 * var(--u)); top: calc(-10 * var(--u));
  width: calc(20 * var(--u)); height: calc(24 * var(--u));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath d='M4 2v20' stroke='%233a220c' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M5 3l13 4.5L5 12z' fill='%23e8402a' stroke='%233a220c' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-ui="v2"] #hudTeamMain .tmName { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(3 * var(--u)); }
html[data-ui="v2"] #hudTeamMain .tmName b { color: var(--sg-ink); font: 900 var(--fs-xs)/1.15 var(--sg-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="v2"] #hudTeamMain .tmMem.lead .tmName b { font-size: var(--fs-s); }
html[data-ui="v2"] #hudTeamMain .tmName small { color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.1 var(--sg-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="v2"] #hudTeamMain .tmName small em { font-style: normal; }
html[data-ui="v2"] #hudTeamMain .tmMem.me .tmName b { color: #9a4a0e; }
html[data-ui="v2"] #hudTeamMain .tmMem.off { filter: grayscale(0.85); opacity: 0.6; }
/* 点人菜单的选中 .sel 只留一处（同账号多角色那一段，排在 .mine / .away 后面才压得住它们），这里原来那条一模一样的删了。 */
html[data-ui="v2"] #hudTeamMain .tmMem.pick { box-shadow: inset 0 0 0 calc(3 * var(--u)) #2f8a25, 0 0 calc(8 * var(--u)) rgba(80, 200, 60, 0.7); }
html[data-ui="v2"] #hudTeamMain .tmMem.empty {
  justify-content: center; gap: calc(4 * var(--u)); min-height: calc(100 * var(--u));
  background: transparent; box-shadow: none;
  border: calc(2 * var(--u)) dashed rgba(122, 74, 30, 0.4);
  color: rgba(122, 90, 58, 0.75); font: 800 var(--fs-xs)/1 var(--sg-font);
}
html[data-ui="v2"] #hudTeamMain .tmMem.empty i::before { content: "+"; font: 900 var(--fs-s)/1 var(--sg-font); font-style: normal; }
html[data-ui="v2"] #hudTeamMain .tmLeadBtn {
  flex: none; height: calc(30 * var(--u)); padding: 0 calc(9 * var(--u));
  border: calc(2 * var(--u)) solid var(--sg-wood-dk); border-radius: 999px;
  background: linear-gradient(var(--sg-gold-hi), var(--sg-gold)); color: #4a2a08;
  box-shadow: 0 calc(2 * var(--u)) 0 rgba(30, 16, 4, 0.55), inset 0 calc(2 * var(--u)) 0 rgba(255, 255, 255, 0.45);
  font: 900 var(--fs-xs)/1 var(--sg-font);
}
html[data-ui="v2"] #hudTeamMain .tmLeadBtn.on { background: linear-gradient(#8fe07a, #2f8a25); color: #fff; text-shadow: 0 1px 1px #0b3d12; }
html[data-ui="v2"] #hudTeamMain .tmLeadBtn:disabled,
html[data-ui="v2"] #hudTeamMain .tmHead .tmBtn:disabled { opacity: 0.45; }
html[data-ui="v2"] #hudTeamMain .tmHint { margin: calc(6 * var(--u)) calc(8 * var(--u)) 0; color: #2f7a25; font: 800 var(--fs-xs)/1.3 var(--sg-font); text-align: center; }
html[data-ui="v2"] #hudTeamMain .tmMenu {
  position: absolute; z-index: 2; left: calc(6 * var(--u)); right: calc(6 * var(--u)); bottom: calc(6 * var(--u));
  display: flex; flex-direction: column; gap: calc(6 * var(--u));
  padding: calc(8 * var(--u));
  border-radius: calc(12 * var(--u));
  background: var(--sg-night); box-shadow: 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.5);
}
html[data-ui="v2"] #hudTeamMain .tmMenu b { color: #ffe08a; font: 900 var(--fs-xs)/1.2 var(--sg-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="v2"] #hudTeamMain .tmMenu div { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); }
html[data-ui="v2"] #hudTeamMain .tmMenu button {
  flex: 1 1 auto; height: calc(32 * var(--u)); padding: 0 calc(8 * var(--u));
  border: calc(2 * var(--u)) solid var(--sg-gold-line); border-radius: 999px;
  background: var(--sg-paper); color: var(--sg-ink); font: 900 var(--fs-xs)/1 var(--sg-font);
}
html[data-ui="v2"] #hudTeamMain .tmNone { display: flex; flex-direction: column; align-items: center; gap: calc(10 * var(--u)); padding: calc(14 * var(--u)) calc(10 * var(--u)) calc(4 * var(--u)); }
html[data-ui="v2"] #hudTeamMain .tmNone p { margin: 0; color: var(--sg-ink-soft); font: 800 var(--fs-xs)/1.3 var(--sg-font); }
html[data-ui="v2"] #hudTeamMain .tmNone .tmCool { color: var(--sg-bad); }
html[data-ui="v2"] #hudTeamMain .tmCool em { font-style: normal; }
html[data-ui="v2"] #hudTeamMain .tmBig {
  width: 100%; height: calc(48 * var(--u));
  border: calc(3 * var(--u)) solid var(--sg-wood-dk); border-radius: calc(14 * var(--u));
  background: linear-gradient(var(--sg-gold-hi), var(--sg-gold)); color: #4a2a08;
  box-shadow: 0 calc(3 * var(--u)) 0 rgba(30, 16, 4, 0.55), inset 0 calc(2 * var(--u)) 0 rgba(255, 255, 255, 0.45);
  font: 900 var(--fs-m)/1 var(--sg-font); letter-spacing: 0.2em;
}
/* 「接受任何邀请」勾：队伍页和邀请面板同一个样子。 */
html[data-ui="v2"] .tmAuto {
  display: inline-flex; align-items: center; gap: calc(6 * var(--u));
  padding: 0; border: 0; background: transparent;
  color: var(--sg-ink); font: 800 var(--fs-xs)/1.2 var(--sg-font); text-align: left;
  cursor: pointer;
}
html[data-ui="v2"] .tmAuto i {
  position: relative; flex: none;
  width: calc(22 * var(--u)); height: calc(22 * var(--u)); box-sizing: border-box;
  border: calc(2 * var(--u)) solid var(--sg-wood); border-radius: calc(6 * var(--u));
  background: var(--sg-paper-in);
}
html[data-ui="v2"] .tmAuto.on i { background: linear-gradient(#8fe07a, #2f8a25); border-color: #1e5a17; }
html[data-ui="v2"] .tmAuto.on i::after {
  content: ""; position: absolute; left: 32%; top: 10%; width: 28%; height: 52%;
  border: solid #fff; border-width: 0 calc(3 * var(--u)) calc(3 * var(--u)) 0;
  transform: rotate(45deg);
}
/* 邀请面板（#team）：和背包、邮件同一套纸卡。 */
html[data-ui="v2"] #team .tpTop {
  flex: none; display: flex; flex-direction: column; gap: calc(6 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  border-radius: calc(12 * var(--u));
  background: rgba(255, 251, 238, 0.72); box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(167, 122, 69, 0.34);
}
html[data-ui="v2"] #team .tpTop .tmAuto { font-size: var(--fs-s); }
html[data-ui="v2"] #team .tpTop .tmAuto i { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
html[data-ui="v2"] #team .tpTop small { color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.4 var(--sg-font); }
html[data-ui="v2"] #team .tpCool { flex: none; margin: 0; padding: calc(8 * var(--u)) calc(12 * var(--u)); border-radius: calc(10 * var(--u)); background: rgba(192, 40, 30, 0.12); color: var(--sg-bad); font: 800 var(--fs-xs)/1.3 var(--sg-font); }
html[data-ui="v2"] #team .tpCool em { font-style: normal; }
html[data-ui="v2"] #team .tpSearch { flex: none; display: flex; gap: calc(8 * var(--u)); margin: 0; }
html[data-ui="v2"] #team .tpSearch[hidden] { display: none; }
html[data-ui="v2"] #team .tpSearch input {
  flex: 1; min-width: 0; height: calc(52 * var(--u)); box-sizing: border-box;
  padding: 0 calc(14 * var(--u));
  border: calc(3 * var(--u)) solid var(--sg-wood); border-radius: calc(12 * var(--u));
  background: var(--sg-paper-in); color: var(--sg-ink); font: 800 var(--fs-m)/1 var(--sg-font);
}
html[data-ui="v2"] #team .tpSearch .sgBtn { height: calc(52 * var(--u)); }
html[data-ui="v2"] #team .tpList { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
html[data-ui="v2"] #team .tpRow {
  display: flex; align-items: center; gap: calc(10 * var(--u));
  padding: calc(8 * var(--u)) calc(10 * var(--u));
  border-radius: calc(12 * var(--u));
  background: rgba(255, 251, 238, 0.75); box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(167, 122, 69, 0.34);
}
html[data-ui="v2"] #team .tpRow.off { opacity: 0.6; }
html[data-ui="v2"] #team .tpRow canvas {
  flex: none; width: calc(56 * var(--u)); height: calc(56 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #fffdf5, #f6e2b0 62%, #ddb469);
  box-shadow: 0 0 0 calc(2 * var(--u)) var(--sg-wood);
}
html[data-ui="v2"] #team .tpInfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
html[data-ui="v2"] #team .tpInfo b { font: 900 var(--fs-m)/1.15 var(--sg-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="v2"] #team .tpInfo span { color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.2 var(--sg-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="v2"] #team .tpTag { flex: none; padding: calc(4 * var(--u)) calc(8 * var(--u)); border-radius: 999px; background: var(--sg-night); color: #ffd75e; font: 800 var(--fs-xs)/1 var(--sg-font); font-style: normal; }
html[data-ui="v2"] #team .tpSide { flex: none; height: calc(44 * var(--u)); padding: 0 calc(12 * var(--u)); font-size: var(--fs-xs); }
html[data-ui="v2"] #team .tpGo { flex: none; height: calc(44 * var(--u)); min-width: calc(92 * var(--u)); padding: 0 calc(12 * var(--u)); font-size: var(--fs-s); }
html[data-ui="v2"] #team .tpGo:disabled { opacity: 0.45; }
html[data-ui="v2"] #team .tpEmpty { text-align: center; }
/* 被邀请：地图上方一条，30 秒不理算拒。 */
html[data-ui="v2"] #teamAsk { left: 50%; top: calc(var(--topH) + 84 * var(--u)); transform: translateX(-50%); width: calc(660 * var(--u)); }
html[data-ui="v2"] #teamAsk .taBox { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)); animation: taIn 220ms ease-out; }
html[data-ui="v2"] #teamAsk canvas {
  flex: none; width: calc(60 * var(--u)); height: calc(60 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #fffdf5, #f6e2b0 62%, #ddb469);
  box-shadow: 0 0 0 calc(3 * var(--u)) var(--sg-gold), 0 0 0 calc(5 * var(--u)) var(--sg-wood-dk);
}
html[data-ui="v2"] #teamAsk .taText { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
html[data-ui="v2"] #teamAsk .taText b { font: 900 var(--fs-m)/1.15 var(--sg-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="v2"] #teamAsk .taText b small { margin-left: calc(8 * var(--u)); color: var(--sg-ink-soft); font: 800 var(--fs-xs)/1 var(--sg-font); }
html[data-ui="v2"] #teamAsk .taText span { color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.3 var(--sg-font); }
html[data-ui="v2"] #teamAsk .sgBtn { flex: none; height: calc(52 * var(--u)); padding: 0 calc(14 * var(--u)); }
html[data-ui="v2"] #teamAsk .sgBtn em { margin-left: calc(6 * var(--u)); font-style: normal; font-size: var(--fs-xs); opacity: 0.8; }
@keyframes taIn { from { transform: translateY(calc(-12 * var(--u))); opacity: 0; } to { transform: none; opacity: 1; } }
html[data-ui="v2"] #shell.battling #teamAsk { visibility: hidden; }

/* ---------- 同账号多角色（ALTS.md，team-ui.js）：随队 / 暂离 / 遇敌中 / 待归队，头像上的金色「切换」角标 ---------- */
/* 自己管着的随队角色：头像能点，金币角标（两只转圈的箭头），按下去缩一下；切换中头像外一圈金光转。 */
html[data-ui="v2"] #hudTeamMain .tmFace.swap { cursor: pointer; touch-action: manipulation; }
html[data-ui="v2"] #hudTeamMain .tmFace.swap::after {
  content: ""; position: absolute; inset: calc(-4 * var(--u)); border-radius: 50%;
  box-shadow: 0 0 0 calc(2 * var(--u)) rgba(255, 217, 119, 0.85), 0 0 calc(10 * var(--u)) rgba(255, 200, 80, 0.55);
  opacity: 0.75; pointer-events: none;
  animation: tmSwapGlow 2.4s ease-in-out infinite;
}
html[data-ui="v2"] #hudTeamMain .tmFace.swap:active { transform: scale(0.94); }
html[data-ui="v2"] #hudTeamMain .tmSwap {
  position: absolute; z-index: 2; right: calc(-8 * var(--u)); top: calc(-8 * var(--u));
  width: calc(24 * var(--u)); height: calc(24 * var(--u)); min-width: 14px; min-height: 14px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a220c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 10.5a7 7 0 0 1 12-3.2L19 9'/%3E%3Cpath d='M19 4.5V9h-4.5'/%3E%3Cpath d='M18.5 13.5a7 7 0 0 1-12 3.2L5 15'/%3E%3Cpath d='M5 19.5V15h4.5'/%3E%3C/svg%3E") center / 72% no-repeat,
    radial-gradient(circle at 35% 30%, #fff6c8 0, var(--sg-gold-hi) 38%, var(--sg-gold) 72%, #a86e08 100%);
  box-shadow: 0 0 0 calc(2 * var(--u)) var(--sg-wood-dk), 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(30, 16, 4, 0.55);
  cursor: pointer;
}
html[data-ui="v2"] #hudTeamMain .tmMem.lead .tmSwap { right: calc(-6 * var(--u)); top: calc(-6 * var(--u)); }
html[data-ui="v2"] #hudTeamMain .tmSwap.busy { animation: battleAutoSpin 0.9s linear infinite; }
html[data-ui="v2"] #hudTeamMain .tmFace.busy::before {
  content: ""; position: absolute; z-index: 1; inset: calc(-6 * var(--u)); border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 55%, rgba(255, 217, 119, 0.15) 62%, #ffe08a 88%, #fff7d6 96%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5 * var(--u)), #000 calc(100% - 4 * var(--u)));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5 * var(--u)), #000 calc(100% - 4 * var(--u)));
  animation: battleAutoSpin 0.8s linear infinite;
  pointer-events: none;
}
@keyframes tmSwapGlow { 50% { opacity: 0.25; } }
/* 自己账号、别处在操作 / 托管着的角色：头像右上一个小人记号，不能点。 */
html[data-ui="v2"] #hudTeamMain .tmOwn {
  position: absolute; z-index: 2; right: calc(-5 * var(--u)); top: calc(-5 * var(--u));
  width: calc(18 * var(--u)); height: calc(18 * var(--u)); min-width: 11px; min-height: 11px;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23ffd977'%3E%3Ccircle cx='10' cy='7' r='3.4'/%3E%3Cpath d='M3.6 17c.8-3.6 3.4-5.4 6.4-5.4s5.6 1.8 6.4 5.4z'/%3E%3C/svg%3E") center / 76% no-repeat, var(--sg-night);
  box-shadow: 0 0 0 calc(2 * var(--u)) var(--sg-gold-line);
}
/* 没跟上任务（quest.lag）：头像左上红色「!」，跳两下；有没读的私聊：右下红点。 */
html[data-ui="v2"] #hudTeamMain .tmLag {
  position: absolute; z-index: 2; left: calc(-7 * var(--u)); top: calc(-7 * var(--u));
  width: calc(20 * var(--u)); height: calc(20 * var(--u)); min-width: 12px; min-height: 12px;
  display: grid; place-items: center;
  border-radius: 50%; background: linear-gradient(#ff7a5c, #c0281e);
  box-shadow: 0 0 0 calc(2 * var(--u)) #fff3d6, 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(90, 18, 6, 0.6);
  color: #fff; font: 900 var(--fs-xs)/1 var(--sg-font); font-style: normal;
  animation: tmLagHop 1.6s ease-in-out infinite;
}
html[data-ui="v2"] #hudTeamMain .tmMem.lead .tmLag { left: auto; right: calc(-8 * var(--u)); top: auto; bottom: calc(-6 * var(--u)); }
@keyframes tmLagHop { 0%, 60%, 100% { transform: none; } 70% { transform: translateY(calc(-4 * var(--u))); } 80% { transform: none; } 88% { transform: translateY(calc(-2 * var(--u))); } }
html[data-ui="v2"] #hudTeamMain .tmPm {
  position: absolute; z-index: 2; right: calc(-2 * var(--u)); bottom: calc(-2 * var(--u));
  width: calc(12 * var(--u)); height: calc(12 * var(--u)); min-width: 8px; min-height: 8px;
  border-radius: 50%; background: #e5402a; box-shadow: 0 0 0 calc(2 * var(--u)) #fff3d6;
}
/* 状态签：随队（夜色底金字）、暂离（琥珀）、遇敌中（橙红、交叉的剑）、待归队（绿、呼吸）。「我」改成头像上的金签（下面 .tmMeTag）。 */
html[data-ui="v2"] #hudTeamMain .tmLine { display: flex; align-items: center; justify-content: center; gap: calc(4 * var(--u)); min-width: 0; max-width: 100%; }
html[data-ui="v2"] #hudTeamMain .tmSub .tmLine, html[data-ui="v2"] #hudTeamMain .tmMem.lead .tmLine { justify-content: flex-start; }
/* 当前操作的角色（老板 2026-10-31：只靠选中效果看不出哪个是自己）：每张卡（含队长卡）里自己那张，头像左上压一枚金底「我」小签、
   卡片左沿一条金色竖条（::before）。不碰 box-shadow：.sel（点人菜单）、.mine、.away 都用 box-shadow，互不覆盖。
   自己那张卡上队长旗挪到头像右上、「没跟上」的红 ! 挪到左下，给「我」让位。以前名字下面那枚木色「我」（small.tmMe）不画了。 */
html[data-ui="v2"] #hudTeamMain .tmMem.me::before {
  content: ""; position: absolute; z-index: 1; left: 0; top: calc(6 * var(--u)); bottom: calc(6 * var(--u));
  width: calc(4 * var(--u)); min-width: 2px; border-radius: 0 calc(3 * var(--u)) calc(3 * var(--u)) 0;
  background: linear-gradient(var(--sg-gold-hi), var(--sg-gold)); box-shadow: 0 0 calc(5 * var(--u)) rgba(255, 200, 80, 0.7);
  pointer-events: none;
}
html[data-ui="v2"] #hudTeamMain .tmMeTag {
  position: absolute; z-index: 3; left: calc(-8 * var(--u)); top: calc(-8 * var(--u));
  display: grid; place-items: center;
  width: calc(26 * var(--u)); height: calc(26 * var(--u)); min-width: 15px; min-height: 15px; box-sizing: border-box;
  border: calc(2 * var(--u)) solid var(--sg-wood-dk); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6c8 0, var(--sg-gold-hi) 40%, var(--sg-gold) 78%);
  box-shadow: 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(30, 16, 4, 0.5);
  color: #fff; text-shadow: 0 1px 1px #5a3404, 0 0 2px #5a3404; font: 900 max(9px, calc(15 * var(--u)))/1 var(--sg-font); font-style: normal;
  pointer-events: none;
}
html[data-ui="v2"] #hudTeamMain .tmMem.me .tmFlag { left: auto; right: calc(-6 * var(--u)); }
html[data-ui="v2"] #hudTeamMain .tmMem.me .tmLag { top: auto; bottom: calc(-6 * var(--u)); }
html[data-ui="v2"] #hudTeamMain small.tmState {
  flex: 0 1 auto; min-width: 0;
  display: inline-flex; align-items: center; gap: calc(3 * var(--u));
  padding: calc(2 * var(--u)) calc(7 * var(--u)); border-radius: 999px;
  font: 900 var(--fs-xs)/1.1 var(--sg-font);
}
html[data-ui="v2"] #hudTeamMain small.tmState.comp { background: var(--sg-night); color: #ffd977; box-shadow: inset 0 0 0 1px rgba(255, 217, 119, 0.35); }
html[data-ui="v2"] #hudTeamMain small.tmState.away { background: rgba(176, 122, 0, 0.16); color: #8a5a00; box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(176, 122, 0, 0.45); }
/* 队长卡「待命」（team-ui.js stateHtml）：主人切到了别的角色、队长没人操作，队伍原样原地等着——夜蓝底、淡金虚线边，和「随队」同一家族、看得出是停着。 */
html[data-ui="v2"] #hudTeamMain small.tmState.idle { background: var(--sg-night); color: #ffd977; box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(255, 217, 119, 0.55); outline: calc(1 * var(--u)) dashed rgba(255, 217, 119, 0.6); outline-offset: calc(-4 * var(--u)); }
/* 锁队（team-ui.js lockOn）：顶条下面一条金色锁条（CSS 画的锁）；被锁的钮压暗、点了说为什么；空位写「锁队」；锁着时掉线到点的人标「出了这层离队」。 */
html[data-ui="v2"] #hudTeamMain .tmLock {
  display: flex; align-items: center; gap: calc(9 * var(--u));
  margin: calc(8 * var(--u)) calc(8 * var(--u)) 0; padding: calc(7 * var(--u)) calc(10 * var(--u));
  border-radius: calc(10 * var(--u));
  background: linear-gradient(rgba(255, 224, 138, 0.42), rgba(224, 166, 64, 0.3));
  box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(150, 96, 16, 0.55);
  color: #5a3404; font: 800 var(--fs-xs)/1.3 var(--sg-font);
}
html[data-ui="v2"] #hudTeamMain .tmLock i {
  position: relative; flex: none; width: calc(13 * var(--u)); height: calc(10 * var(--u)); margin-top: calc(6 * var(--u));
  border-radius: calc(2 * var(--u)); background: #8a5208;
}
html[data-ui="v2"] #hudTeamMain .tmLock i::before {
  content: ""; position: absolute; left: calc(2 * var(--u)); right: calc(2 * var(--u)); bottom: 100%; height: calc(6 * var(--u));
  border: calc(2 * var(--u)) solid #8a5208; border-bottom: 0; border-radius: calc(6 * var(--u)) calc(6 * var(--u)) 0 0;
}
html[data-ui="v2"] #hudTeamMain .tmLock b { margin-right: calc(5 * var(--u)); color: #8a3a04; font-weight: 900; }
html[data-ui="v2"] #hudTeamMain .tmHead .tmBtn.lockd,
html[data-ui="v2"] #hudTeamMain .tmLeadBtn.lockd { background: #d9c7a0; color: #8a7350; box-shadow: none; text-shadow: none; }
html[data-ui="v2"] #hudTeamMain .tmHead .tmBtn.lockd em { opacity: 0.6; }
html[data-ui="v2"] #hudTeamMain .tmMem.empty.lockd { border-color: rgba(150, 96, 16, 0.45); color: rgba(138, 82, 8, 0.85); }
html[data-ui="v2"] #hudTeamMain .tmMem.empty.lockd i {
  position: relative; width: calc(12 * var(--u)); height: calc(9 * var(--u)); margin-top: calc(6 * var(--u));
  border-radius: calc(2 * var(--u)); background: rgba(138, 82, 8, 0.7);
}
html[data-ui="v2"] #hudTeamMain .tmMem.empty.lockd i::before {
  content: ""; position: absolute; left: calc(2 * var(--u)); right: calc(2 * var(--u)); bottom: 100%; height: calc(5 * var(--u));
  border: calc(2 * var(--u)) solid rgba(138, 82, 8, 0.7); border-bottom: 0; border-radius: calc(5 * var(--u)) calc(5 * var(--u)) 0 0;
}
html[data-ui="v2"] #hudTeamMain small.tmState.held { background: rgba(138, 82, 8, 0.14); color: #7a4a06; box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(138, 82, 8, 0.4); white-space: nowrap; }
html[data-ui="v2"] #hudTeamMain small.tmState.camp { background: linear-gradient(#ff8a4a, #c4401a); color: #fff; text-shadow: 0 1px 1px #5a1206; }
html[data-ui="v2"] #hudTeamMain small.tmState.camp i {
  flex: none; width: calc(14 * var(--u)); height: calc(14 * var(--u)); min-width: 9px; min-height: 9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 3l8 8M13 3L5 11M10 12l3 1-1-3M6 12l-3 1 1-3'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: tmClash 0.9s ease-in-out infinite;
}
@keyframes tmClash { 50% { transform: rotate(-14deg) scale(1.12); } }
html[data-ui="v2"] #hudTeamMain small.tmState.back { background: linear-gradient(#8fe07a, #2f8a25); color: #fff; text-shadow: 0 1px 1px #0b3d12; animation: tmBreath 1.4s ease-in-out infinite; }
@keyframes tmBreath { 50% { box-shadow: 0 0 0 calc(3 * var(--u)) rgba(80, 200, 60, 0.35); } }
/* 格子：暂离的琥珀虚线框、头像淡一点（人还在队里，不是掉线的灰）；自己管着的随队角色一圈淡金边。 */
html[data-ui="v2"] #hudTeamMain .tmMem.mine { box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(224, 166, 64, 0.75), 0 0 calc(6 * var(--u)) rgba(255, 217, 119, 0.35); }
html[data-ui="v2"] #hudTeamMain .tmMem.away { background: repeating-linear-gradient(-45deg, rgba(255, 246, 220, 0.82) 0 calc(8 * var(--u)), rgba(250, 232, 190, 0.82) calc(8 * var(--u)) calc(16 * var(--u))); box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(176, 122, 0, 0.55); }
html[data-ui="v2"] #hudTeamMain .tmMem.away canvas { filter: saturate(0.55) brightness(1.04); }
html[data-ui="v2"] #hudTeamMain .tmMem.camp { box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(196, 64, 26, 0.6); }
html[data-ui="v2"] #hudTeamMain .tmMem.back { box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(47, 138, 37, 0.65); }
html[data-ui="v2"] #hudTeamMain .tmMem.sel { box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--sg-gold), 0 0 calc(8 * var(--u)) rgba(255, 215, 94, 0.85); }
html[data-ui="v2"] #hudTeamMain .tmBtn.call { background: linear-gradient(#a8ec8e, #3c9a2c); color: #fff; text-shadow: 0 1px 1px #0b3d12; }
html[data-ui="v2"] #hudTeamMain .tmBtn.call em {
  display: inline-grid; place-items: center; min-width: 1.35em; height: 1.35em; margin-left: calc(4 * var(--u)); padding: 0 calc(3 * var(--u));
  border-radius: 999px; background: #fff3d6; color: #2f7a25; font-style: normal; font-weight: 900; text-shadow: none;
}
html[data-ui="v2"] #hudTeamMain .tmLeadBtn.gold { background: linear-gradient(#ffe9a0, var(--sg-gold)); }
html[data-ui="v2"] #hudTeamMain .tmHint.soft { color: var(--sg-ink-soft); font-weight: 700; }
html[data-ui="v2"] #hudTeamMain .tmMenu .tmLagText { margin: 0; padding: calc(6 * var(--u)) calc(8 * var(--u)); border-radius: calc(8 * var(--u)); background: rgba(192, 40, 30, 0.22); color: #ffd2c4; font: 800 var(--fs-xs)/1.35 var(--sg-font); }
html[data-ui="v2"] #hudTeamMain .tmMenu .tmLagText.soft { background: rgba(255, 224, 138, 0.12); color: #f3dcaa; }
html[data-ui="v2"] #hudTeamMain .tmMenu button.gold { background: linear-gradient(var(--sg-gold-hi), var(--sg-gold)); border-color: var(--sg-wood-dk); color: #4a2a08; }
/* 没有队伍时：「带上我的角色」大钮（一枚金币 + 两行字）。 */
html[data-ui="v2"] #hudTeamMain .tmMineBig {
  width: 100%; display: flex; align-items: center; gap: calc(10 * var(--u));
  padding: calc(8 * var(--u)) calc(10 * var(--u));
  border: calc(2 * var(--u)) solid var(--sg-gold-line); border-radius: calc(14 * var(--u));
  background: linear-gradient(rgba(255, 251, 238, 0.95), rgba(250, 230, 186, 0.95));
  box-shadow: 0 calc(2 * var(--u)) 0 rgba(122, 74, 30, 0.35);
  color: var(--sg-ink); text-align: left; cursor: pointer;
}
html[data-ui="v2"] #hudTeamMain .tmMineBig i,
html[data-ui="v2"] #team .tpMineTip i {
  flex: none; width: calc(34 * var(--u)); height: calc(34 * var(--u)); min-width: 18px; min-height: 18px; border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233a220c'%3E%3Ccircle cx='8.5' cy='8' r='3.2'/%3E%3Cpath d='M2.5 19c.6-3.6 3-5.6 6-5.6s5.4 2 6 5.6z'/%3E%3Ccircle cx='16.5' cy='7' r='2.6' opacity='.75'/%3E%3Cpath d='M15.6 12.2c2.9-.2 5.3 1.6 5.9 5.3h-4.6c-.3-2.1-.8-3.8-1.3-5.3z' opacity='.75'/%3E%3C/svg%3E") center / 70% no-repeat,
    radial-gradient(circle at 35% 30%, #fff6c8, var(--sg-gold-hi) 40%, var(--sg-gold) 80%);
  box-shadow: 0 0 0 calc(2 * var(--u)) var(--sg-wood-dk);
}
html[data-ui="v2"] #hudTeamMain .tmMineBig span { min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
html[data-ui="v2"] #hudTeamMain .tmMineBig b { font: 900 var(--fs-s)/1.15 var(--sg-font); }
html[data-ui="v2"] #hudTeamMain .tmMineBig small { color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.25 var(--sg-font); }

/* 邀请面板「我的角色」：一句说明、一行一个角色（头像一圈金边）、最后「建立新角色」虚线大格。 */
html[data-ui="v2"] #team .tpMineTip {
  display: flex; align-items: center; gap: calc(10 * var(--u)); margin: 0;
  padding: calc(8 * var(--u)) calc(12 * var(--u));
  border-radius: calc(12 * var(--u));
  background: linear-gradient(rgba(255, 236, 170, 0.6), rgba(255, 224, 138, 0.35)); box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(224, 166, 64, 0.55);
  color: var(--sg-ink); font: 700 var(--fs-xs)/1.45 var(--sg-font);
}
html[data-ui="v2"] #team .tpMineFace { position: relative; flex: none; border-radius: 50%; box-shadow: 0 0 0 calc(3 * var(--u)) var(--sg-gold), 0 0 0 calc(5 * var(--u)) var(--sg-wood-dk); }
html[data-ui="v2"] #team .tpMineFace canvas { display: block; box-shadow: none; }
html[data-ui="v2"] #team .tpRow.tpMine.s-online,
html[data-ui="v2"] #team .tpRow.tpMine.s-team,
html[data-ui="v2"] #team .tpRow.tpMine.s-battle { opacity: 0.72; }
html[data-ui="v2"] #team .tpRow.tpMine.s-party { background: rgba(232, 246, 222, 0.85); box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(47, 138, 37, 0.4); }
html[data-ui="v2"] #team .tpTag.ok { background: #2f8a25; color: #fff; }
html[data-ui="v2"] #team .tpTag.warm { background: #b07a00; color: #fff3d6; }
html[data-ui="v2"] #team .tpTag.warn { background: var(--sg-bad); color: #fff; }
html[data-ui="v2"] #team .tpGo.busy { background: linear-gradient(110deg, var(--sg-gold) 30%, #fff3c4 50%, var(--sg-gold) 70%) 0 0 / 300% 100%; animation: tpBusy 1s linear infinite; opacity: 1; }
@keyframes tpBusy { to { background-position: -150% 0; } }
html[data-ui="v2"] #team .tpCreate {
  display: flex; align-items: center; gap: calc(12 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  border: calc(3 * var(--u)) dashed rgba(122, 74, 30, 0.45); border-radius: calc(14 * var(--u));
  background: rgba(255, 251, 238, 0.55);
  color: var(--sg-ink); text-align: left; cursor: pointer;
}
html[data-ui="v2"] #team .tpCreate:active { transform: scale(0.985); }
html[data-ui="v2"] #team .tpCreate i {
  flex: none; display: grid; place-items: center;
  width: calc(56 * var(--u)); height: calc(56 * var(--u)); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6c8, var(--sg-gold-hi) 40%, var(--sg-gold) 80%);
  box-shadow: 0 0 0 calc(2 * var(--u)) var(--sg-wood-dk), 0 calc(3 * var(--u)) 0 rgba(30, 16, 4, 0.35);
}
html[data-ui="v2"] #team .tpCreate i::before { content: "+"; color: #4a2a08; font: 900 var(--fs-xl)/1 var(--sg-font); font-style: normal; }
html[data-ui="v2"] #team .tpCreate span { min-width: 0; display: flex; flex-direction: column; gap: calc(3 * var(--u)); }
html[data-ui="v2"] #team .tpCreate b { font: 900 var(--fs-m)/1.15 var(--sg-font); }
html[data-ui="v2"] #team .tpCreate small { color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.3 var(--sg-font); }

/* 队长召集归队：和被邀请同一条横条，左边一枚吹号角的金币，绿色「归队」。 */
html[data-ui="v2"] #teamAsk .taCall { box-shadow: 0 0 0 calc(3 * var(--u)) rgba(80, 200, 60, 0.55), 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, 0.5); }
html[data-ui="v2"] #teamAsk .taHorn {
  flex: none; width: calc(60 * var(--u)); height: calc(60 * var(--u)); border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233a220c'%3E%3Cpath d='M4 10h3l8-5v14l-8-5H4z'/%3E%3Cpath d='M17.5 8.5a5 5 0 0 1 0 7' fill='none' stroke='%233a220c' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M19.8 6a8.5 8.5 0 0 1 0 12' fill='none' stroke='%233a220c' stroke-width='2' stroke-linecap='round' opacity='.6'/%3E%3C/svg%3E") center / 62% no-repeat,
    radial-gradient(circle at 35% 30%, #fff6c8, var(--sg-gold-hi) 40%, var(--sg-gold) 80%);
  box-shadow: 0 0 0 calc(3 * var(--u)) var(--sg-gold), 0 0 0 calc(5 * var(--u)) var(--sg-wood-dk);
  animation: taHorn 1.2s ease-in-out infinite;
}
@keyframes taHorn { 50% { transform: rotate(-8deg) scale(1.05); } }
html[data-ui="v2"] #teamAsk .taCall .sgBtn.gold { background: linear-gradient(#a8ec8e, #3c9a2c); color: #fff; text-shadow: 0 1px 1px #0b3d12; }

/* 寻路自动传送（NAVTP.md，view.js navTpAsk）：传送前 1 秒的横条，和被邀请同一个位置（被邀请横条开着时往下让一条）；
   左边一枚转着的传送阵，底边一条金线 1 秒走完，点「不传送」改走路。 */
html[data-ui="v2"] #navTpAsk { left: 50%; top: calc(var(--topH) + 84 * var(--u)); transform: translateX(-50%); width: calc(600 * var(--u)); }
html[data-ui="v2"] #playHud:has(> #teamAsk:not([hidden])) #navTpAsk { top: calc(var(--topH) + 184 * var(--u)); }
html[data-ui="v2"] #navTpAsk .ntBox {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u));
  animation: taIn 220ms ease-out;
}
html[data-ui="v2"] #navTpAsk .ntIcon {
  flex: none; position: relative; width: calc(52 * var(--u)); height: calc(52 * var(--u)); border-radius: 50%;
  background: conic-gradient(from 0deg, #7fe0ff, #3b6fe8, #b07bff, #7fe0ff);
  box-shadow: 0 0 0 calc(3 * var(--u)) var(--sg-gold), 0 0 0 calc(5 * var(--u)) var(--sg-wood-dk);
  animation: ntSpin 1.1s linear infinite;
}
html[data-ui="v2"] #navTpAsk .ntIcon::after {
  content: ""; position: absolute; inset: 26%; border-radius: 50%;
  background: radial-gradient(circle, #fff, #dff4ff 55%, rgba(223, 244, 255, 0) 72%);
}
@keyframes ntSpin { to { transform: rotate(360deg); } }
html[data-ui="v2"] #navTpAsk .ntText { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
html[data-ui="v2"] #navTpAsk .ntText b { font: 900 var(--fs-m)/1.15 var(--sg-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="v2"] #navTpAsk .ntText span { color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.3 var(--sg-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="v2"] #navTpAsk .sgBtn { flex: none; height: calc(52 * var(--u)); padding: 0 calc(14 * var(--u)); }
html[data-ui="v2"] #navTpAsk .ntBar {
  position: absolute; left: 0; bottom: 0; width: 100%; height: calc(4 * var(--u));
  background: linear-gradient(90deg, var(--sg-gold), var(--sg-gold-hi));
  transform-origin: left center; animation: ntBar var(--d, 1s) linear forwards;
}
@keyframes ntBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
html[data-ui="v2"] #shell.battling #navTpAsk { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  html[data-ui="v2"] #navTpAsk .ntIcon { animation: none; }
}

/* 切换操作的角色：屏幕中间新角色的头像（金圈扫一圈）、名字木牌，1.5 秒淡出。不挡点击。 */
html[data-ui="v2"] #altSwap {
  position: absolute; z-index: 9; left: 50%; top: 36%;
  display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u));
  transform: translate(-50%, -50%); opacity: 0; visibility: hidden; pointer-events: none;
}
html[data-ui="v2"] #altSwap.on { visibility: visible; animation: altSwapIn 1.5s cubic-bezier(0.2, 0.9, 0.25, 1) both; }
html[data-ui="v2"] #altSwap .asRing {
  position: relative; width: calc(112 * var(--u)); height: calc(112 * var(--u)); min-width: 64px; min-height: 64px; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #fffdf5, #f6e2b0 62%, #ddb469);
  box-shadow: 0 0 0 calc(4 * var(--u)) var(--sg-gold), 0 0 0 calc(7 * var(--u)) var(--sg-wood-dk), 0 0 calc(40 * var(--u)) rgba(255, 210, 90, 0.75);
}
html[data-ui="v2"] #altSwap .asRing canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
html[data-ui="v2"] #altSwap .asRing i {
  position: absolute; z-index: 1; inset: calc(-12 * var(--u)); border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 60%, rgba(255, 236, 160, 0.2) 70%, #ffe9a0 90%, #fffbe8 97%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6 * var(--u)), #000 calc(100% - 5 * var(--u)));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6 * var(--u)), #000 calc(100% - 5 * var(--u)));
  animation: battleAutoSpin 0.7s linear 2;
}
html[data-ui="v2"] #altSwap b {
  padding: calc(6 * var(--u)) calc(18 * var(--u)); border-radius: calc(12 * var(--u));
  background: var(--wood-bar); box-shadow: 0 0 0 calc(2 * var(--u)) var(--sg-gold-line), 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.45);
  color: #ffe08a; font: 900 var(--fs-l)/1.1 var(--sg-font); letter-spacing: 0.06em; text-shadow: 0 2px 0 #2a1606;
}
html[data-ui="v2"] #altSwap small { color: #fff3d6; font: 800 var(--fs-xs)/1.2 var(--sg-font); text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, 0.6); }
@keyframes altSwapIn {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.55); }
  16% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  28% { transform: translate(-50%, -50%) scale(1); }
  78% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 14 * var(--u))) scale(0.98); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-ui="v2"] #altSwap.on { animation-duration: 0.01s; }
  html[data-ui="v2"] #hudTeamMain .tmFace.swap::after, html[data-ui="v2"] #hudTeamMain .tmLag, html[data-ui="v2"] #teamAsk .taHorn { animation: none; }
}
/* 离线托管（view.js）：站太久没动被请下线（[重新上线]）、托管报告（[知道了]）。整页压暗，中间一张纸卡，盖在面板和战斗上面。 */
html[data-ui="v2"] #hostCard:not([hidden]) {
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--topH) + 16 * var(--u)) calc(40 * var(--u)) calc(var(--botH) + 16 * var(--u));
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.5);
}
html[data-ui="v2"] #hostCard .hcBox { width: 100%; max-width: calc(560 * var(--u)); padding: calc(4 * var(--u)) calc(4 * var(--u)) calc(20 * var(--u)); animation: taIn 220ms ease-out; }
html[data-ui="v2"] #hostCard .hcBody { padding: calc(10 * var(--u)) calc(22 * var(--u)) 0; }
html[data-ui="v2"] #hostCard .hcText { margin: calc(10 * var(--u)) 0; font: 900 var(--fs-m)/1.45 var(--sg-font); }
html[data-ui="v2"] #hostCard .sgRow b { min-width: 0; font: 900 var(--fs-m)/1.3 var(--sg-font); text-align: right; word-break: break-all; }
html[data-ui="v2"] #hostCard .hcNote { margin: calc(12 * var(--u)) 0 0; color: var(--sg-ink-soft); font: 700 var(--fs-s)/1.5 var(--sg-font); }
html[data-ui="v2"] #hostCard .hcActs { display: flex; justify-content: center; margin-top: calc(20 * var(--u)); }
html[data-ui="v2"] #hostCard .hcActs .sgBtn { height: calc(60 * var(--u)); min-width: calc(220 * var(--u)); }
/* 出发前选好（view.js renderPlanSheet，QUESTSYS 4.9）：整页压暗、居中一张卡。顶上路线条（一环一颗，金色要你选、红色挑战），
   中间每处要选的一组方案卡（选中金边）、任选一照对话框那一排格子；底下「以后再选」「按这个出发」。卡里只放文字和 img（图标画一次存成网址）。 */
html[data-ui="v2"] #planSheet:not([hidden]) {
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--topH) + 12 * var(--u)) calc(20 * var(--u)) calc(var(--botH) + 12 * var(--u));
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.5);
}
html[data-ui="v2"] #planSheet .plBox {
  display: flex; flex-direction: column; box-sizing: border-box;
  width: 100%; max-width: calc(640 * var(--u)); max-height: 100%;
  padding: calc(4 * var(--u)) calc(4 * var(--u)) calc(16 * var(--u));
  animation: taIn 220ms ease-out;
}
html[data-ui="v2"] #planSheet .plWaitText { margin: 0; padding: calc(40 * var(--u)) calc(24 * var(--u)); text-align: center; font: 700 var(--fs-s)/1.5 var(--sg-font); color: var(--sg-ink-soft); }
html[data-ui="v2"] #planSheet .sgHead .plName { flex: 1; min-width: 0; color: var(--sg-ink-soft); font: 700 var(--fs-s)/1.2 var(--sg-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="v2"] #planSheet .plRoute {
  display: flex; flex-wrap: wrap; align-items: center; gap: calc(8 * var(--u));
  margin: calc(12 * var(--u)) calc(18 * var(--u)) 0;
}
html[data-ui="v2"] #planSheet .plStep {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-width: calc(40 * var(--u)); height: calc(40 * var(--u)); padding: 0 calc(6 * var(--u));
  border: calc(2 * var(--u)) solid var(--sg-wood-lt); border-radius: 999px;
  background: var(--sg-paper-in); color: var(--sg-ink-soft); font: 900 var(--fs-xs)/1 var(--sg-font);
}
html[data-ui="v2"] #planSheet .plStep.k-choose { border-color: var(--sg-gold-line); background: linear-gradient(var(--sg-gold-hi), var(--sg-gold)); color: var(--sg-wood-dk); box-shadow: 0 0 calc(8 * var(--u)) rgba(255, 215, 94, 0.8); }
html[data-ui="v2"] #planSheet .plStep.k-battle { border-color: #c05a3e; color: var(--sg-bad); }
html[data-ui="v2"] #planSheet .plLegend { margin: calc(6 * var(--u)) calc(18 * var(--u)) 0; color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.4 var(--sg-font); }
html[data-ui="v2"] #planSheet .plBody { flex: 1 1 auto; min-height: 0; overflow: auto; margin-top: calc(10 * var(--u)); padding: 0 calc(16 * var(--u)); }
html[data-ui="v2"] #planSheet .plPoint {
  margin: 0 0 calc(12 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
  border: calc(2 * var(--u)) solid var(--sg-wood-lt); border-radius: calc(12 * var(--u));
  background: rgba(255, 243, 214, 0.65);
}
html[data-ui="v2"] #planSheet .plPoint.done { border-color: var(--sg-ok); }
html[data-ui="v2"] #planSheet .plPtHead { display: flex; align-items: baseline; gap: calc(10 * var(--u)); margin-bottom: calc(8 * var(--u)); }
html[data-ui="v2"] #planSheet .plPtHead b { flex: none; color: var(--sg-wood); font: 900 var(--fs-s)/1.3 var(--sg-font); }
html[data-ui="v2"] #planSheet .plPtHead span { min-width: 0; color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.4 var(--sg-font); }
html[data-ui="v2"] #planSheet .plOuts { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(180 * var(--u)), 1fr)); gap: calc(10 * var(--u)); }
html[data-ui="v2"] #planSheet .plOut {
  display: flex; flex-direction: column; align-items: flex-start; gap: calc(4 * var(--u));
  box-sizing: border-box; min-height: calc(96 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u));
  border: calc(3 * var(--u)) solid var(--sg-wood-lt); border-radius: calc(10 * var(--u));
  background: linear-gradient(var(--sg-paper-hi), var(--sg-paper)); color: var(--sg-ink); text-align: left;
  box-shadow: 0 calc(3 * var(--u)) 0 rgba(58, 34, 12, 0.35);
}
html[data-ui="v2"] #planSheet .plOut:active { transform: translateY(calc(2 * var(--u))); box-shadow: none; }
html[data-ui="v2"] #planSheet .plOut.on { border-color: #fff; box-shadow: 0 0 0 calc(4 * var(--u)) var(--sg-gold), 0 0 calc(14 * var(--u)) rgba(255, 215, 94, 0.9); }
html[data-ui="v2"] #planSheet .plOut.locked { opacity: 0.55; filter: grayscale(0.6); }
/* 没选时托管默认走的那个：虚线框、一行小字（不替玩家选上）。 */
html[data-ui="v2"] #planSheet .plOut.def { border-style: dashed; }
html[data-ui="v2"] #planSheet .plDef { color: var(--sg-warn); font: 700 var(--fs-xs)/1.3 var(--sg-font); }
html[data-ui="v2"] #planSheet .plOutName { font: 900 var(--fs-s)/1.25 var(--sg-font); }
html[data-ui="v2"] #planSheet .plWho, html[data-ui="v2"] #planSheet .plTier { color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.3 var(--sg-font); }
html[data-ui="v2"] #planSheet .plTier { color: var(--sg-ok); }
html[data-ui="v2"] #planSheet .plLock { color: var(--sg-bad); font: 700 var(--fs-xs)/1.3 var(--sg-font); }
html[data-ui="v2"] #planSheet .plRew { display: flex; flex-wrap: wrap; align-items: center; gap: calc(6 * var(--u)); margin-top: calc(2 * var(--u)); }
html[data-ui="v2"] #planSheet .plRewTile {
  position: relative; box-sizing: border-box; width: calc(40 * var(--u)); height: calc(40 * var(--u));
  border: calc(2 * var(--u)) solid var(--sg-gold-line); border-radius: calc(6 * var(--u)); background: var(--sg-paper-in);
}
html[data-ui="v2"] #planSheet .plRewTile.k-pet { border-color: #5b9bd5; }
html[data-ui="v2"] #planSheet .plRewTile img, html[data-ui="v2"] #planSheet .wnPickArt img { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
html[data-ui="v2"] #planSheet .plPickHead { margin: calc(10 * var(--u)) 0 calc(6 * var(--u)); color: var(--sg-wood); font: 900 var(--fs-xs)/1.3 var(--sg-font); }
html[data-ui="v2"] #planSheet .plPicks { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); }
html[data-ui="v2"] #planSheet .plPickInfo { margin: calc(8 * var(--u)) 0 0; color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.45 var(--sg-font); }
html[data-ui="v2"] #planSheet .plEmpty { margin: calc(20 * var(--u)) 0; text-align: center; color: var(--sg-ink-soft); font: 700 var(--fs-s)/1.5 var(--sg-font); }
html[data-ui="v2"] #planSheet .plSolo {
  display: flex; align-items: center; gap: calc(10 * var(--u));
  margin: calc(10 * var(--u)) calc(18 * var(--u)) 0; padding: 0; border: 0; background: none;
  color: var(--sg-ink); font: 900 var(--fs-s)/1.3 var(--sg-font); text-align: left;
}
html[data-ui="v2"] #planSheet .plSolo i {
  position: relative; flex: none; width: calc(56 * var(--u)); height: calc(32 * var(--u));
  border-radius: 999px; background: #b9a487; transition: background 160ms;
}
html[data-ui="v2"] #planSheet .plSolo i::after {
  content: ""; position: absolute; left: calc(4 * var(--u)); top: calc(4 * var(--u));
  width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); transition: transform 160ms;
}
html[data-ui="v2"] #planSheet .plSolo.on i { background: var(--sg-ok); }
html[data-ui="v2"] #planSheet .plSolo.on i::after { transform: translateX(calc(24 * var(--u))); }
html[data-ui="v2"] #planSheet .plTeam { margin: calc(8 * var(--u)) calc(18 * var(--u)) 0; color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.45 var(--sg-font); }
html[data-ui="v2"] #planSheet .plActs { display: flex; gap: calc(12 * var(--u)); margin: calc(14 * var(--u)) calc(18 * var(--u)) 0; }
html[data-ui="v2"] #planSheet .plActs .sgBtn { flex: 1 1 0; min-width: 0; height: calc(64 * var(--u)); font: 900 var(--fs-m)/1 var(--sg-font); white-space: nowrap; }
/* 奖励说明框：点奖励格子弹在任务栏上面，再点同一格、点框或点别处收起。属性按原版说明拆成小块，加绿减红。 */
html[data-ui="v2"] #questTip {
  left: calc(8 * var(--u)); bottom: calc(100% + 12 * var(--u));
  box-sizing: border-box;
  width: calc(440 * var(--u)); max-height: calc(460 * var(--u)); overflow: auto;
  padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));
  border: var(--bw) solid var(--sg-wood);
  border-radius: var(--r);
  background: var(--paper-bg);
  box-shadow: 0 0 0 calc(2 * var(--u)) var(--sg-gold-line), 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, 0.5);
  color: var(--sg-ink);
}
html[data-ui="v2"] .qtHead { display: flex; align-items: center; gap: calc(12 * var(--u)); }
html[data-ui="v2"] .qtArt {
  position: relative; flex: none;
  width: calc(96 * var(--u)); height: calc(96 * var(--u));
  border: calc(3 * var(--u)) solid var(--sg-gold-line);
  border-radius: calc(14 * var(--u));
  background: radial-gradient(circle at 50% 38%, #fffdf5, #f6e2b0 62%, #ddb469);
}
html[data-ui="v2"] .qtArt.pet { border-color: #5b9bd5; background: radial-gradient(circle at 50% 38%, #f7fbff, #d4e7f7 62%, #9fc3e3); }
html[data-ui="v2"] .qtArt canvas, html[data-ui="v2"] .qtArt img.rwArt { position: absolute; left: 8%; top: 6%; width: 84%; height: 84%; }
html[data-ui="v2"] .qtNames { min-width: 0; display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
html[data-ui="v2"] .qtName { font: 900 var(--fs-m)/1.2 var(--sg-font); }
html[data-ui="v2"] .qtMeta { color: var(--sg-ink-soft); font: 800 var(--fs-xs)/1.3 var(--sg-font); }
html[data-ui="v2"] .qtBody {
  display: flex; flex-direction: column; gap: calc(8 * var(--u));
  margin-top: calc(10 * var(--u)); padding-top: calc(10 * var(--u));
  border-top: calc(2 * var(--u)) dashed rgba(122, 74, 30, 0.35);
  font: 700 var(--fs-xs)/1.45 var(--sg-font);
}
html[data-ui="v2"] .qtAttrs { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); }
html[data-ui="v2"] .qtAttr { padding: calc(5 * var(--u)) calc(10 * var(--u)); border-radius: 999px; background: rgba(47, 122, 37, 0.14); color: #2f7a25; font: 900 var(--fs-xs)/1 var(--sg-font); }
html[data-ui="v2"] .qtAttr.dn { background: rgba(192, 40, 30, 0.12); color: #c0281e; }
html[data-ui="v2"] .qtLine, html[data-ui="v2"] .qtHint { margin: 0; }
html[data-ui="v2"] .qtHint { color: var(--sg-ink-soft); }
html[data-ui="v2"] .qtElem { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: calc(4 * var(--u)) calc(8 * var(--u)); }
html[data-ui="v2"] .qtElem i { height: calc(12 * var(--u)); border-radius: 999px; background: rgba(74, 44, 18, 0.15); overflow: hidden; }
html[data-ui="v2"] .qtElem i b { display: block; height: 100%; border-radius: inherit; background: var(--c); }
html[data-ui="v2"] #headInfo {
  top: calc(var(--topH) + (100cqh - var(--topH) - var(--botH)) * 0.32);
}
html[data-ui="v2"] .playLoot {
  background: var(--sg-night);
  border: calc(2 * var(--u)) solid var(--sg-gold-line);
  border-radius: 999px;
  padding: calc(8 * var(--u)) calc(22 * var(--u));
  font: 700 var(--fs-m)/1.1 var(--sg-font);
}
/* 长的提示（任务没跟上的原因这类）在条里折成两行，不伸出屏幕。 */
html[data-ui="v2"] .playLoot.plain { white-space: normal; line-height: 1.3; text-align: center; border-radius: calc(20 * var(--u)); }
/* 地图名横幅（问题 11，POLISH.md 3.7）：切图挤开后出 2 秒，在头顶那一列的最上面（提示行上面），几行提示都不叠。
   深色带子两头渐隐，上下各一道渐隐金线，名字两边一颗金菱；展开照原版小窗十步撑开，最后 0.4 秒淡出。 */
html[data-ui="v2"] #fieldInfo {
  max-width: 100%;
  transition: opacity 400ms ease-in;
}
html[data-ui="v2"] #fieldInfo.fade { opacity: 0; }
html[data-ui="v2"] #playHud:has(> #bag:not([hidden]), > #role:not([hidden]), > #pet:not([hidden]), > #forge:not([hidden]), > #mail:not([hidden]),
  > #family:not([hidden]), > #setting:not([hidden]), > #team:not([hidden]), > #nav:not([hidden]), > #friend:not([hidden]), > #train:not([hidden]), > #gm:not([hidden])) #fieldInfo { visibility: hidden; }
html[data-ui="v2"] #fieldInfoBox {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: auto; aspect-ratio: auto;
  padding: calc(14 * var(--u)) calc(70 * var(--u)) calc(16 * var(--u));
  background: linear-gradient(90deg, rgba(24, 14, 6, 0), rgba(24, 14, 6, 0.88) 20%, rgba(24, 14, 6, 0.92) 50%, rgba(24, 14, 6, 0.88) 80%, rgba(24, 14, 6, 0));
  border: 0;
  color: #fff3d0;
  font: 900 calc(var(--fs-xl) * 1.05)/1.2 var(--sg-font); letter-spacing: 0.06em;
  white-space: nowrap;
  text-shadow: 0 calc(2 * var(--u)) 0 #000, 0 0 calc(14 * var(--u)) rgba(255, 196, 90, 0.45);
}
html[data-ui="v2"] #fieldInfoBox::before, html[data-ui="v2"] #fieldInfoBox::after {
  content: ""; position: absolute; left: 8%; right: 8%; height: calc(2 * var(--u));
  background: linear-gradient(90deg, transparent, var(--sg-gold-hi) 24%, #fff3c4 50%, var(--sg-gold-hi) 76%, transparent);
}
html[data-ui="v2"] #fieldInfoBox::before { top: 0; }
html[data-ui="v2"] #fieldInfoBox::after { bottom: 0; }
html[data-ui="v2"] #fieldInfoName { position: relative; display: flex; align-items: center; gap: calc(16 * var(--u)); }
html[data-ui="v2"] #fieldInfoName::before, html[data-ui="v2"] #fieldInfoName::after {
  content: ""; flex: none; width: calc(12 * var(--u)); height: calc(12 * var(--u));
  background: linear-gradient(135deg, #fff3c4, var(--sg-gold) 60%, #a86a10);
  transform: rotate(45deg);
  box-shadow: 0 0 calc(6 * var(--u)) rgba(255, 200, 80, 0.8);
}

/* ---------- 弹窗：数量（背包「使用」「丢弃」共用，view.js showQtyAsk）：纸卡、木纹标题条、金边；
   道具格 + 名字持有数，圆加减钮夹着能直接输入的数，下面一根金条拖着选，按钮一行：取消 / 使用几个 / 全部使用。
   丢弃时确定钮是红的、没有「全部」。 ---------- */
html[data-ui="v2"] #qtyBox {
  box-sizing: border-box;
  width: calc(580 * var(--u));
  background: var(--paper-bg);
  border: var(--bw) solid var(--sg-wood);
  border-radius: var(--r);
  box-shadow: 0 0 0 calc(3 * var(--u)) var(--sg-gold-line), 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, 0.55);
  color: var(--sg-ink);
  font: 700 var(--fs-m)/1.35 var(--sg-font);
  overflow: hidden;
  animation: qtyIn 160ms ease-out;
}
@keyframes qtyIn {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: none; opacity: 1; }
}
html[data-ui="v2"] #qtyHead {
  padding: calc(12 * var(--u)) calc(20 * var(--u));
  background: var(--wood-bar);
  box-shadow: inset 0 calc(-3 * var(--u)) 0 var(--sg-wood-dk);
  color: var(--sg-paper-hi);
  font: 900 var(--fs-l)/1.2 var(--sg-font);
  letter-spacing: 0.12em;
  text-align: center;
  text-shadow: 0 1px 0 #2a1606;
}
html[data-ui="v2"] #qtyItem {
  display: flex; align-items: center; gap: calc(18 * var(--u));
  padding: calc(20 * var(--u)) calc(28 * var(--u)) calc(6 * var(--u));
}
html[data-ui="v2"] #qtySlot {
  flex: none;
  box-sizing: border-box;
  width: calc(104 * var(--u)); height: calc(104 * var(--u));
  display: flex; align-items: center; justify-content: center;
  border: calc(3 * var(--u)) solid var(--sg-wood);
  border-radius: calc(14 * var(--u));
  background: radial-gradient(circle at 50% 38%, var(--sg-paper-in), var(--sg-paper-lo));
  box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(255, 255, 255, 0.55), 0 calc(3 * var(--u)) 0 rgba(58, 34, 12, 0.35);
}
html[data-ui="v2"] #qtyIcon { width: 88%; height: 88%; image-rendering: pixelated; }
html[data-ui="v2"] #qtyText { min-width: 0; display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
html[data-ui="v2"] #qtyName { font: 900 var(--fs-l)/1.2 var(--sg-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="v2"] #qtyHave { color: var(--sg-ink-soft); font: 800 var(--fs-s)/1.2 var(--sg-font); font-style: normal; }
html[data-ui="v2"] #qtyRow {
  display: flex; align-items: center; justify-content: center; gap: calc(20 * var(--u));
  padding: calc(16 * var(--u)) calc(28 * var(--u)) calc(4 * var(--u));
}
html[data-ui="v2"] #qtyMinus, html[data-ui="v2"] #qtyPlus {
  box-sizing: border-box;
  width: calc(68 * var(--u)); height: calc(68 * var(--u)); padding: 0 0 calc(4 * var(--u));
  border: calc(3 * var(--u)) solid var(--sg-wood);
  border-radius: 50%;
  background: linear-gradient(var(--sg-paper-hi), var(--sg-paper-lo));
  box-shadow: inset 0 calc(2 * var(--u)) 0 rgba(255, 255, 255, 0.6), 0 calc(3 * var(--u)) 0 rgba(58, 34, 12, 0.55);
  color: var(--sg-wood);
  font: 900 calc(46 * var(--u))/1 var(--sg-font);
  cursor: pointer;
}
html[data-ui="v2"] #qtyMinus:active, html[data-ui="v2"] #qtyPlus:active {
  transform: translateY(calc(2 * var(--u)));
  box-shadow: inset 0 calc(2 * var(--u)) 0 rgba(255, 255, 255, 0.6), 0 1px 0 rgba(58, 34, 12, 0.55);
}
html[data-ui="v2"] #qtyMinus:disabled, html[data-ui="v2"] #qtyPlus:disabled { opacity: 0.4; cursor: default; transform: none; }
html[data-ui="v2"] #qtyN {
  -moz-appearance: textfield; appearance: textfield;
  box-sizing: border-box;
  width: calc(200 * var(--u)); height: calc(72 * var(--u));
  padding: 0 calc(8 * var(--u));
  border: calc(3 * var(--u)) solid var(--sg-wood);
  border-radius: calc(14 * var(--u));
  background: var(--sg-paper-in);
  box-shadow: inset 0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(58, 34, 12, 0.28);
  color: var(--sg-ink);
  font: 900 var(--fs-xl)/1 var(--sg-font);
  text-align: center;
  outline: none;
}
html[data-ui="v2"] #qtyN:focus {
  border-color: var(--sg-gold);
  box-shadow: 0 0 0 calc(3 * var(--u)) rgba(230, 168, 23, 0.45), inset 0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(58, 34, 12, 0.28);
}
html[data-ui="v2"] #qtyN::-webkit-inner-spin-button, html[data-ui="v2"] #qtyN::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
html[data-ui="v2"] #qtySlide { padding: calc(10 * var(--u)) calc(36 * var(--u)) 0; }
html[data-ui="v2"] #qtyBar {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: calc(46 * var(--u));
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: none;
}
html[data-ui="v2"] #qtyBar:focus { outline: none; }
html[data-ui="v2"] #qtyBar::-webkit-slider-runnable-track {
  height: calc(16 * var(--u));
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sg-gold-hi), var(--sg-gold) var(--p, 0%), var(--sg-paper-in) var(--p, 0%));
  box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--sg-wood), inset 0 calc(3 * var(--u)) calc(4 * var(--u)) rgba(58, 34, 12, 0.3);
}
html[data-ui="v2"] #qtyBar::-moz-range-track {
  height: calc(16 * var(--u));
  border: calc(2 * var(--u)) solid var(--sg-wood);
  border-radius: 999px;
  background: var(--sg-paper-in);
}
html[data-ui="v2"] #qtyBar::-moz-range-progress {
  height: calc(16 * var(--u));
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sg-gold-hi), var(--sg-gold));
}
html[data-ui="v2"] #qtyBar::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  box-sizing: border-box;
  width: calc(46 * var(--u)); height: calc(46 * var(--u));
  margin-top: calc(-15 * var(--u));
  border: calc(3 * var(--u)) solid var(--sg-wood-dk);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fffbe6 0 16%, var(--sg-gold-hi) 42%, var(--sg-gold) 100%);
  box-shadow: 0 calc(3 * var(--u)) 0 rgba(58, 34, 12, 0.55);
}
html[data-ui="v2"] #qtyBar::-moz-range-thumb {
  box-sizing: border-box;
  width: calc(46 * var(--u)); height: calc(46 * var(--u));
  border: calc(3 * var(--u)) solid var(--sg-wood-dk);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fffbe6 0 16%, var(--sg-gold-hi) 42%, var(--sg-gold) 100%);
  box-shadow: 0 calc(3 * var(--u)) 0 rgba(58, 34, 12, 0.55);
}
html[data-ui="v2"] #qtyEnds {
  display: flex; justify-content: space-between;
  padding: 0 calc(6 * var(--u));
  color: var(--sg-ink-soft);
  font: 800 var(--fs-xs)/1 var(--sg-font);
}
html[data-ui="v2"] #qtyActs { display: flex; gap: calc(12 * var(--u)); padding: calc(20 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u)); }
html[data-ui="v2"] #qtyActs .sgBtn { flex: 1 1 0; min-width: 0; height: calc(70 * var(--u)); padding: 0 calc(8 * var(--u)); white-space: nowrap; }
html[data-ui="v2"] #qtyOk { flex-grow: 1.35; }
html[data-ui="v2"] #qtyAll {
  border-color: var(--sg-wood-dk);
  background: var(--wood-bar);
  color: var(--sg-paper-hi);
  text-shadow: 0 1px 0 #2a1606;
}
html[data-ui="v2"] #qtyAll[hidden] { display: none; }
html[data-ui="v2"] #qtyBox[data-mode="drop"] #qtyOk {
  background: linear-gradient(#f39a7f, var(--sg-bad));
  color: #fff;
  text-shadow: 0 1px 0 #5e0f09;
}

/* ---------- 锻造（forge.js 搭，底部导航「锻造」）：分页 强化 / 打孔 / 镶嵌 / 宝石合成，下面一排装备卡（宝石合成页不出）、
   锻造台 #forgeStage（装备、宝石摆在炉火上，按下去的特效在这里放）、这件现在的加成 #forgeSpeed、分页内容 #forgeBody。
   特效画布 #forgeFx、大字章 #forgeFlash、飘字 .fFloat 盖在整张纸上（.v2Sheet 定位）。 ---------- */
html[data-ui="v2"] #forge .v2Sheet { position: relative; }
html[data-ui="v2"] #forge .v2Body { position: relative; }
/* 页签（问题 8）：标题条下面一条深木槽，四张签站在槽里；没选中的是凹下去的深木色，选中的是纸色、顶上一道金边、
   往下盖住槽底的金线，和下面的纸连成一片。页签在滚动区外面，内容怎么滚都在上面。签高、字号照全面板统一的 52u / --fs-s。
   合成页的宝石数是签右上角一枚小牌，不占签里的宽。 */
html[data-ui="v2"] #forgeHead.fTabs {
  position: relative; z-index: 2; flex: none;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: calc(6 * var(--u));
  height: auto;
  padding: calc(9 * var(--u)) calc(12 * var(--u)) 0;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 calc(3 * var(--u)), transparent calc(3 * var(--u)) calc(13 * var(--u))),
    linear-gradient(#4f2f12, #2f1b08);
  border-bottom: calc(3 * var(--u)) solid var(--sg-gold-line);
  box-shadow: inset 0 calc(4 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.45);
}
html[data-ui="v2"] #forgeHead.fTabs button {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--u));
  height: calc(52 * var(--u)); min-width: 0;
  margin-bottom: calc(-3 * var(--u));
  padding: 0 calc(6 * var(--u));
  border: calc(2 * var(--u)) solid #1f1107; border-bottom: 0;
  border-radius: calc(14 * var(--u)) calc(14 * var(--u)) 0 0;
  background: linear-gradient(#7f5028, #5e3a19 62%, #4a2c10);
  box-shadow: inset 0 calc(2 * var(--u)) 0 rgba(255, 222, 165, 0.2), inset 0 calc(-8 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.32);
  color: #e9cf9c; font: 800 var(--fs-s)/1 var(--sg-font);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
  transition: color 160ms linear, filter 160ms linear;
}
html[data-ui="v2"] #forgeHead.fTabs button:hover:not(.on) { filter: brightness(1.14); }
html[data-ui="v2"] #forgeHead.fTabs button:active:not(.on) { filter: brightness(0.92); }
html[data-ui="v2"] #forgeHead.fTabs button > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="v2"] #forgeHead.fTabs .ftIco { flex: none; display: block; width: calc(30 * var(--u)); height: calc(30 * var(--u)); filter: saturate(0.35) brightness(0.86); transition: filter 160ms linear, transform 160ms ease-out; }
html[data-ui="v2"] #forgeHead.fTabs .ftIco svg { display: block; width: 100%; height: 100%; }
html[data-ui="v2"] #forgeHead.fTabs button.on {
  z-index: 1;
  border-color: var(--sg-wood-dk);
  background: linear-gradient(#fff7e2, #fbe8bd 70%, #f9e4b4);
  box-shadow: inset 0 calc(3 * var(--u)) 0 var(--sg-gold), 0 calc(-2 * var(--u)) calc(12 * var(--u)) rgba(255, 196, 90, 0.38);
  color: var(--sg-ink); text-shadow: none; font-weight: 900;
}
html[data-ui="v2"] #forgeHead.fTabs button.on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(-4 * var(--u)); height: calc(5 * var(--u));
  background: #f9e4b4;
}
html[data-ui="v2"] #forgeHead.fTabs button.on .ftIco { filter: drop-shadow(0 calc(2 * var(--u)) calc(2 * var(--u)) rgba(90, 50, 10, 0.4)); transform: scale(1.08); }
html[data-ui="v2"] #forgeHead.fTabs button em {
  position: absolute; top: calc(-8 * var(--u)); right: calc(-4 * var(--u)); z-index: 2;
  margin: 0; min-width: calc(30 * var(--u)); padding: 0 calc(6 * var(--u)); box-sizing: border-box;
  border: calc(2 * var(--u)) solid #1f1107; border-radius: 999px;
  background: #b5430f; color: #fff; opacity: 1;
  font: 900 var(--fs-xs)/calc(24 * var(--u)) var(--sg-font); font-style: normal; text-align: center; text-shadow: none;
}
html[data-ui="v2"] #forgeHead.fTabs button em:empty { display: none; }
html[data-ui="v2"] #forgeFx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; }
html[data-ui="v2"] #forge .fIcon { display: block; width: calc(56 * var(--u)); height: calc(56 * var(--u)); image-rendering: pixelated; object-fit: contain; }
html[data-ui="v2"] #forge i.fIcon.wait { border-radius: 50%; background: rgba(122, 74, 30, 0.15); }
html[data-ui="v2"] #forge .fNone { margin: calc(10 * var(--u)) 0; text-align: center; color: var(--sg-ink-soft); font: 700 var(--fs-s)/1.5 var(--sg-font); }
html[data-ui="v2"] #forge button:disabled { cursor: default; }
html[data-ui="v2"] #forgeGear {
  flex: none;
  display: flex; gap: calc(10 * var(--u));
  overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain; touch-action: pan-x;
  padding: calc(6 * var(--u)) calc(4 * var(--u)) calc(14 * var(--u));
}
html[data-ui="v2"] #forgeGear[hidden] { display: none; }
html[data-ui="v2"] #forge .fGear {
  position: relative; flex: 0 0 calc(132 * var(--u));
  display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--u));
  padding: calc(8 * var(--u)) calc(4 * var(--u)) calc(8 * var(--u));
  box-sizing: border-box;
  border: calc(3 * var(--u)) solid rgba(167, 122, 69, 0.7);
  border-radius: calc(12 * var(--u));
  background: radial-gradient(ellipse at 50% 30%, #fffaf0, #f0d9ab 70%);
  color: var(--sg-ink);
  cursor: pointer;
  transition: transform 160ms ease-out;
}
html[data-ui="v2"] #forge .fGear.on {
  border-color: #c98a10;
  box-shadow: 0 0 0 calc(3 * var(--u)) #ffcf5a, 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(201, 138, 16, 0.45);
  transform: translateY(calc(-2 * var(--u)));
}
html[data-ui="v2"] #forge .fgArt { position: relative; display: block; width: calc(72 * var(--u)); height: calc(72 * var(--u)); }
html[data-ui="v2"] #forge .fgArt .fIcon { width: 100%; height: 100%; }
html[data-ui="v2"] #forge .fgPlus {
  position: absolute; right: calc(-14 * var(--u)); top: calc(-8 * var(--u));
  padding: 0 calc(7 * var(--u)); border-radius: 999px;
  background: #8a7a66; color: #fff; font: 900 var(--fs-xs)/1.4 var(--sg-font); font-style: normal;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
html[data-ui="v2"] #forge .fGear.t2 .fgPlus { background: #2f78d0; }
html[data-ui="v2"] #forge .fGear.t3 .fgPlus { background: #8a3ad0; }
html[data-ui="v2"] #forge .fGear.t4 .fgPlus { background: linear-gradient(#ffcf4a, #e07a10); box-shadow: 0 0 calc(8 * var(--u)) #ffb84a; }
html[data-ui="v2"] #forge .fsName { max-width: 100%; font: 900 var(--fs-xs)/1.2 var(--sg-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="v2"] #forge .fsSpd { color: var(--sg-ok); font: 700 var(--fs-xs)/1.1 var(--sg-font); }
html[data-ui="v2"] #forge .fsWorn {
  position: absolute; left: calc(4 * var(--u)); top: calc(4 * var(--u));
  padding: calc(2 * var(--u)) calc(6 * var(--u));
  border-radius: 999px;
  background: var(--sg-wood); color: #fff3c8;
  font: 800 var(--fs-xs)/1.1 var(--sg-font); font-style: normal;
}
html[data-ui="v2"] #forge .fgDots { display: flex; gap: calc(5 * var(--u)); margin-top: calc(2 * var(--u)); }
html[data-ui="v2"] #forge .fgDots i {
  width: calc(11 * var(--u)); height: calc(11 * var(--u)); border-radius: 50%;
  border: calc(2 * var(--u)) dashed rgba(122, 74, 30, 0.45);
}
html[data-ui="v2"] #forge .fgDots i.open { border-style: solid; border-color: #5a3d22; background: #2a1606; }
html[data-ui="v2"] #forge .fgDots i.gem { border-style: solid; border-color: #2a8aa8; background: radial-gradient(#bff4ff, #2a8aa8); }
html[data-ui="v2"] #forge .fgDots i.gone {
  border-style: solid; border-color: #8a2a1a;
  background: linear-gradient(45deg, transparent 42%, #d2412a 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, #d2412a 42% 58%, transparent 58%), #2a0e08;
}
/* 锻造台：炉膛的暗红底、背后一圈光（强化等级越高光越亮：蓝、紫、金）、装备大图和强化牌、名字。 */
html[data-ui="v2"] #forgeStage { flex: none; }
html[data-ui="v2"] #forgeStage:empty { display: none; }
html[data-ui="v2"] #forge .fsPit {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(12 * var(--u));
  min-height: calc(300 * var(--u));
  padding: calc(20 * var(--u)) calc(12 * var(--u)) calc(16 * var(--u));
  box-sizing: border-box;
  border: calc(3 * var(--u)) solid var(--sg-wood-dk); border-radius: calc(18 * var(--u));
  background: radial-gradient(ellipse at 50% 115%, #c2581c 0%, #6a2a0c 26%, #2a1306 58%, #140904 100%);
  box-shadow: inset 0 0 calc(30 * var(--u)) rgba(0, 0, 0, 0.75), 0 calc(3 * var(--u)) 0 rgba(122, 74, 30, 0.35);
  color: #f6e2bc;
}
html[data-ui="v2"] #forge .fsAura {
  position: absolute; left: 50%; top: 42%;
  width: calc(340 * var(--u)); height: calc(340 * var(--u));
  margin: calc(-170 * var(--u)) 0 0 calc(-170 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 205, 120, 0.42), rgba(255, 140, 40, 0.1) 52%, transparent 70%);
  animation: fAura 2.6s ease-in-out infinite;
  pointer-events: none;
}
html[data-ui="v2"] #forge .fsPit.t2 .fsAura { background: radial-gradient(circle, rgba(140, 205, 255, 0.5), rgba(60, 130, 255, 0.12) 52%, transparent 70%); }
html[data-ui="v2"] #forge .fsPit.t3 .fsAura { background: radial-gradient(circle, rgba(220, 160, 255, 0.55), rgba(150, 70, 255, 0.14) 52%, transparent 70%); }
html[data-ui="v2"] #forge .fsPit.t4 .fsAura {
  background: radial-gradient(circle, rgba(255, 226, 120, 0.7), rgba(255, 160, 30, 0.2) 50%, transparent 70%),
    repeating-conic-gradient(rgba(255, 220, 120, 0.22) 0 8deg, transparent 8deg 22deg);
  animation: fAura 2.6s ease-in-out infinite, fSpin 14s linear infinite;
}
@keyframes fAura { 50% { opacity: 0.75; transform: scale(1.08); } }
@keyframes fSpin { to { rotate: 360deg; } }
html[data-ui="v2"] #forge .fsEmber {
  position: absolute; left: 0; right: 0; bottom: 0; height: 45%;
  background: radial-gradient(ellipse at 50% 125%, rgba(255, 120, 30, 0.6), transparent 66%);
  animation: fEmber 1.7s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes fEmber { to { opacity: 0.5; } }
html[data-ui="v2"] #forge .fsItem { position: relative; z-index: 1; width: calc(150 * var(--u)); height: calc(150 * var(--u)); }
html[data-ui="v2"] #forge .fsItem .fIcon.big { width: 100%; height: 100%; filter: drop-shadow(0 calc(8 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.7)); }
html[data-ui="v2"] #forge .fsPlus {
  position: absolute; right: calc(-30 * var(--u)); top: calc(-10 * var(--u));
  color: #fff8e6; font: 900 calc(var(--fs-xl) * 1.2)/1 var(--sg-font);
  -webkit-text-stroke: calc(3 * var(--u)) #2a1606; paint-order: stroke fill;
  text-shadow: 0 0 calc(12 * var(--u)) rgba(255, 255, 255, 0.35);
}
html[data-ui="v2"] #forge .fsPlus.zero { opacity: 0.4; }
html[data-ui="v2"] #forge .fsPit.t2 .fsPlus { color: #9fd6ff; text-shadow: 0 0 calc(14 * var(--u)) rgba(80, 160, 255, 0.8); }
html[data-ui="v2"] #forge .fsPit.t3 .fsPlus { color: #e7b6ff; text-shadow: 0 0 calc(14 * var(--u)) rgba(180, 90, 255, 0.85); }
html[data-ui="v2"] #forge .fsPit.t4 .fsPlus { color: #ffe066; text-shadow: 0 0 calc(16 * var(--u)) rgba(255, 170, 30, 0.95); }
html[data-ui="v2"] #forge .fsPlus.pop { animation: fPlusPop 900ms cubic-bezier(0.2, 1.6, 0.4, 1); }
html[data-ui="v2"] #forge .fsPlus.fall { color: #ff8a7a; animation: fPlusFall 900ms ease-out; }
@keyframes fPlusPop { 0% { transform: scale(0.3); } 45% { transform: scale(1.7); } 100% { transform: none; } }
@keyframes fPlusFall { 0% { transform: translateY(calc(-24 * var(--u))) scale(1.4); } 55% { transform: translateY(calc(8 * var(--u))) scale(0.9); } 100% { transform: none; } }
html[data-ui="v2"] #forge .fsTitle { position: relative; z-index: 1; display: flex; align-items: baseline; justify-content: center; gap: calc(10 * var(--u)); }
html[data-ui="v2"] #forge .fsTitle b { color: #fff1d0; font: 900 var(--fs-l)/1.2 var(--sg-font); text-shadow: 0 2px 0 #000; }
html[data-ui="v2"] #forge .fsTitle em { color: #d8b98a; font: 700 var(--fs-xs)/1 var(--sg-font); font-style: normal; }
/* 按下去：装备被锤两下（压扁、弹回）、光往里收；成：一亮一弹；失败：抖、发灰；掉级掉孔：抖得更狠、泛红。 */
html[data-ui="v2"] #forge .fsPit.charging .fsItem { animation: fCharge 420ms ease-in-out; }
html[data-ui="v2"] #forge .fsPit.charging .fsAura { animation: fAuraHot 420ms ease-in forwards; }
@keyframes fCharge {
  20% { transform: scale(1.08, 0.9) translateY(calc(6 * var(--u))); }
  40% { transform: scale(0.95, 1.07); }
  65% { transform: scale(1.1, 0.88) translateY(calc(7 * var(--u))); }
  85% { transform: scale(0.97, 1.04); }
  100% { transform: none; }
}
@keyframes fAuraHot { to { transform: scale(0.7); opacity: 1; filter: brightness(1.7); } }
html[data-ui="v2"] #forge .fsPit.win { animation: fPitWin 1000ms ease-out; }
html[data-ui="v2"] #forge .fsPit.win .fsItem { animation: fWinPop 760ms cubic-bezier(0.2, 1.5, 0.4, 1); }
@keyframes fPitWin { 0% { box-shadow: inset 0 0 calc(70 * var(--u)) rgba(255, 225, 130, 0.95), 0 0 calc(30 * var(--u)) rgba(255, 200, 80, 0.85); } }
@keyframes fWinPop { 0% { transform: scale(1.3); filter: brightness(2.4); } 100% { transform: none; filter: none; } }
html[data-ui="v2"] #forge .fsPit.lose .fsItem { animation: fLoseShake 560ms ease-out; filter: grayscale(0.7) brightness(0.75); }
html[data-ui="v2"] #forge .fsPit.drop { animation: fPitDrop 800ms ease-out; }
html[data-ui="v2"] #forge .fsPit.drop .fsItem { animation: fLoseShake 640ms ease-out; filter: sepia(0.8) hue-rotate(-35deg) saturate(2.2) brightness(0.75); }
@keyframes fPitDrop { 0% { box-shadow: inset 0 0 calc(70 * var(--u)) rgba(230, 40, 30, 0.9), 0 0 calc(24 * var(--u)) rgba(230, 60, 40, 0.7); } }
@keyframes fLoseShake {
  10%, 50% { transform: translateX(calc(-9 * var(--u))) rotate(-5deg); }
  30%, 70% { transform: translateX(calc(9 * var(--u))) rotate(5deg); }
  100% { transform: none; }
}
/* 孔（问题 3、6）：一个孔位一列，列宽固定（176u，矮屏 150u）、居中，孔下的字放在格子里排两行（属性 / 加多少），再长也只在自己那一列里截短，
   不压到隔壁。孔：暗的圆坑；没开的虚线、下一个要打的青光一闪一闪；镶了宝石的按属性色发光；孔位消失的裂开、暗红、一个叉；镶嵌页点中的金圈。 */
html[data-ui="v2"] #forge .fhHoles {
  position: relative; z-index: 1;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, calc(176 * var(--u)));
  justify-content: center; column-gap: calc(8 * var(--u));
  width: 100%;
}
html[data-ui="v2"] #forge .fhSlot { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u)); }
html[data-ui="v2"] #forge .fhLab {
  max-width: 100%; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: calc(1 * var(--u));
  color: #d8c09a; font: 800 var(--fs-xs)/1.15 var(--sg-font); text-align: center;
  text-shadow: 0 1px 0 #000;
}
html[data-ui="v2"] #forge .fhLab b, html[data-ui="v2"] #forge .fhLab em { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: normal; }
html[data-ui="v2"] #forge .fhLab b { color: #f3e2c0; font-weight: 900; }
html[data-ui="v2"] #forge .fhSlot.k-gem .fhLab em { color: #9ef3ff; color: color-mix(in srgb, rgb(var(--sc)) 55%, #fff); font-weight: 900; }
html[data-ui="v2"] #forge .fhSlot.k-lock .fhLab b { color: rgba(220, 190, 150, 0.6); font-weight: 800; }
html[data-ui="v2"] #forge .fhSlot.k-next .fhLab b { color: #bff4ff; }
html[data-ui="v2"] #forge .fhSlot.k-next .fhLab em { color: #7fe6ff; font-weight: 900; }
html[data-ui="v2"] #forge .fhSlot.k-gone .fhLab b { color: rgba(240, 170, 150, 0.75); }
html[data-ui="v2"] #forge .fhSlot.k-gone .fhLab em { color: #ff7a62; font-weight: 900; }
html[data-ui="v2"] #forge .fhCell {
  position: relative; flex: none; width: calc(92 * var(--u)); height: calc(92 * var(--u));
  box-sizing: border-box; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: calc(3 * var(--u)) solid #8a5a2a; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #241408, #0a0502 72%);
  box-shadow: inset 0 calc(4 * var(--u)) calc(10 * var(--u)) #000, 0 0 0 calc(2 * var(--u)) rgba(255, 200, 120, 0.15);
  color: #b89a72;
}
html[data-ui="v2"] #forge .fhCell.lock { border-style: dashed; border-color: rgba(200, 160, 110, 0.45); background: rgba(40, 24, 10, 0.55); box-shadow: none; }
html[data-ui="v2"] #forge .fhCell.lock.next { border-color: #7fe6ff; animation: fNext 1.2s ease-in-out infinite; }
html[data-ui="v2"] #forge .fhBit {
  display: block; width: 46%; height: 46%; opacity: 0.85;
  background: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 32 32%27%3E%3Cpath d=%27M9 7h14l-3 13-4 9-4-9z%27 fill=%27%23bff4ff%27 stroke=%27%2307323c%27 stroke-width=%271.6%27 stroke-linejoin=%27round%27/%3E%3Cpath d=%27M10 11l12 3M11 15.5l10 2.6M12.5 20l6.5 1.7%27 stroke=%27%232a8aa8%27 stroke-width=%271.6%27/%3E%3C/svg%3E') center / contain no-repeat;
}
@keyframes fNext { 50% { box-shadow: 0 0 0 calc(5 * var(--u)) rgba(127, 230, 255, 0.3), 0 0 calc(20 * var(--u)) rgba(127, 230, 255, 0.65); } }
html[data-ui="v2"] #forge .fhCell.gem {
  --sc: 95, 208, 230;
  border-color: rgb(var(--sc));
  background: radial-gradient(circle, rgba(var(--sc), 0.38), #0a1416 72%);
  box-shadow: 0 0 calc(16 * var(--u)) rgba(var(--sc), 0.6), inset 0 0 calc(8 * var(--u)) rgba(0, 0, 0, 0.6);
}
html[data-ui="v2"] #forge .fhSlot[style] .fhCell.gem { --sc: inherit; }
html[data-ui="v2"] #forge .fhCell.gem .fIcon { width: calc(54 * var(--u)); height: calc(54 * var(--u)); }
html[data-ui="v2"] #forge .fhCell.gone {
  border-color: #6a1c12;
  background:
    linear-gradient(118deg, transparent 47%, rgba(255, 120, 90, 0.35) 48% 50%, transparent 51%),
    linear-gradient(62deg, transparent 56%, rgba(255, 120, 90, 0.28) 57% 58.5%, transparent 59.5%),
    radial-gradient(circle at 50% 42%, #2c0d07, #100403 72%);
  box-shadow: inset 0 0 calc(12 * var(--u)) #000, 0 0 0 calc(2 * var(--u)) rgba(210, 65, 42, 0.25);
}
html[data-ui="v2"] #forge .fhX { position: relative; display: block; width: 48%; height: 48%; }
html[data-ui="v2"] #forge .fhX::before, html[data-ui="v2"] #forge .fhX::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 100%; height: calc(7 * var(--u)); margin: calc(-3.5 * var(--u)) 0 0 -50%;
  border-radius: 999px; background: linear-gradient(#ff7a62, #b8301c);
  box-shadow: 0 0 calc(6 * var(--u)) rgba(255, 90, 60, 0.6);
  transform: rotate(45deg);
}
html[data-ui="v2"] #forge .fhX::after { transform: rotate(-45deg); }
html[data-ui="v2"] #forge button.fhCell { cursor: pointer; }
html[data-ui="v2"] #forge .fhCell.sel { border-color: #ffd36b; box-shadow: 0 0 0 calc(4 * var(--u)) rgba(255, 211, 107, 0.55), 0 0 calc(22 * var(--u)) rgba(255, 211, 107, 0.65); }
html[data-ui="v2"] #forge .fhCell.opened, html[data-ui="v2"] #forge .fhCell.set { animation: fHoleOpen 720ms cubic-bezier(0.2, 1.5, 0.4, 1); }
html[data-ui="v2"] #forge .fhCell.crack { animation: fCrack 460ms ease-in forwards; }
html[data-ui="v2"] #forge .fhCell.gone.fell { animation: fGone 520ms cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes fHoleOpen { 0% { transform: scale(0.3); filter: brightness(2.5); } 60% { transform: scale(1.18); } 100% { transform: none; } }
@keyframes fCrack { 35% { transform: scale(1.14); border-color: #ff5a3a; box-shadow: 0 0 calc(24 * var(--u)) #ff5a3a; } 100% { transform: scale(0.6) rotate(18deg); opacity: 0.2; } }
@keyframes fGone { 0% { transform: scale(1.5); opacity: 0; } 60% { transform: scale(0.92); opacity: 1; } 100% { transform: none; } }
/* 合成台：左边三颗摆成三角，中间成功率和箭头，右边合出来的那颗；连着合时底下一格一格亮出每回成没成。 */
html[data-ui="v2"] #forge .fsPit.merge { flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-content: center; column-gap: calc(6 * var(--u)); row-gap: calc(10 * var(--u)); padding-bottom: calc(30 * var(--u)); }
html[data-ui="v2"] #forge .fsPit.merge.empty p { position: relative; margin: 0; color: #d8b98a; font: 800 var(--fs-m)/1.4 var(--sg-font); }
html[data-ui="v2"] #forge .fmIn { position: relative; z-index: 1; flex: none; width: calc(220 * var(--u)); height: calc(196 * var(--u)); }
html[data-ui="v2"] #forge .fmSlot {
  position: absolute; left: calc(67 * var(--u)); top: calc(98 * var(--u));
  width: calc(86 * var(--u)); height: calc(86 * var(--u));
  display: flex; align-items: center; justify-content: center;
  border: calc(2 * var(--u)) solid rgba(255, 200, 120, 0.4); border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(255, 220, 160, 0.2), rgba(0, 0, 0, 0.4) 72%);
  transition: opacity 120ms;
}
html[data-ui="v2"] #forge .fmIn .fmSlot[data-ms="0"] { left: calc(67 * var(--u)); top: 0; }
html[data-ui="v2"] #forge .fmIn .fmSlot[data-ms="1"] { left: 0; top: calc(98 * var(--u)); }
html[data-ui="v2"] #forge .fmIn .fmSlot[data-ms="2"] { left: calc(134 * var(--u)); top: calc(98 * var(--u)); }
html[data-ui="v2"] #forge .fmSlot .fIcon { width: 76%; height: 76%; }
html[data-ui="v2"] #forge .fmSlot.gone { opacity: 0; }
html[data-ui="v2"] #forge .fmOwn {
  position: absolute; left: 50%; bottom: calc(-8 * var(--u)); transform: translateX(-50%);
  padding: 0 calc(12 * var(--u)); border-radius: 999px;
  background: rgba(0, 0, 0, 0.6); color: #ffe6a8; font: 800 var(--fs-xs)/1.6 var(--sg-font); white-space: nowrap;
}
html[data-ui="v2"] #forge .fmMid { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); }
html[data-ui="v2"] #forge .fmArrow {
  display: block; width: calc(70 * var(--u)); height: calc(24 * var(--u));
  background: linear-gradient(90deg, rgba(255, 200, 100, 0), #ffcf6a);
  clip-path: polygon(0 35%, 66% 35%, 66% 0, 100% 50%, 66% 100%, 66% 65%, 0 65%);
  animation: fArrow 1.2s ease-in-out infinite;
}
@keyframes fArrow { 50% { transform: translateX(calc(7 * var(--u))); } }
html[data-ui="v2"] #forge .fmOut { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u)); width: calc(200 * var(--u)); }
html[data-ui="v2"] #forge .fmSlot.out {
  position: relative; left: auto; top: auto;
  width: calc(128 * var(--u)); height: calc(128 * var(--u));
  border: calc(3 * var(--u)) solid rgba(255, 210, 120, 0.8);
  box-shadow: 0 0 calc(24 * var(--u)) rgba(255, 190, 80, 0.5), inset 0 0 calc(18 * var(--u)) rgba(0, 0, 0, 0.6);
}
html[data-ui="v2"] #forge .fmSlot.out.top { border-color: rgba(200, 200, 200, 0.5); box-shadow: none; }
html[data-ui="v2"] #forge .fmSlot.out.pop { animation: fWinPop 760ms cubic-bezier(0.2, 1.5, 0.4, 1); }
html[data-ui="v2"] #forge .fmSlot.out.fail { animation: fLoseShake 560ms ease-out; filter: grayscale(1) brightness(0.6); }
html[data-ui="v2"] #forge .fmOut b { color: #fff1d0; font: 900 var(--fs-m)/1.2 var(--sg-font); text-shadow: 0 2px 0 #000; text-align: center; }
html[data-ui="v2"] #forge .fmOut small { color: #a8f59a; font: 800 var(--fs-xs)/1.2 var(--sg-font); }
html[data-ui="v2"] #forge .fsPit.merge .fsTitle { width: 100%; }
html[data-ui="v2"] #forge .fmRibbon {
  position: absolute; left: calc(14 * var(--u)); right: calc(14 * var(--u)); bottom: calc(8 * var(--u)); z-index: 2;
  display: flex; flex-wrap: wrap; justify-content: center; gap: calc(4 * var(--u));
}
html[data-ui="v2"] #forge .fmRibbon i, html[data-ui="v2"] #forge .fmPips i {
  width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: calc(3 * var(--u));
  animation: fPip 260ms ease-out;
}
html[data-ui="v2"] #forge .fmRibbon i.w, html[data-ui="v2"] #forge .fmPips i.w { background: linear-gradient(#ffe48a, #e6a817); box-shadow: 0 0 calc(6 * var(--u)) #ffcf5a; }
html[data-ui="v2"] #forge .fmRibbon i.l, html[data-ui="v2"] #forge .fmPips i.l { background: #6a5e54; }
@keyframes fPip { 0% { transform: scale(2.2); opacity: 0; } 100% { transform: none; opacity: 1; } }
/* 这件现在的属性（问题 4）：一块一种属性（强化和宝石合计），左边属性色圆珠、名字，右边大数；两列，三块时第三块占一整行。
   鞋子上面一行大字「当前移速」和一根合计条（满 450）。 */
html[data-ui="v2"] #forgeSpeed {
  flex: none;
  display: flex; flex-direction: column; gap: calc(8 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  border: calc(2 * var(--u)) solid rgba(122, 74, 30, 0.3);
  border-radius: calc(14 * var(--u));
  background: rgba(255, 246, 220, 0.6);
}
html[data-ui="v2"] #forgeSpeed:empty { display: none; }
html[data-ui="v2"] #forge .fsBig { position: relative; text-align: center; font: 900 var(--fs-m)/1.3 var(--sg-font); }
html[data-ui="v2"] #forge .fsBig b { display: inline-block; color: #b5430f; font: 900 calc(var(--fs-xl) * 1.3)/1.1 var(--sg-font); }
html[data-ui="v2"] #forge .fsBig b.up { animation: fSpeedUp 900ms ease-out; }
html[data-ui="v2"] #forge .fsGain {
  position: absolute; left: 62%; top: 0;
  color: #2f9a25; font: 900 var(--fs-l)/1 var(--sg-font); font-style: normal;
  animation: fSpeedGain 1400ms ease-out forwards; pointer-events: none;
}
@keyframes fSpeedUp { 30% { transform: scale(1.4); color: #ff8a00; } 100% { transform: none; } }
@keyframes fSpeedGain { 0% { opacity: 0; transform: translateY(calc(10 * var(--u))); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(-24 * var(--u))); } }
html[data-ui="v2"] #forge .fsBar {
  display: flex; height: calc(14 * var(--u));
  border: calc(2 * var(--u)) solid var(--sg-wood-dk); border-radius: 999px;
  overflow: hidden; background: #5a3d22;
}
html[data-ui="v2"] #forge .fsBar i { display: block; height: 100%; transition: width 400ms ease-out; background: linear-gradient(#ffd977, #e08a10); box-shadow: inset 0 calc(-3 * var(--u)) 0 rgba(150, 70, 0, 0.35); }
html[data-ui="v2"] #forge .fsHead { display: flex; align-items: baseline; gap: calc(10 * var(--u)); padding-left: calc(10 * var(--u)); border-left: calc(5 * var(--u)) solid var(--sg-gold); }
html[data-ui="v2"] #forge .fsHead b { color: var(--sg-ink); font: 900 var(--fs-s)/1.2 var(--sg-font); white-space: nowrap; }
html[data-ui="v2"] #forge .fsHead small { min-width: 0; color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.2 var(--sg-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="v2"] #forge .fsStats { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); }
html[data-ui="v2"] #forge .fsStat {
  flex: 1 1 calc(50% - 4 * var(--u)); min-width: 0; box-sizing: border-box;
  display: flex; align-items: center; gap: calc(8 * var(--u));
  padding: calc(7 * var(--u)) calc(14 * var(--u)) calc(7 * var(--u)) calc(10 * var(--u));
  border: calc(2 * var(--u)) solid rgba(var(--sc), 0.5); border-radius: calc(12 * var(--u));
  background: linear-gradient(90deg, rgba(var(--sc), 0.2), rgba(255, 252, 240, 0.7) 70%);
}
html[data-ui="v2"] #forge .fsStats.n1 .fsStat { flex-basis: 100%; }
html[data-ui="v2"] #forge .fsStat i {
  flex: none; width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0 14%, rgb(var(--sc)) 46%, rgba(0, 0, 0, 0.55) 100%);
  box-shadow: 0 0 0 calc(2 * var(--u)) rgba(58, 34, 12, 0.35);
}
html[data-ui="v2"] #forge .fsStat b { flex: 1; min-width: 0; color: var(--sg-ink); font: 800 var(--fs-s)/1.2 var(--sg-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="v2"] #forge .fsStat em {
  flex: none; color: var(--sg-ink); color: color-mix(in srgb, rgb(var(--sc)) 72%, #000);
  font: 900 var(--fs-l)/1 var(--sg-font); font-style: normal; font-variant-numeric: tabular-nums;
}
html[data-ui="v2"] #forge .fsNone { flex: 1; text-align: center; color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.6 var(--sg-font); }
/* 分页内容：上面是这一下会怎样（等级、加的数、成功率圈、失败会怎样），中间材料，下面一颗大钮。 */
html[data-ui="v2"] #forgeBody {
  flex: 1 0 auto;
  display: flex; flex-direction: column; gap: calc(14 * var(--u)); align-items: stretch;
  padding: calc(14 * var(--u)) calc(14 * var(--u)) calc(18 * var(--u));
  border: calc(2 * var(--u)) solid rgba(122, 74, 30, 0.3);
  border-radius: calc(14 * var(--u));
  background: rgba(255, 246, 220, 0.6);
}
html[data-ui="v2"] #forgeBody:empty { display: none; }
html[data-ui="v2"] #forge .fpLadder { display: flex; justify-content: center; gap: calc(6 * var(--u)); }
html[data-ui="v2"] #forge .fpLadder span {
  width: calc(52 * var(--u)); height: calc(34 * var(--u));
  display: flex; align-items: center; justify-content: center;
  border: calc(2 * var(--u)) solid var(--sg-wood-lt); border-radius: calc(8 * var(--u));
  background: #ead0a0; color: #8a6a4a; font: 800 var(--fs-xs)/1 var(--sg-font);
}
html[data-ui="v2"] #forge .fpLadder span.safe { border-style: dashed; }
html[data-ui="v2"] #forge .fpLadder span.risky { border-color: var(--sg-bad); color: #a3402a; }
html[data-ui="v2"] #forge .fpLadder span.on { background: #a89070; border-color: var(--sg-wood); color: #fff; }
html[data-ui="v2"] #forge .fpLadder span.on.t2 { background: #2f78d0; }
html[data-ui="v2"] #forge .fpLadder span.on.t3 { background: #8a3ad0; }
html[data-ui="v2"] #forge .fpLadder span.on.t4 { background: linear-gradient(#ffcf4a, #e07a10); }
html[data-ui="v2"] #forge .fpLadder span.next { background: #fff1c9; border-color: #b5430f; color: #b5430f; animation: fLadder 1s ease-in-out infinite; }
@keyframes fLadder { 50% { box-shadow: 0 0 0 calc(4 * var(--u)) rgba(255, 170, 40, 0.6); } }
html[data-ui="v2"] #forge .fpHead { display: flex; align-items: center; justify-content: center; gap: calc(18 * var(--u)); font: 900 calc(var(--fs-xl) * 1.25)/1.1 var(--sg-font); }
html[data-ui="v2"] #forge .fpHead i { color: var(--sg-wood-lt); font-size: var(--fs-l); font-style: normal; }
html[data-ui="v2"] #forge .fpFrom { color: #8a6a4a; }
html[data-ui="v2"] #forge .fpTo { color: #b5430f; text-shadow: 0 0 calc(10 * var(--u)) rgba(255, 170, 60, 0.45); }
html[data-ui="v2"] #forge .fpTo.t2 { color: #2f6fd0; }
html[data-ui="v2"] #forge .fpTo.t3 { color: #8a3ad0; }
html[data-ui="v2"] #forge .fpTo.t4 { color: #d07a00; }
html[data-ui="v2"] #forge .fpStat { display: flex; align-items: baseline; justify-content: center; gap: calc(10 * var(--u)); font: 800 var(--fs-m)/1.2 var(--sg-font); }
html[data-ui="v2"] #forge .fpStat span { color: var(--sg-ink-soft); }
html[data-ui="v2"] #forge .fpStat .now { color: var(--sg-ink); font-size: var(--fs-l); }
html[data-ui="v2"] #forge .fpStat .next { color: var(--sg-ok); font-size: calc(var(--fs-xl) * 1.05); }
html[data-ui="v2"] #forge .fpStat i { color: var(--sg-wood-lt); font-style: normal; }
html[data-ui="v2"] #forge .fpStat em { padding: 0 calc(10 * var(--u)); border-radius: 999px; background: #dff3d0; color: var(--sg-ok); font-size: var(--fs-s); font-style: normal; }
html[data-ui="v2"] #forge .fpTop { padding: calc(10 * var(--u)); text-align: center; color: var(--sg-ok); font: 900 var(--fs-l)/1.35 var(--sg-font); }
html[data-ui="v2"] #forge .fpTop.bad { padding-bottom: 0; color: var(--sg-bad); }
html[data-ui="v2"] #forge .fpWhy { margin: 0; text-align: center; color: var(--sg-ink-soft); font: 700 var(--fs-s)/1.5 var(--sg-font); }
html[data-ui="v2"] #forge .fpSlots { margin: calc(-6 * var(--u)) 0 0; text-align: center; color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.4 var(--sg-font); }
html[data-ui="v2"] #forge .fpSlots b { color: var(--sg-ink); font-weight: 900; }
html[data-ui="v2"] #forge .fpSlots b.bad { color: var(--sg-bad); }
/* 成功率圈：一圈按百分比填色（100 绿、50 起黄、再低红），中间大字。锻造台上的那个底色是暗的。 */
html[data-ui="v2"] #forge .fpRisk { display: flex; align-items: center; justify-content: center; gap: calc(18 * var(--u)); }
html[data-ui="v2"] #forge .fRing {
  --p: 50; --rc: #d08a00;
  position: relative; flex: none;
  width: calc(118 * var(--u)); height: calc(118 * var(--u)); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: conic-gradient(var(--rc) calc(var(--p) * 1%), rgba(122, 74, 30, 0.2) 0);
}
html[data-ui="v2"] #forge .fRing::before {
  content: ""; position: absolute; inset: calc(12 * var(--u)); border-radius: 50%;
  background: #fff6df; box-shadow: inset 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.18);
}
html[data-ui="v2"] #forge .fRing b, html[data-ui="v2"] #forge .fRing span { position: relative; }
html[data-ui="v2"] #forge .fRing b { color: var(--rc); font: 900 var(--fs-xl)/1 var(--sg-font); }
html[data-ui="v2"] #forge .fRing b small { font-size: 0.55em; }
html[data-ui="v2"] #forge .fRing span { color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.3 var(--sg-font); }
html[data-ui="v2"] #forge .fRing.r100 { --rc: #2f9a25; }
html[data-ui="v2"] #forge .fRing.r50 { --rc: #d08a00; }
html[data-ui="v2"] #forge .fRing.rLow { --rc: #d0321e; }
html[data-ui="v2"] #forge .fsPit .fRing { width: calc(104 * var(--u)); height: calc(104 * var(--u)); background: conic-gradient(var(--rc) calc(var(--p) * 1%), rgba(255, 220, 160, 0.16) 0); }
html[data-ui="v2"] #forge .fsPit .fRing::before { background: #1e0f05; box-shadow: inset 0 0 calc(10 * var(--u)) #000; }
html[data-ui="v2"] #forge .fsPit .fRing span { color: #d8b98a; }
html[data-ui="v2"] #forge .fsPit .fRing.r100 { --rc: #6fe05a; }
html[data-ui="v2"] #forge .fsPit .fRing.r50 { --rc: #ffc23a; }
html[data-ui="v2"] #forge .fsPit .fRing.rLow { --rc: #ff6a4a; }
html[data-ui="v2"] #forge .fpFail {
  display: flex; flex-direction: column; gap: calc(4 * var(--u));
  max-width: 58%; padding: calc(10 * var(--u)) calc(16 * var(--u));
  border-left: calc(6 * var(--u)) solid; border-radius: calc(12 * var(--u));
}
html[data-ui="v2"] #forge .fpFail b { font: 900 var(--fs-m)/1.25 var(--sg-font); }
html[data-ui="v2"] #forge .fpFail small { color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.35 var(--sg-font); }
html[data-ui="v2"] #forge .fpFail.safe { border-color: var(--sg-ok); background: #e3f4d6; color: var(--sg-ok); }
html[data-ui="v2"] #forge .fpFail.warn { border-color: #d08a00; background: #fbecc6; color: #8a5a00; }
html[data-ui="v2"] #forge .fpFail.bad { border-color: var(--sg-bad); background: #fbdcd6; color: var(--sg-bad); }
/* 材料：一颗一个签，够的绿边，差的红底写差几个。 */
html[data-ui="v2"] #forge .fpMats { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(8 * var(--u)); }
html[data-ui="v2"] #forge .fMat {
  display: flex; align-items: center; gap: calc(8 * var(--u));
  padding: calc(4 * var(--u)) calc(16 * var(--u)) calc(4 * var(--u)) calc(6 * var(--u));
  border: calc(2 * var(--u)) solid rgba(47, 122, 37, 0.4); border-radius: 999px;
  background: rgba(122, 74, 30, 0.1);
  font: 800 var(--fs-s)/1.2 var(--sg-font);
}
html[data-ui="v2"] #forge .fMat .fIcon { width: calc(44 * var(--u)); height: calc(44 * var(--u)); }
html[data-ui="v2"] #forge .fMat em { color: var(--sg-ok); font-style: normal; }
html[data-ui="v2"] #forge .fMat.lack { border-color: rgba(192, 40, 30, 0.6); background: #fbe2dc; }
html[data-ui="v2"] #forge .fMat.lack em { color: var(--sg-bad); }
/* 大钮：金色、压下去下沉，一道光每隔两秒半扫过去；锻造中、不能按时不扫。钮上的小图（锤、钻、宝石）是 CSS 画的。 */
html[data-ui="v2"] #forge .fGo {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: calc(12 * var(--u));
  align-self: stretch; margin: 0 calc(24 * var(--u));
  height: calc(80 * var(--u)); padding: 0 calc(24 * var(--u));
  border: calc(3 * var(--u)) solid var(--sg-wood); border-radius: calc(16 * var(--u));
  background: linear-gradient(#ffeaa6, var(--sg-gold-hi) 40%, var(--sg-gold));
  color: var(--sg-ink); font: 900 var(--fs-xl)/1 var(--sg-font); letter-spacing: 0.06em;
  box-shadow: 0 calc(6 * var(--u)) 0 var(--sg-wood), 0 calc(10 * var(--u)) calc(18 * var(--u)) rgba(122, 74, 30, 0.35);
  cursor: pointer;
}
html[data-ui="v2"] #forge .fGo::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  transform: skewX(-20deg);
  animation: fShine 2.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes fShine { 0%, 55% { left: -40%; } 100% { left: 130%; } }
html[data-ui="v2"] #forge .fGo:active:not(:disabled) { transform: translateY(calc(4 * var(--u))); box-shadow: 0 calc(2 * var(--u)) 0 var(--sg-wood); }
html[data-ui="v2"] #forge .fGo:disabled { opacity: 0.5; filter: grayscale(0.5); }
html[data-ui="v2"] #forge .fGo:disabled::after, html[data-ui="v2"] #forge.busy .fGo::after { display: none; }
html[data-ui="v2"] #forge.busy .fGo { filter: brightness(0.9) saturate(0.7); }
html[data-ui="v2"] #forge .fGo i { position: relative; display: inline-block; flex: none; width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
html[data-ui="v2"] #forge .fgHammer::before {
  content: ""; position: absolute; left: calc(3 * var(--u)); top: calc(4 * var(--u));
  width: calc(24 * var(--u)); height: calc(11 * var(--u)); border-radius: calc(3 * var(--u));
  background: #4a2c12; transform: rotate(-35deg);
}
html[data-ui="v2"] #forge .fgHammer::after {
  content: ""; position: absolute; left: calc(15 * var(--u)); top: calc(10 * var(--u));
  width: calc(6 * var(--u)); height: calc(24 * var(--u)); border-radius: calc(3 * var(--u));
  background: #7a4a1e; transform: rotate(-35deg);
}
html[data-ui="v2"] #forge .fgGem::before {
  content: ""; position: absolute; inset: calc(7 * var(--u));
  border: calc(2 * var(--u)) solid #1d5a6c; border-radius: calc(4 * var(--u));
  background: linear-gradient(135deg, #e8fbff, #5fd0e6 45%, #1d6f86);
  transform: rotate(45deg);
}
html[data-ui="v2"] #forge .fgDrill::before {
  content: ""; position: absolute; left: calc(11 * var(--u)); top: calc(2 * var(--u));
  width: calc(12 * var(--u)); height: calc(30 * var(--u));
  background: repeating-linear-gradient(160deg, #4a2c12 0 calc(4 * var(--u)), #9c6b3a calc(4 * var(--u)) calc(7 * var(--u)));
  clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 100%, 0 50%);
}
html[data-ui="v2"] #forge .fHint { margin: 0; text-align: center; color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.5 var(--sg-font); }
html[data-ui="v2"] #forge .fhGuard {
  display: flex; align-items: center; gap: calc(12 * var(--u));
  padding: calc(8 * var(--u)) calc(14 * var(--u));
  border: calc(2 * var(--u)) dashed var(--sg-wood-lt); border-radius: calc(12 * var(--u));
  background: #f3dcaa; color: var(--sg-ink); text-align: left;
  cursor: pointer;
}
html[data-ui="v2"] #forge .fhGuard .fIcon { width: calc(46 * var(--u)); height: calc(46 * var(--u)); }
html[data-ui="v2"] #forge .fhGuard span { flex: 1; display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
html[data-ui="v2"] #forge .fhGuard b { font: 900 var(--fs-s)/1.2 var(--sg-font); }
html[data-ui="v2"] #forge .fhGuard small { color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.3 var(--sg-font); }
html[data-ui="v2"] #forge .fhTick {
  position: relative; flex: none; width: calc(36 * var(--u)); height: calc(36 * var(--u));
  border: calc(3 * var(--u)) solid var(--sg-wood-lt); border-radius: calc(8 * var(--u));
  background: #fff6df;
}
html[data-ui="v2"] #forge .fhGuard.on { border-style: solid; border-color: var(--sg-ok); background: #dff3d0; }
html[data-ui="v2"] #forge .fhGuard.on b { color: var(--sg-ok); }
html[data-ui="v2"] #forge .fhGuard.on .fhTick { border-color: var(--sg-ok); background: var(--sg-ok); }
html[data-ui="v2"] #forge .fhGuard.on .fhTick::after {
  content: ""; position: absolute; left: calc(9 * var(--u)); top: calc(3 * var(--u));
  width: calc(9 * var(--u)); height: calc(17 * var(--u));
  border: solid #fff; border-width: 0 calc(4 * var(--u)) calc(4 * var(--u)) 0;
  transform: rotate(45deg);
}
html[data-ui="v2"] #forge .fhGuard:disabled { opacity: 0.5; }
/* 镶嵌：上面一句这一下会怎样（镶进第几孔、加多少、这件合计从几变几），下面能镶的宝石四列，点一颗选中、再按镶嵌。 */
html[data-ui="v2"] #forge .fiPlan {
  display: flex; align-items: center; gap: calc(12 * var(--u));
  padding: calc(10 * var(--u)) calc(14 * var(--u));
  border: calc(2 * var(--u)) solid rgba(42, 138, 168, 0.4); border-radius: calc(12 * var(--u));
  background: #e9f7fb;
}
html[data-ui="v2"] #forge .fiPlan.out { border-color: rgba(201, 138, 16, 0.5); background: #fff1d6; }
html[data-ui="v2"] #forge .fiPlan span { display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
html[data-ui="v2"] #forge .fiPlan b { color: #1f6f86; font: 900 var(--fs-m)/1.25 var(--sg-font); }
html[data-ui="v2"] #forge .fiPlan.out b { color: #8a5a00; }
html[data-ui="v2"] #forge .fiPlan small { color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.35 var(--sg-font); }
html[data-ui="v2"] #forge .fhShelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(8 * var(--u)); }
html[data-ui="v2"] #forge .fhGem {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--u));
  padding: calc(6 * var(--u)) calc(4 * var(--u)) calc(6 * var(--u));
  border: calc(2 * var(--u)) solid var(--sg-wood-lt); border-radius: calc(12 * var(--u));
  background: #f3dcaa; color: var(--sg-ink); font: 700 var(--fs-xs)/1.2 var(--sg-font);
  cursor: pointer;
  transition: transform 140ms ease-out;
}
html[data-ui="v2"] #forge .fhGem .fgArt { position: relative; display: block; width: 100%; height: calc(76 * var(--u)); }
html[data-ui="v2"] #forge .fhGem .fgArt .fIcon { position: absolute; left: 50%; top: 4%; width: calc(60 * var(--u)); height: calc(60 * var(--u)); transform: translateX(-50%); }
html[data-ui="v2"] #forge .fhGem > b { font-weight: 900; white-space: nowrap; }
html[data-ui="v2"] #forge .fhGem > span:not(.fgArt) { color: var(--sg-ok); font-weight: 900; }
html[data-ui="v2"] #forge .fhGem.on {
  border-color: #2a8aa8; background: #dff4fa;
  box-shadow: 0 0 0 calc(3 * var(--u)) rgba(95, 208, 230, 0.55);
  transform: translateY(calc(-3 * var(--u)));
}
html[data-ui="v2"] #forge .fhGem:disabled { opacity: 0.45; }
/* 合成：属性筛选一排签（带颗数，能合的下面一道金线）；一种属性一行 Lv1～Lv5（能合的金底、选中的红边）。 */
html[data-ui="v2"] #forge .fmFilter { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); }
html[data-ui="v2"] #forge .fmFilter button {
  padding: calc(4 * var(--u)) calc(14 * var(--u));
  border: calc(2 * var(--u)) solid var(--sg-wood-lt); border-radius: 999px;
  background: #f3dcaa; color: var(--sg-ink); font: 800 var(--fs-xs)/1.5 var(--sg-font);
  cursor: pointer;
}
html[data-ui="v2"] #forge .fmFilter button em { margin-left: calc(6 * var(--u)); color: var(--sg-ink-soft); font-style: normal; }
html[data-ui="v2"] #forge .fmFilter button.can { box-shadow: inset 0 calc(-3 * var(--u)) 0 var(--sg-gold); }
html[data-ui="v2"] #forge .fmFilter button.on { border-color: var(--sg-wood); background: var(--sg-wood); color: #fff3c8; }
html[data-ui="v2"] #forge .fmFilter button.on em { color: var(--sg-gold-hi); }
html[data-ui="v2"] #forge .fmGrid { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
html[data-ui="v2"] #forge .fmLine { display: grid; grid-template-columns: calc(104 * var(--u)) minmax(0, 1fr); align-items: center; gap: calc(8 * var(--u)); }
html[data-ui="v2"] #forge .fmStat { color: var(--sg-wood); font: 900 var(--fs-xs)/1.2 var(--sg-font); text-align: right; white-space: nowrap; }
html[data-ui="v2"] #forge .fmCells { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(6 * var(--u)); }
html[data-ui="v2"] #forge .fmCell {
  position: relative;
  display: block; padding: 0;
  border: calc(2 * var(--u)) solid rgba(167, 122, 69, 0.55); border-radius: calc(10 * var(--u));
  background: #f6e3b8; color: var(--sg-ink);
  cursor: pointer;
  transition: transform 140ms ease-out;
}
html[data-ui="v2"] #forge .fmCell .fgArt { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; }
html[data-ui="v2"] #forge .fmCell .fgArt .fIcon { position: absolute; left: 13%; top: 8%; width: 74%; height: 74%; }
html[data-ui="v2"] #forge .fmCell.none { opacity: 0.3; filter: grayscale(1); }
html[data-ui="v2"] #forge .fmCell.can { border-color: #e6a817; background: radial-gradient(ellipse at 50% 35%, #fff6d6, #f3d48a); }
html[data-ui="v2"] #forge .fmCell.on { border-color: #b5430f; box-shadow: 0 0 0 calc(3 * var(--u)) #ffcf5a; transform: translateY(calc(-3 * var(--u))); }
html[data-ui="v2"] #forge .fmQty { display: flex; justify-content: center; gap: calc(10 * var(--u)); }
html[data-ui="v2"] #forge .fmQty button {
  min-width: calc(100 * var(--u)); height: calc(54 * var(--u));
  border: calc(3 * var(--u)) solid var(--sg-wood-lt); border-radius: calc(12 * var(--u));
  background: #f3dcaa; color: var(--sg-ink); font: 900 var(--fs-m)/1 var(--sg-font);
  cursor: pointer;
}
html[data-ui="v2"] #forge .fmQty button.on { border-color: var(--sg-wood); background: linear-gradient(var(--sg-gold-hi), var(--sg-gold)); box-shadow: 0 calc(3 * var(--u)) 0 var(--sg-wood); }
html[data-ui="v2"] #forge .fmQty button:disabled { opacity: 0.4; }
html[data-ui="v2"] #forge .fmExpect { text-align: center; color: var(--sg-ink-soft); font: 800 var(--fs-s)/1.4 var(--sg-font); }
html[data-ui="v2"] #forge .fmExpect b { color: var(--sg-ok); font-size: var(--fs-l); }
html[data-ui="v2"] #forge .fmExpect i { color: var(--sg-bad); font-weight: 900; font-style: normal; }
html[data-ui="v2"] #forge .fmRun { padding: calc(10 * var(--u)) calc(12 * var(--u)); border-radius: calc(12 * var(--u)); background: rgba(58, 30, 6, 0.88); color: #ffe6a8; }
html[data-ui="v2"] #forge .fmPips { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(4 * var(--u)); }
html[data-ui="v2"] #forge .fmRun p { margin: calc(6 * var(--u)) 0 0; text-align: center; font: 800 var(--fs-xs)/1.4 var(--sg-font); }
/* 飘字（+4 攻击往上飘，掉回 +7 往下掉）。 */
html[data-ui="v2"] #forge .fFloat {
  position: absolute; z-index: 7; transform: translate(-50%, -50%);
  white-space: nowrap; pointer-events: none;
  font: 900 var(--fs-xl)/1 var(--sg-font);
  -webkit-text-stroke: calc(3 * var(--u)) #2a1606; paint-order: stroke fill;
}
html[data-ui="v2"] #forge .fFloat.good { color: #9dff6a; }
html[data-ui="v2"] #forge .fFloat.bad { color: #ff6a5a; }
html[data-ui="v2"] #forge .fFloat.up { animation: fFloatUp 1500ms ease-out forwards; }
html[data-ui="v2"] #forge .fFloat.down { animation: fFloatDown 1500ms ease-in forwards; }
@keyframes fFloatUp {
  0% { opacity: 0; transform: translate(-50%, -20%) scale(0.6); }
  15% { opacity: 1; transform: translate(-50%, -100%) scale(1.3); }
  30% { transform: translate(-50%, -120%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -280%); }
}
@keyframes fFloatDown {
  0% { opacity: 0; transform: translate(-50%, -90%) scale(1.35); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 140%); }
}
/* 大字章：金字是成了，灰字没成，红字掉级掉孔，青字是取下这类没有成败的。盖下来一弹，失败左右晃一下。 */
html[data-ui="v2"] #forgeFlash {
  position: absolute; left: 50%; top: 30%; z-index: 8;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u));
  padding: calc(10 * var(--u)) calc(34 * var(--u)) calc(12 * var(--u));
  border-radius: calc(14 * var(--u));
  white-space: nowrap; pointer-events: none;
}
html[data-ui="v2"] #forgeFlash[hidden] { display: none; }
html[data-ui="v2"] #forgeFlash b { font: 900 calc(var(--fs-xl) * 1.35)/1.1 var(--sg-font); letter-spacing: 0.04em; }
html[data-ui="v2"] #forgeFlash small { font: 800 var(--fs-s)/1.2 var(--sg-font); }
html[data-ui="v2"] #forgeFlash.win { border: calc(3 * var(--u)) solid #ffcf5a; background: linear-gradient(rgba(74, 38, 6, 0.94), rgba(40, 20, 4, 0.94)); box-shadow: 0 0 calc(26 * var(--u)) rgba(255, 190, 60, 0.75); }
html[data-ui="v2"] #forgeFlash.win b { background: linear-gradient(#fff8d0, #ffcf3a 55%, #e07a10); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 #3a1a00); }
html[data-ui="v2"] #forgeFlash.win small { color: #ffe6a8; }
html[data-ui="v2"] #forgeFlash.lose { border: calc(3 * var(--u)) solid #8a8078; background: rgba(28, 24, 22, 0.92); }
html[data-ui="v2"] #forgeFlash.lose b { color: #ddd5cc; }
html[data-ui="v2"] #forgeFlash.lose small { color: #b8b0a8; }
html[data-ui="v2"] #forgeFlash.drop { border: calc(3 * var(--u)) solid #e0503a; background: rgba(52, 10, 6, 0.94); box-shadow: 0 0 calc(26 * var(--u)) rgba(224, 80, 58, 0.65); }
html[data-ui="v2"] #forgeFlash.drop b { color: #ff8a7a; }
html[data-ui="v2"] #forgeFlash.drop small { color: #ffc8be; }
html[data-ui="v2"] #forgeFlash.info { border: calc(3 * var(--u)) solid #5fd0e6; background: rgba(10, 36, 44, 0.92); }
html[data-ui="v2"] #forgeFlash.info b { color: #bff4ff; }
html[data-ui="v2"] #forgeFlash.info small { color: #9ad8e6; }
html[data-ui="v2"] #forgeFlash.play.win { animation: fStampWin 2000ms ease-out forwards; }
html[data-ui="v2"] #forgeFlash.play.lose, html[data-ui="v2"] #forgeFlash.play.drop, html[data-ui="v2"] #forgeFlash.play.info { animation: fStampLose 2000ms ease-out forwards; }
@keyframes fStampWin {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(2.3) rotate(-7deg); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(0.92) rotate(0); }
  20% { transform: translate(-50%, -50%) scale(1.06); }
  28% { transform: translate(-50%, -50%) scale(1); }
  82% { opacity: 1; transform: translate(-50%, -50%); }
  100% { opacity: 0; transform: translate(-50%, -66%); }
}
@keyframes fStampLose {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
  10% { opacity: 1; transform: translate(-53%, -50%) scale(1); }
  16% { transform: translate(-47%, -50%); }
  22% { transform: translate(-51%, -50%); }
  28% { transform: translate(-50%, -50%); }
  82% { opacity: 1; transform: translate(-50%, -50%); }
  100% { opacity: 0; transform: translate(-50%, -40%); }
}
/* 整张纸震一下（失败），掉级掉孔震得狠。 */
html[data-ui="v2"] #forge .v2Sheet.fShake { animation: fSheetShake 380ms ease-out; }
html[data-ui="v2"] #forge .v2Sheet.fShakeHard { animation: fSheetShakeHard 540ms ease-out; }
@keyframes fSheetShake {
  20% { transform: translate(calc(-5 * var(--u)), calc(2 * var(--u))); }
  40% { transform: translate(calc(5 * var(--u)), calc(-2 * var(--u))); }
  60% { transform: translate(calc(-2 * var(--u)), 0); }
  100% { transform: none; }
}
@keyframes fSheetShakeHard {
  15% { transform: translate(calc(-10 * var(--u)), calc(4 * var(--u))) rotate(-0.6deg); }
  30% { transform: translate(calc(10 * var(--u)), calc(-4 * var(--u))) rotate(0.6deg); }
  45% { transform: translate(calc(-6 * var(--u)), calc(2 * var(--u))); }
  60% { transform: translate(calc(5 * var(--u)), 0); }
  80% { transform: translate(calc(-2 * var(--u)), 0); }
  100% { transform: none; }
}
/* 大钮吸在面板可视区的底边：内容长（合成页的宝石格、矮屏）也不用滚就按得到。 */
html[data-ui="v2"] #forge #forgeBody .fGo { position: sticky; bottom: calc(6 * var(--u)); z-index: 3; }
/* 9:16 这类矮屏（面板高不到 1160u）：锻造台、装备卡、成功率圈收小，一屏放下锻造台和大钮。 */
@container (aspect-ratio >= 720 / 1392) {
  html[data-ui="v2"] #forge .fGear { flex-basis: calc(116 * var(--u)); padding: calc(5 * var(--u)) calc(4 * var(--u)) calc(6 * var(--u)); }
  html[data-ui="v2"] #forge .fgArt { width: calc(56 * var(--u)); height: calc(56 * var(--u)); }
  html[data-ui="v2"] #forgeGear { padding-bottom: calc(10 * var(--u)); }
  html[data-ui="v2"] #forge .fsPit { min-height: calc(220 * var(--u)); gap: calc(6 * var(--u)); padding: calc(12 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u)); }
  html[data-ui="v2"] #forge .fsItem { width: calc(112 * var(--u)); height: calc(112 * var(--u)); }
  html[data-ui="v2"] #forge .fhCell { width: calc(76 * var(--u)); height: calc(76 * var(--u)); }
  html[data-ui="v2"] #forge .fhCell.gem .fIcon { width: calc(44 * var(--u)); height: calc(44 * var(--u)); }
  html[data-ui="v2"] #forge .fhHoles { grid-auto-columns: minmax(0, calc(150 * var(--u))); }
  html[data-ui="v2"] #forge .fhSlot { gap: calc(4 * var(--u)); }
  html[data-ui="v2"] #forge .fsStat { padding-top: calc(5 * var(--u)); padding-bottom: calc(5 * var(--u)); }
  html[data-ui="v2"] #forge .fsPit.merge { padding-bottom: calc(26 * var(--u)); }
  html[data-ui="v2"] #forge .fmIn { transform: scale(0.82); margin: calc(-18 * var(--u)) calc(-20 * var(--u)); }
  html[data-ui="v2"] #forge .fmSlot.out { width: calc(104 * var(--u)); height: calc(104 * var(--u)); }
  html[data-ui="v2"] #forgeSpeed { padding: calc(6 * var(--u)) calc(10 * var(--u)); gap: calc(4 * var(--u)); }
  html[data-ui="v2"] #forge .fsBig b { font-size: var(--fs-xl); }
  html[data-ui="v2"] #forgeBody { gap: calc(8 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u)); }
  html[data-ui="v2"] #forge .fpHead { font-size: var(--fs-xl); }
  html[data-ui="v2"] #forge .fRing { width: calc(96 * var(--u)); height: calc(96 * var(--u)); }
  html[data-ui="v2"] #forge .fRing::before { inset: calc(10 * var(--u)); }
  html[data-ui="v2"] #forge .fRing b { font-size: var(--fs-l); }
  html[data-ui="v2"] #forge .fMat .fIcon { width: calc(36 * var(--u)); height: calc(36 * var(--u)); }
  html[data-ui="v2"] #forge .fGo { height: calc(68 * var(--u)); }
}

/* ---------- 面板（背包、角色、宠物、锻造、邮件、家族，ui-v2-panels.js / forge.js 搭）：一张纸卡，都铺到聊天上沿。背包的格子、角色和宠物的形象与各分区分掉多出来的高度 ---------- */
html[data-ui="v2"] #bag.v2Panel, html[data-ui="v2"] #role.v2Panel, html[data-ui="v2"] #pet.v2Panel, html[data-ui="v2"] #forge.v2Panel,
html[data-ui="v2"] #mail.v2Panel, html[data-ui="v2"] #family.v2Panel, html[data-ui="v2"] #team.v2Panel, html[data-ui="v2"] #friend.v2Panel {
  top: 0; height: calc(100cqh - var(--botH));
  box-sizing: border-box;
  padding: calc(var(--sat) + 8 * var(--u)) calc(10 * var(--u)) calc(8 * var(--u));
  display: flex; flex-direction: column;
  background: rgba(12, 7, 2, 0.55);
  overflow: hidden;
  color: var(--sg-ink);
  font: 700 var(--fs-m)/1.3 var(--sg-font);
}
html[data-ui="v2"] .v2Sheet { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
/* 标题条、角标、关闭钮、分页钮：所有面板（还有设置、GM）同一套尺寸——标题条高 56、标题 --fs-l、角标 --fs-s、
   关闭钮 56×40、分页钮高 52 字 --fs-s（角标里的数 --fs-xs）。面板里别再给这几样单写字号、高度。 */
html[data-ui="v2"] .sgHead { box-sizing: border-box; min-height: calc(56 * var(--u)); }
html[data-ui="v2"] .sgHead > b { font: 900 var(--fs-l)/1.2 var(--sg-font); }
html[data-ui="v2"] .v2Sheet > .sgHead { margin: 0; flex: none; padding: calc(6 * var(--u)) calc(14 * var(--u)); border-radius: calc(12 * var(--u)) calc(12 * var(--u)) 0 0; }
html[data-ui="v2"] .v2Count { font: 700 var(--fs-s)/1 var(--sg-font); color: #f3dcaa; opacity: 0.9; white-space: nowrap; }
html[data-ui="v2"] .sgHead .sgClose, html[data-ui="v2"] #bag.v2Panel #bagClose {
  flex: none; position: static;
  width: calc(56 * var(--u)); height: calc(40 * var(--u));
  padding: 0;
  border: calc(3 * var(--u)) solid var(--sg-wood-dk); border-radius: calc(10 * var(--u));
  background: var(--sg-paper); color: var(--sg-ink);
  font: 900 var(--fs-m)/1 var(--sg-font);
}
/* 分页钮（背包分类、锻造四页、宠物三页）：一排等宽，选中金底。 */
html[data-ui="v2"] .sgTabs { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: calc(6 * var(--u)); flex: none; height: calc(52 * var(--u)); }
html[data-ui="v2"] .sgTabs button {
  min-width: 0; padding: 0;
  border: calc(3 * var(--u)) solid var(--sg-wood);
  border-radius: calc(12 * var(--u));
  background: var(--sg-paper-in);
  color: var(--sg-ink-soft);
  font: 800 var(--fs-s)/1 var(--sg-font);
  white-space: nowrap;
  cursor: pointer;
}
html[data-ui="v2"] .sgTabs button em { margin-left: calc(4 * var(--u)); font: 700 var(--fs-xs)/1 var(--sg-font); font-style: normal; opacity: 0.75; }
html[data-ui="v2"] .sgTabs button em:empty { display: none; }
html[data-ui="v2"] .sgTabs button.on { background: linear-gradient(var(--sg-gold-hi), var(--sg-gold)); color: var(--sg-ink); }
html[data-ui="v2"] .sgTabs button.on em { opacity: 1; color: #a8400e; }
/* 战斗中标题条下面一行：这个面板里什么下一场生效、什么不能做。走路时不出。 */
html[data-ui="v2"] .v2BattleNote {
  display: none; flex: none; margin: 0;
  padding: calc(6 * var(--u)) calc(14 * var(--u));
  background: rgba(58, 30, 6, 0.86); color: #ffd75e;
  font: 800 var(--fs-xs)/1.3 var(--sg-font);
  text-align: center;
}
html[data-ui="v2"] #shell.battling .v2BattleNote { display: block; }
html[data-ui="v2"] .v2Body {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; gap: calc(10 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
  overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
}
html[data-ui="v2"] #bag.v2Panel .v2Body { overflow: hidden; touch-action: auto; }

/* 形象框：米色圆台，人站在中间。 */
html[data-ui="v2"] .v2Port {
  position: relative; flex: none;
  box-sizing: border-box;
  border: calc(3 * var(--u)) solid var(--sg-wood);
  border-radius: calc(16 * var(--u));
  background:
    radial-gradient(ellipse 42% 9% at 50% 84%, rgba(90, 50, 10, 0.35), transparent 100%),
    radial-gradient(ellipse at 50% 38%, #fffaf0 0%, #f2ddb0 55%, #d9b57a 100%);
  box-shadow: inset 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(122, 74, 30, 0.35);
  overflow: hidden;
}
html[data-ui="v2"] .v2Port canvas {
  position: absolute; left: calc(6 * var(--u)); top: calc(6 * var(--u));
  width: calc(100% - 12 * var(--u)); height: calc(100% - 12 * var(--u));
  image-rendering: pixelated; clip-path: none; z-index: 1; background: none;
}
/* 分区：浅纸底、细边。 */
html[data-ui="v2"] .v2Sec {
  flex: none;
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  border: calc(2 * var(--u)) solid rgba(122, 74, 30, 0.3);
  border-radius: calc(14 * var(--u));
  background: rgba(255, 246, 220, 0.6);
}
html[data-ui="v2"] .v2SecHead {
  display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u));
  margin: 0 0 calc(4 * var(--u));
  padding-left: calc(10 * var(--u));
  border-left: calc(5 * var(--u)) solid var(--sg-gold);
  font: 900 var(--fs-s)/1.2 var(--sg-font);
}
html[data-ui="v2"] .v2Pts {
  padding: calc(3 * var(--u)) calc(12 * var(--u));
  border-radius: 999px;
  background: rgba(122, 74, 30, 0.15);
  color: var(--sg-ink-soft);
  font: 800 var(--fs-xs)/1.2 var(--sg-font);
  white-space: nowrap;
}
html[data-ui="v2"] .v2Pts em { font-style: normal; color: var(--sg-ink); }
html[data-ui="v2"] .v2HeadNote {
  flex: 1; min-width: 0;
  color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.2 var(--sg-font);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-ui="v2"] .v2Pts.has { background: var(--sg-night); color: #fff3d0; animation: v2Glow 1.6s ease-in-out infinite; }
html[data-ui="v2"] .v2Pts.has em { color: #ffd75e; }
@keyframes v2Glow { 50% { box-shadow: 0 0 0 calc(4 * var(--u)) rgba(255, 207, 90, 0.55); } }
/* 数字变了跳一下：加了变绿、减了变红。 */
html[data-ui="v2"] .v2Pop { animation: v2Pop 420ms ease-out; }
html[data-ui="v2"] .v2Pop.down { animation-name: v2PopDown; }
@keyframes v2Pop { 35% { transform: scale(1.45); color: #2f9a25; } }
@keyframes v2PopDown { 35% { transform: scale(1.3); color: #c0281e; } }
/* 细条：经验金、耐久红、气力蓝、忠诚绿。名字、条、数字各占一格，只占一行细线。 */
html[data-ui="v2"] .v2Thin {
  display: grid; grid-template-columns: calc(50 * var(--u)) minmax(0, 1fr) calc(140 * var(--u));
  align-items: center; gap: calc(8 * var(--u));
}
/* 形象旁的三条细条共用一列数字：数字列至少 140，高等级的经验（八位数 / 八位数）放不下就一起变宽，三根条一样长。 */
html[data-ui="v2"] .v2Thins {
  display: grid; grid-template-columns: calc(50 * var(--u)) minmax(0, 1fr) minmax(calc(140 * var(--u)), max-content);
  column-gap: calc(8 * var(--u)); row-gap: inherit;
}
html[data-ui="v2"] .v2Thins > .v2Thin { grid-column: 1 / -1; grid-template-columns: subgrid; }
html[data-ui="v2"] .v2Thin > span { font: 800 var(--fs-xs)/1 var(--sg-font); color: var(--sg-ink-soft); }
html[data-ui="v2"] .v2Thin > em {
  text-align: right; white-space: nowrap; overflow: hidden;
  color: var(--sg-ink); font: 800 var(--fs-xs)/1 var(--sg-font); font-style: normal;
  font-variant-numeric: tabular-nums;
}
html[data-ui="v2"] .v2Meter {
  position: relative;
  height: calc(16 * var(--u));
  box-sizing: border-box;
  border: calc(2 * var(--u)) solid var(--sg-wood-dk);
  border-radius: 999px;
  background: #5a3d22;
  overflow: hidden;
}
html[data-ui="v2"] .v2Meter i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; transition: width 200ms ease-out; }
html[data-ui="v2"] .v2Thin.exp .v2Meter i { background: linear-gradient(#ffd977, #d8961a); }
html[data-ui="v2"] .v2Thin.hp .v2Meter i { background: linear-gradient(#f0745a, #b8321e); }
html[data-ui="v2"] .v2Thin.fp .v2Meter i { background: linear-gradient(#6fc0f0, #2a78c0); }
html[data-ui="v2"] .v2Thin.loyal .v2Meter i { background: linear-gradient(#8fe07a, #3c9a2e); }
/* 形象 + 名字和三条细条的那一块。屏幕高的时候形象跟着长高。 */
html[data-ui="v2"] .v2Hero { display: flex; gap: calc(12 * var(--u)); flex: 2 0 auto; min-height: calc(164 * var(--u)); max-height: calc(330 * var(--u)); }
html[data-ui="v2"] .v2Hero .v2Port { width: calc(170 * var(--u)); height: auto; align-self: stretch; }
html[data-ui="v2"] .v2Hero.pet { flex: 1 0 auto; min-height: calc(160 * var(--u)); max-height: calc(270 * var(--u)); }
html[data-ui="v2"] .v2Hero.pet .v2Port { width: calc(150 * var(--u)); }
html[data-ui="v2"] .v2HeroInfo { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: calc(10 * var(--u)); }
html[data-ui="v2"] .v2Name {
  display: flex; align-items: center; gap: calc(8 * var(--u)); min-width: 0;
  font: 900 var(--fs-l)/1.15 var(--sg-font);
}
html[data-ui="v2"] .v2Name > span:first-child { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="v2"] .v2Sub { display: flex; flex-wrap: wrap; align-items: center; gap: calc(4 * var(--u)) calc(10 * var(--u)); color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.2 var(--sg-font); }
html[data-ui="v2"] .v2Rank { color: var(--sg-ink); font-weight: 900; }
html[data-ui="v2"] .v2Chip {
  flex: none;
  padding: calc(3 * var(--u)) calc(10 * var(--u));
  border-radius: 999px;
  background: var(--sg-night); color: #ffd75e;
  font: 800 var(--fs-xs)/1.15 var(--sg-font); font-style: normal;
  white-space: nowrap;
}
html[data-ui="v2"] .v2Tag {
  flex: none;
  padding: calc(3 * var(--u)) calc(8 * var(--u));
  border-radius: 999px;
  background: #8a7a68; color: #fff;
  font: 800 var(--fs-xs)/1.1 var(--sg-font); font-style: normal;
}
html[data-ui="v2"] .v2Tag.quest { background: #c0281e; }
/* 数值小格：一行五格「名字  数」；抗性一行六格，名字在上。 */
html[data-ui="v2"] .v2Mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(6 * var(--u)); }
html[data-ui="v2"] .v2Mini + .v2Mini { margin-top: calc(6 * var(--u)); }
html[data-ui="v2"] .v2Mini.six { grid-template-columns: repeat(6, 1fr); }
html[data-ui="v2"] .v2Mini.four { grid-template-columns: repeat(4, 1fr); }
html[data-ui="v2"] .v2Mini > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: calc(4 * var(--u));
  min-width: 0;
  padding: calc(8 * var(--u)) calc(10 * var(--u));
  border: calc(2 * var(--u)) solid rgba(167, 122, 69, 0.5);
  border-radius: calc(10 * var(--u));
  background: var(--sg-paper-in);
}
html[data-ui="v2"] .v2Mini.six > div, html[data-ui="v2"] .v2Mini.four > div { flex-direction: column; align-items: center; gap: calc(2 * var(--u)); padding: calc(5 * var(--u)) calc(2 * var(--u)); }
html[data-ui="v2"] .v2Mini b { color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.1 var(--sg-font); white-space: nowrap; }
html[data-ui="v2"] .v2Mini em { display: inline-block; font: 900 var(--fs-m)/1.1 var(--sg-font); font-style: normal; font-variant-numeric: tabular-nums; }
html[data-ui="v2"] .v2Mini .v2MiniV { white-space: nowrap; }
html[data-ui="v2"] .v2Mini .v2MiniV i { margin-left: calc(2 * var(--u)); color: var(--sg-ink-soft); font: 800 var(--fs-xs)/1 var(--sg-font); font-style: normal; }
/* 角色页最下面两排小格能点（属性说明）：名字下面一道虚线提示能点，点着的那格描金边。 */
html[data-ui="v2"] .v2Mini > [data-tip] { cursor: pointer; transition: box-shadow 120ms linear, transform 80ms ease-out; }
html[data-ui="v2"] .v2Mini > [data-tip]:active { transform: scale(0.96); }
html[data-ui="v2"] .v2Mini > [data-tip] > b { text-decoration: underline dotted rgba(122, 74, 30, 0.55); text-underline-offset: calc(4 * var(--u)); }
html[data-ui="v2"] .v2Mini > [data-tip].on { border-color: var(--sg-gold-line); box-shadow: 0 0 0 calc(2 * var(--u)) var(--sg-gold), 0 0 calc(10 * var(--u)) rgba(255, 200, 80, 0.6); }
/* 属性说明卡（ui-v2-panels.js showStatTip）：挂在 #playHud 上（不被角色页裁掉），贴在点的那格下面，下面放不下才翻到上面；
   小尖角指着那一格。标题行名字 + 现在的数，一段说明（写的是服上战斗真用的算法），一行来源（暴击、闪避写清楚哪一截不算）。
   点卡、点别处、关角色页都收起；只在点开那一下量一次位置。 */
html[data-ui="v2"] #statTip {
  position: absolute; z-index: 40; left: calc(14 * var(--u)); right: calc(14 * var(--u));
  box-sizing: border-box;
  padding: calc(12 * var(--u)) calc(18 * var(--u)) calc(13 * var(--u));
  border: calc(2 * var(--u)) solid var(--sg-gold-line); border-radius: calc(14 * var(--u));
  background: linear-gradient(rgba(58, 34, 12, 0.97), rgba(30, 17, 6, 0.97));
  box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, 0.55), inset 0 calc(2 * var(--u)) 0 rgba(255, 217, 119, 0.18);
  color: #f6e2bc;
  pointer-events: auto;
  animation: statTipIn 140ms ease-out;
}
html[data-ui="v2"] #statTip[hidden] { display: none; }
@keyframes statTipIn { from { opacity: 0; transform: translateY(calc(-6 * var(--u))); } }
html[data-ui="v2"] #statTip.up { animation-name: statTipUp; }
@keyframes statTipUp { from { opacity: 0; transform: translateY(calc(6 * var(--u))); } }
html[data-ui="v2"] #statTip::before {
  content: ""; position: absolute; left: var(--ax, 50%); top: calc(-12 * var(--u)); margin-left: calc(-11 * var(--u));
  border-left: calc(11 * var(--u)) solid transparent; border-right: calc(11 * var(--u)) solid transparent;
  border-bottom: calc(11 * var(--u)) solid var(--sg-gold-line);
}
html[data-ui="v2"] #statTip.up::before { top: auto; bottom: calc(-12 * var(--u)); border-bottom: 0; border-top: calc(11 * var(--u)) solid var(--sg-gold-line); }
html[data-ui="v2"] #statTip .stHead { display: flex; align-items: baseline; gap: calc(10 * var(--u)); margin-bottom: calc(6 * var(--u)); }
html[data-ui="v2"] #statTip .stHead b { color: #ffd977; font: 900 var(--fs-m)/1.2 var(--sg-font); }
html[data-ui="v2"] #statTip .stHead em { color: #fff3d0; font: 900 var(--fs-l)/1 var(--sg-font); font-style: normal; font-variant-numeric: tabular-nums; }
html[data-ui="v2"] #statTip p { margin: 0; font: 700 var(--fs-xs)/1.55 var(--sg-font); }
html[data-ui="v2"] #statTip small {
  display: block; margin-top: calc(8 * var(--u)); padding-top: calc(7 * var(--u));
  border-top: 1px dashed rgba(255, 217, 119, 0.35);
  color: #ffd98a; font: 800 var(--fs-xs)/1.45 var(--sg-font);
}
html[data-ui="v2"] #statTip small:empty { display: none; }
/* 角色各分区纵向排开，屏幕高的时候各行一起长高（不压缩高度、9:16 也一屏放下）。 */
html[data-ui="v2"] #role.v2Panel .v2Sec { display: flex; flex-direction: column; }
html[data-ui="v2"] #role.v2Panel .v2MapSec, html[data-ui="v2"] #role.v2Panel .v2ElemSec { flex: 1 0 auto; }
/* 基础点数 ← 战斗属性（用户 2026-10-24 要左右换位）：左边一张战斗属性卡（总数大字，下面拆成点数 + 装备 + 骑宠），右边加减基础点数。
   右边加点区和四句说明里最长的那句一样宽：每行说明那格里四句叠在一起、只露自己那句，宽度取最长的，四行对齐，换字体、换屏都不用量；
   多出来的宽都给左边的卡，点数和装备、骑宠的加减写得下。加点区最多占一行的 56%（极窄的屏上说明字才省略）。 */
html[data-ui="v2"] .v2MapRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(20 * var(--u)) fit-content(56%);
  grid-template-areas: "stat arrow pts";
  column-gap: calc(8 * var(--u));
  align-items: center;
  flex: 1 0 auto; max-height: calc(118 * var(--u));
  padding: calc(3 * var(--u)) 0;
  border-bottom: calc(2 * var(--u)) dashed rgba(122, 74, 30, 0.22);
}
html[data-ui="v2"] .v2MapRow:last-child { border-bottom: 0; padding-bottom: 0; }
html[data-ui="v2"] .v2MapPts {
  grid-area: pts; align-self: stretch; min-width: 0;
  display: grid;
  grid-template-columns: max-content calc(54 * var(--u)) minmax(calc(64 * var(--u)), 1fr) calc(54 * var(--u));
  grid-template-rows: minmax(calc(46 * var(--u)), 1fr) auto;
  grid-template-areas: "name minus val plus" "hint hint hint hint";
  column-gap: calc(8 * var(--u)); row-gap: calc(2 * var(--u));
  align-items: center;
}
html[data-ui="v2"] .v2MapRow .v2AdjBtn { height: calc(46 * var(--u)); }
html[data-ui="v2"] .v2MapName { grid-area: name; font: 900 var(--fs-m)/1 var(--sg-font); white-space: nowrap; }
html[data-ui="v2"] .v2MapPts > [data-adj$="Minus"] { grid-area: minus; }
html[data-ui="v2"] .v2MapPts > [data-adj$="Plus"] { grid-area: plus; }
html[data-ui="v2"] .v2MapVal {
  grid-area: val; display: block; text-align: center;
  font: 900 var(--fs-xl)/1 var(--sg-font); font-style: normal; font-variant-numeric: tabular-nums;
}
html[data-ui="v2"] .v2MapHint {
  grid-area: hint; min-width: 0;
  display: grid; grid-template-columns: minmax(0, 1fr);
  color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.1 var(--sg-font);
  white-space: nowrap;
}
html[data-ui="v2"] .v2MapHint > span { grid-area: 1 / 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="v2"] .v2MapHint > span + span { visibility: hidden; }
html[data-ui="v2"] .v2Arrow {
  grid-area: arrow; justify-self: center;
  width: 0; height: 0;
  border-right: calc(14 * var(--u)) solid var(--sg-wood-lt);
  border-top: calc(11 * var(--u)) solid transparent; border-bottom: calc(11 * var(--u)) solid transparent;
}
html[data-ui="v2"] .v2Stat {
  grid-area: stat; align-self: stretch;
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr auto;
  align-items: center; column-gap: calc(8 * var(--u));
  box-sizing: border-box;
  padding: calc(6 * var(--u)) calc(14 * var(--u)) calc(7 * var(--u)) calc(14 * var(--u));
  border: calc(2 * var(--u)) solid rgba(167, 122, 69, 0.55);
  border-left: calc(8 * var(--u)) solid var(--st);
  border-radius: calc(12 * var(--u));
  background: linear-gradient(90deg, var(--st-bg), var(--sg-paper-in) 70%);
}
html[data-ui="v2"] .v2Stat > b { color: var(--st); font: 900 var(--fs-s)/1 var(--sg-font); white-space: nowrap; }
html[data-ui="v2"] .v2Stat > em {
  justify-self: end; display: inline-block;
  color: var(--sg-ink); font: 900 var(--fs-xl)/1 var(--sg-font); font-style: normal; font-variant-numeric: tabular-nums;
}
html[data-ui="v2"] .v2Stat > small {
  grid-column: 1 / -1; text-align: right;
  color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.15 var(--sg-font);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-ui="v2"] .v2Stat small .up { color: #2c8a22; }
html[data-ui="v2"] .v2Stat small .dn { color: #c0281e; }
html[data-ui="v2"] .v2Stat.hp { --st: #c4402a; --st-bg: rgba(196, 64, 42, 0.14); }
html[data-ui="v2"] .v2Stat.atk { --st: #c8701a; --st-bg: rgba(200, 112, 26, 0.14); }
html[data-ui="v2"] .v2Stat.def { --st: #3570b0; --st-bg: rgba(53, 112, 176, 0.14); }
html[data-ui="v2"] .v2Stat.agi { --st: #2f8a2c; --st-bg: rgba(47, 138, 44, 0.14); }
/* 骑乘（RIDE.md 5.2）：第四根细条骑宠耐久（琥珀色，点它开骑乘小卡）、「骑宠替你扛 N%」（人扛超过八成变红带「!」）、
   卡上小字的来源色块「装」「骑」、骑着时攻防敏的大字换成合算后打架真用的数（琥珀深色）。 */
html[data-ui="v2"] .v2Thin.ride[hidden] { display: none; }
html[data-ui="v2"] .v2Thin.ride { cursor: pointer; }
html[data-ui="v2"] .v2Thin.ride > span { color: #9a5a0c; font-weight: 900; }
html[data-ui="v2"] .v2Thin.ride .v2Meter i { background: linear-gradient(#ffc46b, #d9822b); }
html[data-ui="v2"] .v2Thin.ride.frozen .v2Meter i { background: linear-gradient(#cfcfcf, #8a8a8a); }
html[data-ui="v2"] .v2Thin.ride.frozen > em { color: var(--sg-ink-soft); }
html[data-ui="v2"] .v2RideShare {
  display: inline-flex; align-items: center; gap: calc(4 * var(--u));
  /* 上下负边距抵掉内边距：胶囊不把出生地那一行撑高。 */
  margin: calc(-2 * var(--u)) 0;
  padding: calc(2 * var(--u)) calc(10 * var(--u)) calc(2 * var(--u)) calc(6 * var(--u));
  border: 0; border-radius: 999px;
  background: rgba(224, 138, 30, 0.16); box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(224, 138, 30, 0.55);
  color: #9a5a0c; font: 900 var(--fs-xs)/1.2 var(--sg-font); white-space: nowrap; cursor: pointer;
}
html[data-ui="v2"] .v2RideShare[hidden] { display: none; }
html[data-ui="v2"] .v2RideShare > i {
  width: calc(20 * var(--u)); height: calc(20 * var(--u)); flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 9c0-2.5 2.2-4 4-4 .9 0 1.4.4 2 1 .6-.6 1.1-1 2-1 1.8 0 4 1.5 4 4v1H2V9zm1 2h10v1.5c0 .8-.7 1.5-1.5 1.5h-7C3.7 14 3 13.3 3 12.5V11z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 9c0-2.5 2.2-4 4-4 .9 0 1.4.4 2 1 .6-.6 1.1-1 2-1 1.8 0 4 1.5 4 4v1H2V9zm1 2h10v1.5c0 .8-.7 1.5-1.5 1.5h-7C3.7 14 3 13.3 3 12.5V11z'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-ui="v2"] .v2RideShare > em { display: none; }
html[data-ui="v2"] .v2RideShare.low { background: rgba(192, 40, 30, 0.12); box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(192, 40, 30, 0.6); color: var(--sg-bad); }
html[data-ui="v2"] .v2RideShare.low > em {
  display: inline-block; width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%;
  background: var(--sg-bad); color: #fff; font: 900 calc(16 * var(--u))/calc(22 * var(--u)) var(--sg-font); font-style: normal; text-align: center;
}
html[data-ui="v2"] .v2Src {
  display: inline-block; margin: 0 calc(2 * var(--u)) 0 calc(6 * var(--u)); padding: 0 calc(4 * var(--u));
  border-radius: calc(5 * var(--u)); color: #fff; font: 900 calc(16 * var(--u))/calc(22 * var(--u)) var(--sg-font); font-style: normal; vertical-align: 1px;
}
html[data-ui="v2"] .v2Src.gear { background: #8a5a2a; }
html[data-ui="v2"] .v2Src.ride { background: #e08a1e; }
html[data-ui="v2"] .v2HeadNote .v2Src { margin-left: calc(4 * var(--u)); }
html[data-ui="v2"] .v2Stat.rideOn > em { color: #8a4a06; }
/* 骑乘小卡：盖在角色页上（点小卡外面或「关」收起）。 */
html[data-ui="v2"] #role .v2Sheet { position: relative; }
html[data-ui="v2"] .v2RideTip {
  position: absolute; inset: 0; z-index: 30;
  display: flex; align-items: flex-start; justify-content: center;
  padding: calc(150 * var(--u)) calc(18 * var(--u)) 0;
  background: rgba(20, 12, 4, 0.42);
}
html[data-ui="v2"] .v2RideTip[hidden] { display: none; }
html[data-ui="v2"] .v2RideCard {
  width: 100%; max-width: calc(680 * var(--u)); max-height: calc(100% - 20 * var(--u)); overflow-y: auto;
  border-radius: calc(26 * var(--u)); background: linear-gradient(#fff6dc, #f3d79c);
  box-shadow: 0 0 0 calc(5 * var(--u)) var(--sg-wood-dk), inset 0 calc(4 * var(--u)) 0 var(--sg-gold-line), 0 calc(16 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, 0.55);
}
html[data-ui="v2"] .v2RideHead {
  display: flex; align-items: center; gap: calc(14 * var(--u));
  padding: calc(14 * var(--u)) calc(18 * var(--u));
  background: linear-gradient(#8a5a2c, #6b4219); color: #fbe8bd;
  border-radius: calc(26 * var(--u)) calc(26 * var(--u)) 0 0;
}
html[data-ui="v2"] .v2RideHead > b { font: 900 var(--fs-l)/1.2 var(--sg-font); }
html[data-ui="v2"] .v2RideHead > small { flex: 1; min-width: 0; color: #f2d49a; font: 700 var(--fs-xs)/1.2 var(--sg-font); }
html[data-ui="v2"] .v2RideBody { display: flex; flex-direction: column; gap: calc(10 * var(--u)); padding: calc(14 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u)); }
html[data-ui="v2"] .v2RideWho { padding: calc(10 * var(--u)) calc(14 * var(--u)); border-radius: calc(18 * var(--u)); background: #fffaf0; box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(122, 74, 30, 0.3); }
html[data-ui="v2"] .v2RideWho > b { display: block; font: 900 var(--fs-m)/1.3 var(--sg-font); }
html[data-ui="v2"] .v2RideWho > small { display: block; color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.4 var(--sg-font); }
html[data-ui="v2"] .v2RideWho .v2Meter { margin-top: calc(6 * var(--u)); }
html[data-ui="v2"] .v2RideWho .v2Meter i { background: linear-gradient(#ffc46b, #d9822b); }
html[data-ui="v2"] .v2RideFx {
  display: grid; grid-template-columns: calc(96 * var(--u)) minmax(0, 1fr) auto; align-items: center; gap: calc(10 * var(--u));
  padding: calc(8 * var(--u)) calc(14 * var(--u)); border-radius: calc(16 * var(--u)); background: #fffaf0; box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(122, 74, 30, 0.22);
}
html[data-ui="v2"] .v2RideFx > b { font: 900 var(--fs-s)/1.2 var(--sg-font); color: var(--st, var(--sg-ink)); }
html[data-ui="v2"] .v2RideFx > span { color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.4 var(--sg-font); }
html[data-ui="v2"] .v2RideFx > span i { font-style: normal; color: var(--sg-ink); font-weight: 900; }
html[data-ui="v2"] .v2RideFx > em { color: #8a4a06; font: 900 var(--fs-l)/1.2 var(--sg-font); font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
html[data-ui="v2"] .v2RideFx.split > em { font-size: var(--fs-xs); }
html[data-ui="v2"] .v2RideFx.atk { --st: #c8701a; }
html[data-ui="v2"] .v2RideFx.def { --st: #3570b0; }
html[data-ui="v2"] .v2RideFx.agi { --st: #2f8a2c; }
html[data-ui="v2"] .v2RideFx.split { --st: #9a5a0c; }
html[data-ui="v2"] .v2RideBar {
  display: block; height: calc(20 * var(--u)); margin-top: calc(6 * var(--u)); border-radius: 999px; overflow: hidden;
  background: linear-gradient(#ffc46b, #d9822b); box-shadow: 0 0 0 calc(2 * var(--u)) var(--sg-wood-dk);
}
html[data-ui="v2"] .v2RideBar > i { display: block; height: 100%; background: linear-gradient(#f0745a, #b8321e); }
html[data-ui="v2"] .v2RideWarn { margin: 0; padding: calc(10 * var(--u)) calc(14 * var(--u)); border-radius: calc(16 * var(--u)); background: rgba(192, 40, 30, 0.1); box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(192, 40, 30, 0.55); color: #8e1f15; font: 800 var(--fs-xs)/1.5 var(--sg-font); }
html[data-ui="v2"] .v2RideWarn b { color: var(--sg-bad); }
html[data-ui="v2"] .v2RideNote { margin: 0; padding: calc(10 * var(--u)) calc(14 * var(--u)); border-radius: calc(16 * var(--u)); background: rgba(58, 30, 6, 0.88); color: #ffe08a; font: 800 var(--fs-xs)/1.55 var(--sg-font); }
html[data-ui="v2"] .v2RideNote b { color: #9be27f; }
html[data-ui="v2"] .v2AdjBtn {
  height: calc(50 * var(--u));
  padding: 0;
  border: calc(3 * var(--u)) solid var(--sg-wood);
  border-radius: calc(12 * var(--u));
  background: linear-gradient(var(--sg-gold-hi), var(--sg-gold));
  color: var(--sg-ink);
  font: 900 var(--fs-l)/1 var(--sg-font);
  box-shadow: 0 calc(3 * var(--u)) 0 rgba(58, 34, 12, 0.55);
  cursor: pointer;
  touch-action: manipulation;
}
html[data-ui="v2"] .v2AdjBtn:active { transform: translateY(calc(2 * var(--u))); box-shadow: none; }
html[data-ui="v2"] .v2AdjBtn[data-adj$="Minus"] { background: var(--sg-paper); }
html[data-ui="v2"] .v2AdjBtn.off { background: var(--sg-paper-in); color: rgba(122, 90, 58, 0.45); border-color: rgba(122, 74, 30, 0.35); box-shadow: none; }
/* 四属性：彩色名字牌 − 一整条粗彩柱 数 +。 */
html[data-ui="v2"] .earth { --el: #3f9a35; --el-hi: #93e57c; --el-lo: #1d5c18; }
html[data-ui="v2"] .water { --el: #2a86d0; --el-hi: #8ed3ff; --el-lo: #124d88; }
html[data-ui="v2"] .fire { --el: #d0442a; --el-hi: #ff9c7c; --el-lo: #7c1d0f; }
html[data-ui="v2"] .wind { --el: #d6a01e; --el-hi: #ffe68c; --el-lo: #865c05; }
html[data-ui="v2"] .v2ElemTag {
  display: flex; align-items: center; justify-content: center;
  align-self: stretch;
  border-radius: calc(10 * var(--u));
  background: linear-gradient(var(--el-hi), var(--el) 55%, var(--el-lo));
  color: #fff;
  font: 900 var(--fs-m)/1 var(--sg-font);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 calc(2 * var(--u)) 0 rgba(255, 255, 255, 0.35);
}
html[data-ui="v2"] .v2Bar {
  position: relative; min-width: 0;
  box-sizing: border-box;
  border: calc(3 * var(--u)) solid var(--sg-wood-dk);
  border-radius: calc(10 * var(--u));
  background: linear-gradient(#24160a, #45301e);
  box-shadow: inset 0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
html[data-ui="v2"] .v2Bar > i {
  position: absolute; left: 0; top: 0; bottom: 0;
  overflow: hidden;
  background: linear-gradient(180deg, var(--el-hi) 0%, var(--el) 50%, var(--el-lo) 100%);
  box-shadow: inset 0 calc(3 * var(--u)) 0 rgba(255, 255, 255, 0.45), inset 0 calc(-3 * var(--u)) 0 rgba(0, 0, 0, 0.22);
  transition: width 240ms ease-out;
}
/* 一道亮光隔几秒从左扫到右（只在有点数的柱上）。 */
html[data-ui="v2"] .v2Bar.has > i::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
  background: linear-gradient(100deg, transparent 10%, rgba(255, 255, 255, 0.5) 50%, transparent 90%);
  transform: translateX(-120%);
  animation: v2Shine 3.4s ease-in-out infinite;
}
@keyframes v2Shine { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(240%); } }
/* 每 10% 一道刻线，盖在填色上。 */
html[data-ui="v2"] .v2Bar::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(18, 9, 2, 0.5) calc(10% - 2px) 10%);
}
html[data-ui="v2"] .v2Bar.full { border-color: #c98a10; box-shadow: inset 0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.6), 0 0 0 calc(2 * var(--u)) #ffcf5a; }
html[data-ui="v2"] .v2Lock {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 228, 186, 0.6); font: 800 var(--fs-xs)/1 var(--sg-font);
  pointer-events: none;
}
html[data-ui="v2"] .v2ElemRow {
  display: grid;
  grid-template-columns: calc(48 * var(--u)) calc(54 * var(--u)) minmax(0, 1fr) calc(44 * var(--u)) calc(54 * var(--u));
  grid-template-rows: minmax(calc(40 * var(--u)), 1fr);
  align-items: center; gap: calc(8 * var(--u));
  flex: 1 0 auto; max-height: calc(70 * var(--u));
  padding: calc(3 * var(--u)) 0;
}
html[data-ui="v2"] .v2ElemRow .v2Bar { align-self: stretch; min-height: calc(40 * var(--u)); }
html[data-ui="v2"] .v2ElemRow .v2AdjBtn { height: calc(44 * var(--u)); }
html[data-ui="v2"] .v2ElemRow > em {
  display: block; text-align: center;
  color: var(--sg-ink); font: 900 var(--fs-l)/1 var(--sg-font); font-style: normal; font-variant-numeric: tabular-nums;
}
/* 9:16 这类矮屏（面板高不到 1160u，量的是外面的 #playHud：面板高 = 壳高 − 底栏 248u，壳高不到 1392u）：间距和形象收一点，一屏放下；高屏照上面的铺开。 */
@container (aspect-ratio >= 720 / 1392) {
  html[data-ui="v2"] #role.v2Panel .v2Body { gap: calc(6 * var(--u)); padding-top: calc(6 * var(--u)); padding-bottom: calc(6 * var(--u)); }
  html[data-ui="v2"] #role.v2Panel .v2Hero { min-height: calc(130 * var(--u)); }
  html[data-ui="v2"] #role.v2Panel .v2HeroInfo { gap: calc(6 * var(--u)); }
  html[data-ui="v2"] #role.v2Panel .v2Sec { padding: calc(6 * var(--u)) calc(12 * var(--u)); }
  html[data-ui="v2"] #role.v2Panel .v2MapRow, html[data-ui="v2"] #role.v2Panel .v2ElemRow { padding: calc(2 * var(--u)) 0; }
  html[data-ui="v2"] #role.v2Panel .v2Mini > div { padding: calc(6 * var(--u)) calc(10 * var(--u)); }
  html[data-ui="v2"] #role.v2Panel .v2Mini.six > div, html[data-ui="v2"] #role.v2Panel .v2Mini.four > div { padding: calc(3 * var(--u)) calc(2 * var(--u)); }
  /* 三排小格（用户 2026-10-24 加了命中 / 格挡 / 伤害 / 出手那排）：矮屏改成一行「名字 数」，每排比名字在上、数在下矮约 23u，
     三排加起来和以前两排差不多高，一屏放下；高屏照旧上下排。 */
  html[data-ui="v2"] #role.v2Panel .v2Mini.six > div, html[data-ui="v2"] #role.v2Panel .v2Mini.four > div { flex-direction: row; justify-content: center; align-items: baseline; gap: calc(6 * var(--u)); }
  html[data-ui="v2"] #role.v2Panel .v2Mini + .v2Mini { margin-top: calc(4 * var(--u)); }
  /* 骑着多一根骑宠细条（约 19u）：头部行距、分区间距再收一点，余量和不骑时差不多。 */
  html[data-ui="v2"] #role.v2Panel.riding .v2Body { gap: calc(4 * var(--u)); padding-top: calc(4 * var(--u)); padding-bottom: calc(4 * var(--u)); }
  html[data-ui="v2"] #role.v2Panel.riding .v2HeroInfo { gap: calc(3 * var(--u)); }
}
/* 底部动作钮。 */
html[data-ui="v2"] .v2Acts { display: flex; gap: calc(8 * var(--u)); flex: none; }
html[data-ui="v2"] .v2Acts .sgBtn { flex: 1; min-width: 0; height: calc(52 * var(--u)); padding: 0 calc(6 * var(--u)); }
html[data-ui="v2"] .v2Acts .sgBtn.off { opacity: 0.45; }
html[data-ui="v2"] .sgBtn.danger { background: linear-gradient(#f4b7a2, #d0634a); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); }
html[data-ui="v2"] .sgHint.v2Empty { margin: auto; padding: calc(20 * var(--u)); text-align: center; }
/* 红点：有没分配的点数（导航「角色」钮）。 */
html[data-ui="v2"] #hudNav button { position: relative; }
html[data-ui="v2"] #hudNav button.dot::before {
  content: ""; position: absolute; right: calc(6 * var(--u)); top: calc(4 * var(--u));
  width: calc(14 * var(--u)); height: calc(14 * var(--u));
  border-radius: 50%;
  background: #e03a2a;
  box-shadow: 0 0 0 calc(2 * var(--u)) #fff3d0;
}

/* ---------- 背包 ---------- */
html[data-ui="v2"] #bag.v2Panel .v2BagTop { display: flex; gap: calc(12 * var(--u)); flex: none; }
html[data-ui="v2"] #bag.v2Panel .v2BagTop .v2Port { flex: 1; height: calc(256 * var(--u)); }
html[data-ui="v2"] #bag.v2Panel #bagChar {
  position: absolute; left: calc(6 * var(--u)); top: calc(6 * var(--u));
  width: calc(100% - 12 * var(--u)); height: calc(100% - 46 * var(--u));
}
html[data-ui="v2"] .v2PortName {
  position: absolute; left: 50%; bottom: calc(8 * var(--u)); z-index: 2;
  transform: translateX(-50%);
  max-width: 92%;
  padding: calc(5 * var(--u)) calc(14 * var(--u));
  border: calc(2 * var(--u)) solid var(--sg-gold-line);
  border-radius: 999px;
  background: var(--sg-night); color: #fff3d0;
  font: 800 var(--fs-xs)/1.1 var(--sg-font);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-ui="v2"] #bag.v2Panel #bagEquip {
  position: static; flex: none;
  display: grid;
  grid-template-columns: repeat(3, calc(80 * var(--u)));
  grid-template-rows: repeat(3, calc(80 * var(--u)));
  gap: calc(8 * var(--u));
}
html[data-ui="v2"] #bag.v2Panel #bagEquip button, html[data-ui="v2"] #bag.v2Panel #bagGridInner button {
  position: relative;
  width: auto; height: auto;
  padding: 0;
  box-sizing: border-box;
  border: calc(2 * var(--u)) solid #b48a55;
  border-radius: calc(12 * var(--u));
  background: radial-gradient(circle at 50% 40%, #fffaf0, #f0d9ab 70%, #e2c084);
  box-shadow: inset 0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(122, 74, 30, 0.35);
  color: rgba(122, 74, 30, 0.6);
  overflow: hidden;
  cursor: pointer;
}
html[data-ui="v2"] #bag.v2Panel #bagGridInner button { aspect-ratio: 1 / 1; }
html[data-ui="v2"] #bag.v2Panel #bagEquip .bagWord {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font: 800 var(--fs-xs)/1 var(--sg-font);
}
html[data-ui="v2"] #bag.v2Panel #bagEquip .bagItem, html[data-ui="v2"] #bag.v2Panel #bagGridInner .bagItem {
  position: absolute; left: 13%; top: 13%; width: 74%; height: 74%;
  transform: none; z-index: 1; pointer-events: none;
  image-rendering: pixelated;
}
html[data-ui="v2"] #bag.v2Panel #bagEquip button.on, html[data-ui="v2"] #bag.v2Panel #bagGridInner button.on {
  border-color: #c98a10;
  box-shadow: 0 0 0 calc(3 * var(--u)) #ffcf5a, inset 0 0 calc(10 * var(--u)) rgba(255, 207, 90, 0.8);
}
html[data-ui="v2"] #bag.v2Panel #bagGridInner .bagN {
  position: absolute; right: 6%; bottom: 3%; z-index: 2;
  color: #fff6d4; font: 900 var(--fs-s)/1 var(--sg-font);
  -webkit-text-stroke: 1px #241408; paint-order: stroke fill;
  text-shadow: 0 1px 0 #1a0e06;
  pointer-events: none;
}
html[data-ui="v2"] #bag.v2Panel #bagGridInner .bagQuest {
  position: absolute; left: 4%; top: 4%; z-index: 2;
  padding: calc(2 * var(--u)) calc(6 * var(--u));
  border-radius: calc(6 * var(--u));
  background: #c0281e; color: #fff;
  font: 800 var(--fs-xs)/1 var(--sg-font);
  pointer-events: none;
}
/* 冻结的件：右上角灰牌「冻」，图标压灰。 */
html[data-ui="v2"] #bag.v2Panel .bagFrozen {
  position: absolute; right: 4%; top: 4%; z-index: 2;
  padding: calc(2 * var(--u)) calc(6 * var(--u));
  border-radius: calc(6 * var(--u));
  background: #5f6b78; color: #fff;
  font: 800 var(--fs-xs)/1 var(--sg-font);
  pointer-events: none;
}
html[data-ui="v2"] #bag.v2Panel button:has(> .bagFrozen) .bagItem { filter: grayscale(0.85) opacity(0.7); }
/* 宝石等级牌（问题 7）：左下角实心胶囊，「Lv」小一号、数字粗体，颜色按等级（Lv1 灰绿、2 绿、3 蓝、4 紫、5 橙金带光、再往上红）；
   数量照旧在右下：白字黑描边、不带底色、字大一号。背包格子、锻造合成格、镶嵌宝石架共用。 */
html[data-ui="v2"] .sgLv {
  position: absolute; left: 4%; bottom: 4%; z-index: 2;
  display: inline-flex; align-items: baseline; gap: calc(1 * var(--u));
  padding: calc(2 * var(--u)) calc(6 * var(--u)) calc(2 * var(--u)) calc(5 * var(--u));
  border: calc(2 * var(--u)) solid rgba(24, 12, 4, 0.85); border-radius: calc(8 * var(--u));
  background: var(--lvb, #6f7a58); color: #fff;
  font: 900 var(--fs-xs)/1 var(--sg-font); font-style: normal; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
html[data-ui="v2"] .sgLv small { font-size: 0.7em; font-weight: 800; letter-spacing: -0.02em; opacity: 0.92; }
html[data-ui="v2"] .sgLv.lv1 { --lvb: linear-gradient(#a3ad8c, #6c7756); }
html[data-ui="v2"] .sgLv.lv2 { --lvb: linear-gradient(#5cc25a, #26862a); }
html[data-ui="v2"] .sgLv.lv3 { --lvb: linear-gradient(#5aa0ff, #2a5fc4); }
html[data-ui="v2"] .sgLv.lv4 { --lvb: linear-gradient(#c27cff, #7630c4); }
html[data-ui="v2"] .sgLv.lv5 { --lvb: linear-gradient(#ffdc62, #e07a10); color: #4a2306; text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6); box-shadow: 0 0 calc(7 * var(--u)) rgba(255, 190, 60, 0.9); }
html[data-ui="v2"] .sgLv.lv6 { --lvb: linear-gradient(#ff7a6a, #c0281e); }
html[data-ui="v2"] .sgQty {
  position: absolute; right: 6%; bottom: 3%; z-index: 2;
  color: #fff6d4; font: 900 var(--fs-s)/1 var(--sg-font); font-style: normal; font-variant-numeric: tabular-nums;
  -webkit-text-stroke: 1px #241408; paint-order: stroke fill;
  text-shadow: 0 1px 0 #1a0e06;
  pointer-events: none;
}
html[data-ui="v2"] .sgQty.n3, html[data-ui="v2"] #bag.v2Panel #bagGridInner .bagN.n3 { font-size: var(--fs-xs); letter-spacing: -0.02em; }
/* 装备格（问题 1）：右下强化牌「+N」（实心胶囊，分档颜色和锻造一样：+1～+3 铜灰、+4～+6 蓝、+7～+8 紫、+9 起金带光）；
   左上一条半透明小竖槽，一个孔位一颗：空孔铜边黑坑、镶了宝石的属性色珠、消失的孔位暗红一个叉，没开的不画。格子、图标大小不动。 */
html[data-ui="v2"] #bag.v2Panel .bagPlus {
  position: absolute; right: 4%; bottom: 4%; z-index: 2;
  padding: calc(2 * var(--u)) calc(7 * var(--u)) calc(2 * var(--u)) calc(6 * var(--u));
  border: calc(2 * var(--u)) solid rgba(24, 12, 4, 0.9); border-radius: 999px;
  background: linear-gradient(#a8957a, #6e5f4c); color: #fff;
  font: 900 var(--fs-xs)/1 var(--sg-font); font-style: normal; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
  box-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
html[data-ui="v2"] #bag.v2Panel .bagPlus.t2 { background: linear-gradient(#5aa0ff, #2a62c8); }
html[data-ui="v2"] #bag.v2Panel .bagPlus.t3 { background: linear-gradient(#c27cff, #7a32c8); }
html[data-ui="v2"] #bag.v2Panel .bagPlus.t4 { background: linear-gradient(#ffe066, #e07a10); color: #4a2306; text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6); box-shadow: 0 0 calc(7 * var(--u)) rgba(255, 184, 60, 0.95); }
html[data-ui="v2"] #bag.v2Panel .bagHoles {
  position: absolute; left: 4%; top: 4%; z-index: 2;
  display: flex; flex-direction: column; gap: calc(2 * var(--u));
  padding: calc(2 * var(--u));
  border-radius: 999px;
  background: rgba(24, 12, 4, 0.58);
  pointer-events: none;
}
html[data-ui="v2"] #bag.v2Panel .bagHoles i { display: block; box-sizing: border-box; width: calc(13 * var(--u)); height: calc(13 * var(--u)); border-radius: 50%; }
html[data-ui="v2"] #bag.v2Panel .bagHoles i.o { border: calc(2 * var(--u)) solid #e0b46a; background: radial-gradient(circle at 50% 42%, #3a2410, #050201 72%); }
html[data-ui="v2"] #bag.v2Panel .bagHoles i.g {
  background: radial-gradient(circle at 34% 30%, #fff 0 16%, rgb(var(--sc)) 50%, rgba(0, 0, 0, 0.55) 100%);
  box-shadow: 0 0 calc(4 * var(--u)) rgba(var(--sc), 0.95), 0 0 0 calc(1 * var(--u)) rgba(255, 255, 255, 0.45);
}
html[data-ui="v2"] #bag.v2Panel .bagHoles i.x {
  border: calc(1 * var(--u)) solid #a8321c;
  background:
    linear-gradient(45deg, transparent 38%, #ff6a4e 38% 62%, transparent 62%),
    linear-gradient(-45deg, transparent 38%, #ff6a4e 38% 62%, transparent 62%),
    #2a0a06;
}
html[data-ui="v2"] #bag.v2Panel #bagTabs { position: static; z-index: auto; width: auto; }
html[data-ui="v2"] #bag.v2Panel #bagGrid {
  position: relative; left: auto; top: auto;
  display: block; flex: 1; min-height: calc(120 * var(--u));
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: none;
  box-sizing: border-box;
  padding: calc(8 * var(--u));
  border-radius: calc(14 * var(--u));
  background: rgba(90, 60, 30, 0.12);
  box-shadow: inset 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(90, 50, 10, 0.3);
}
html[data-ui="v2"] #bag.v2Panel #bagGridInner { display: grid; width: 100%; }
/* 说明卡比格子多占一行高（用户 2026-10-14：格子少显示一行，说明高一点，装备要看得到强化和孔）。
   高度固定（POLISH.md 3.2）：选不同的道具说明卡不变高，格子不跟着跳；放不下的说明在下面截短、点一下展开。 */
html[data-ui="v2"] #bag.v2Panel .v2BagInfo {
  flex: none;
  height: calc(272 * var(--u));
  box-sizing: border-box;
  display: flex; flex-direction: column; gap: calc(8 * var(--u));
  padding: calc(10 * var(--u));
  border: calc(2 * var(--u)) solid rgba(122, 74, 30, 0.35);
  border-radius: calc(14 * var(--u));
  background: rgba(255, 246, 220, 0.7);
}
html[data-ui="v2"] #bag.v2Panel .v2InfoTop { flex: 1 1 auto; min-height: 0; display: flex; align-items: flex-start; gap: calc(10 * var(--u)); }
html[data-ui="v2"] #bag.v2Panel #bagIcon {
  position: relative; flex: none;
  width: calc(76 * var(--u)); height: calc(76 * var(--u));
  box-sizing: border-box;
  border: calc(2 * var(--u)) solid #b48a55; border-radius: calc(12 * var(--u));
  background: radial-gradient(circle at 50% 40%, #fffaf0, #f0d9ab 70%, #e2c084);
}
html[data-ui="v2"] #bag.v2Panel #bagIcon canvas { position: absolute; left: 6%; top: 6%; width: 88%; height: 88%; image-rendering: pixelated; }
html[data-ui="v2"] #bag.v2Panel .v2InfoText { flex: 1; min-width: 0; min-height: 0; align-self: stretch; display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
html[data-ui="v2"] #bag.v2Panel .v2InfoLine { flex: none; display: flex; align-items: center; gap: calc(8 * var(--u)); min-width: 0; height: calc(34 * var(--u)); }
html[data-ui="v2"] #bag.v2Panel [data-label="bagName"] {
  flex: 0 1 auto; min-width: 0;
  font: 900 var(--fs-m)/1.2 var(--sg-font);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-ui="v2"] #bag.v2Panel.noPick [data-label="bagName"] { color: var(--sg-ink-soft); }
html[data-ui="v2"] #bag.v2Panel .v2Qty { flex: none; color: var(--sg-ink-soft); font: 800 var(--fs-xs)/1 var(--sg-font); }
html[data-ui="v2"] #bag.v2Panel .v2Type:not(:empty) {
  flex: none;
  padding: calc(3 * var(--u)) calc(10 * var(--u));
  border-radius: 999px;
  background: rgba(122, 74, 30, 0.15);
  color: var(--sg-ink);
  font: 800 var(--fs-xs)/1.1 var(--sg-font);
}
/* 强化 / 镶嵌（装备）、合成（宝石）和使用丢弃排在同一行。 */
html[data-ui="v2"] #bag.v2Panel #bagForge { position: static; display: contents; }
html[data-ui="v2"] #bag.v2Panel #bagForge button {
  flex: 1; min-width: 0; height: calc(52 * var(--u));
  border: calc(3 * var(--u)) solid var(--sg-wood); border-radius: calc(12 * var(--u));
  background: linear-gradient(#bfe7f0, #4fa9c4); color: #12333c;
  font: 900 var(--fs-m)/1 var(--sg-font);
  box-shadow: 0 calc(3 * var(--u)) 0 rgba(58, 34, 12, 0.55);
  cursor: pointer;
}
/* 装备说明（POLISH.md 3.2）：名字后一枚强化胶囊（分档颜色同格子）和「穿戴中」绿签；下面一排属性块（按属性合计，和锻造面板同一种），
   再一排孔位：一个孔位一格（坑里宝石图标 / 空坑 / 裂开的叉 / 虚线圈）+ 一行字。 */
html[data-ui="v2"] #bag.v2Panel .v2NamePlus {
  flex: none;
  padding: calc(3 * var(--u)) calc(10 * var(--u));
  border: calc(2 * var(--u)) solid rgba(24, 12, 4, 0.85); border-radius: 999px;
  background: linear-gradient(#a8957a, #6e5f4c); color: #fff;
  font: 900 var(--fs-s)/1 var(--sg-font); font-style: normal;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
html[data-ui="v2"] #bag.v2Panel .v2NamePlus.t2 { background: linear-gradient(#5aa0ff, #2a62c8); }
html[data-ui="v2"] #bag.v2Panel .v2NamePlus.t3 { background: linear-gradient(#c27cff, #7a32c8); }
html[data-ui="v2"] #bag.v2Panel .v2NamePlus.t4 { background: linear-gradient(#ffe066, #e07a10); color: #4a2306; text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6); box-shadow: 0 0 calc(8 * var(--u)) rgba(255, 184, 60, 0.85); }
html[data-ui="v2"] #bag.v2Panel .v2Worn {
  flex: none;
  padding: calc(3 * var(--u)) calc(10 * var(--u));
  border-radius: 999px;
  background: rgba(47, 122, 37, 0.16); color: var(--sg-ok);
  font: 800 var(--fs-xs)/1.1 var(--sg-font);
}
html[data-ui="v2"] #bag.v2Panel .v2GearInfo { flex: none; display: flex; flex-direction: column; gap: calc(6 * var(--u)); min-width: 0; }
html[data-ui="v2"] #bag.v2Panel .v2GiStats { display: flex; gap: calc(6 * var(--u)); min-width: 0; overflow: hidden; }
html[data-ui="v2"] #bag.v2Panel .v2GiStat {
  flex: 0 1 auto; min-width: 0;
  display: flex; align-items: center; gap: calc(6 * var(--u));
  padding: calc(4 * var(--u)) calc(12 * var(--u)) calc(4 * var(--u)) calc(7 * var(--u));
  border: calc(2 * var(--u)) solid rgba(var(--sc), 0.5); border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--sc), 0.22), rgba(255, 252, 240, 0.75) 75%);
}
html[data-ui="v2"] #bag.v2Panel .v2GiStat i {
  flex: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0 14%, rgb(var(--sc)) 46%, rgba(0, 0, 0, 0.55) 100%);
}
html[data-ui="v2"] #bag.v2Panel .v2GiStat b { min-width: 0; color: var(--sg-ink); font: 800 var(--fs-xs)/1.2 var(--sg-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="v2"] #bag.v2Panel .v2GiStat em {
  flex: none; color: var(--sg-ink); color: color-mix(in srgb, rgb(var(--sc)) 72%, #000);
  font: 900 var(--fs-s)/1 var(--sg-font); font-style: normal; font-variant-numeric: tabular-nums;
}
html[data-ui="v2"] #bag.v2Panel .v2GiNone { padding: calc(4 * var(--u)) 0; color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.4 var(--sg-font); }
html[data-ui="v2"] #bag.v2Panel .v2GiSlots { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: calc(6 * var(--u)); }
html[data-ui="v2"] #bag.v2Panel .v2Slot {
  min-width: 0; box-sizing: border-box;
  display: flex; align-items: center; gap: calc(6 * var(--u));
  padding: calc(3 * var(--u)) calc(8 * var(--u)) calc(3 * var(--u)) calc(3 * var(--u));
  border-radius: 999px;
  background: rgba(58, 34, 12, 0.1);
}
html[data-ui="v2"] #bag.v2Panel .v2Slot b { min-width: 0; color: var(--sg-ink-soft); font: 800 var(--fs-xs)/1.2 var(--sg-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="v2"] #bag.v2Panel .v2Pit {
  position: relative; flex: none; box-sizing: border-box;
  width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: 50%;
  border: calc(2 * var(--u)) solid #8a5a2a;
  background: radial-gradient(circle at 50% 42%, #3a2410, #0a0502 72%);
  box-shadow: inset 0 calc(2 * var(--u)) calc(4 * var(--u)) #000;
}
html[data-ui="v2"] #bag.v2Panel .v2Pit img { position: absolute; inset: 10%; width: 80%; height: 80%; image-rendering: pixelated; object-fit: contain; }
html[data-ui="v2"] #bag.v2Panel .v2Slot.k-gem { background: rgba(var(--sc), 0.14); }
html[data-ui="v2"] #bag.v2Panel .v2Slot.k-gem .v2Pit { border-color: rgb(var(--sc)); background: radial-gradient(circle, rgba(var(--sc), 0.45), #0a1416 74%); box-shadow: 0 0 calc(6 * var(--u)) rgba(var(--sc), 0.7); }
html[data-ui="v2"] #bag.v2Panel .v2Slot.k-gem b { color: var(--sg-ink); color: color-mix(in srgb, rgb(var(--sc)) 70%, #000); font-weight: 900; }
html[data-ui="v2"] #bag.v2Panel .v2Slot.k-empty b { color: var(--sg-ink); }
html[data-ui="v2"] #bag.v2Panel .v2Slot.k-gone { background: rgba(192, 40, 30, 0.09); }
html[data-ui="v2"] #bag.v2Panel .v2Slot.k-gone .v2Pit {
  border-color: #8a2a1a;
  background:
    linear-gradient(45deg, transparent 40%, #ff6a4e 40% 56%, transparent 56%),
    linear-gradient(-45deg, transparent 40%, #ff6a4e 40% 56%, transparent 56%),
    #2a0a06;
}
html[data-ui="v2"] #bag.v2Panel .v2Slot.k-gone b { color: var(--sg-bad); }
html[data-ui="v2"] #bag.v2Panel .v2Slot.k-lock .v2Pit { border-style: dashed; border-color: rgba(122, 74, 30, 0.45); background: rgba(122, 74, 30, 0.08); box-shadow: none; }
html[data-ui="v2"] #bag.v2Panel .v2Slot.k-lock b { color: rgba(122, 90, 58, 0.6); }
html[data-ui="v2"] #bag.v2Panel .v2GiFrozen {
  margin: 0;
  padding: calc(4 * var(--u)) calc(10 * var(--u));
  border-radius: calc(8 * var(--u));
  background: rgba(95, 107, 120, 0.16); color: #46525e;
  font: 800 var(--fs-xs)/1.2 var(--sg-font);
}
html[data-ui="v2"] #bag.v2Panel .v2GemInfo { flex: none; display: flex; align-items: center; gap: calc(8 * var(--u)); min-width: 0; font: 800 var(--fs-xs)/1.2 var(--sg-font); }
html[data-ui="v2"] #bag.v2Panel .v2GemInfo .sgLv { position: static; flex: none; }
html[data-ui="v2"] #bag.v2Panel .v2GemInfo b { flex: none; color: var(--sg-ink); color: color-mix(in srgb, rgb(var(--sc)) 72%, #000); font: 900 var(--fs-s)/1.2 var(--sg-font); }
html[data-ui="v2"] #bag.v2Panel .v2GemInfo span { min-width: 0; color: var(--sg-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 说明最多四行（装备两行，上面有属性和孔位），点一下展开全文。 */
html[data-ui="v2"] #bag.v2Panel #bagAttr {
  position: static; min-height: 0;
  color: #3a2a18;
  font: 700 var(--fs-xs)/1.45 var(--sg-font);
  cursor: pointer;
}
html[data-ui="v2"] #bag.v2Panel #bagAttr .bagAttrText {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
  overflow: hidden; white-space: pre-wrap;
}
html[data-ui="v2"] #bag.v2Panel.isGear #bagAttr .bagAttrText { -webkit-line-clamp: 2; color: var(--sg-ink-soft); }
html[data-ui="v2"] #bag.v2Panel #bagAttr.open { flex: 1 1 0; display: flex; flex-direction: column; }
html[data-ui="v2"] #bag.v2Panel #bagAttr.open .bagAttrText { display: block; flex: 1 1 0; min-height: 0; max-height: none; overflow-y: auto; color: #3a2a18; }
html[data-ui="v2"] #bag.v2Panel .v2InfoText:has(#bagAttr.open) > .v2GearInfo,
html[data-ui="v2"] #bag.v2Panel .v2InfoText:has(#bagAttr.open) > .v2GemInfo { display: none; }
html[data-ui="v2"] #bag.v2Panel.noPick #bagAttr { color: var(--sg-ink-soft); }
html[data-ui="v2"] #bag.v2Panel.noPick .v2Acts { opacity: 0.45; }

/* ---------- 宠物 ---------- */
/* 上：宠物列表（大卡片，按住鼠标左右拖 / 滚轮 / 手指滑）。中：形象、名字和细条、状态四选一。
   下：分页 属性面板 / 技能，分页体固定高度（放不下就在里面滚），换宠物、换分页整块不跳。 */
html[data-ui="v2"] #pet.v2Panel .v2Body { gap: calc(8 * var(--u)); }
html[data-ui="v2"] #pet.v2Panel .v2PetStrip {
  flex: none;
  display: flex; gap: calc(10 * var(--u));
  overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain; touch-action: pan-x;
  padding: calc(6 * var(--u)) calc(4 * var(--u)) calc(16 * var(--u));
  cursor: grab;
}
html[data-ui="v2"] #pet.v2Panel .v2PetStrip.sgDragging { cursor: grabbing; }
html[data-ui="v2"] .v2PetCard {
  position: relative; flex: 0 0 calc(150 * var(--u));
  height: calc(178 * var(--u));
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: calc(2 * var(--u));
  padding: calc(6 * var(--u)) calc(6 * var(--u)) calc(8 * var(--u));
  box-sizing: border-box;
  border: calc(3 * var(--u)) solid rgba(167, 122, 69, 0.7);
  border-radius: calc(14 * var(--u));
  background:
    radial-gradient(ellipse 40% 8% at 50% 66%, rgba(90, 50, 10, 0.28), transparent 100%),
    radial-gradient(ellipse at 50% 34%, #fffaf0, #f0d9ab 72%);
  color: var(--sg-ink);
  cursor: pointer;
}
html[data-ui="v2"] .v2PetCard.on { border-color: #c98a10; box-shadow: 0 0 0 calc(3 * var(--u)) #ffcf5a; background: radial-gradient(ellipse 40% 8% at 50% 66%, rgba(90, 50, 10, 0.28), transparent 100%), radial-gradient(ellipse at 50% 34%, #fffdf6, #f8e3b4 72%); }
html[data-ui="v2"] .v2PetCard canvas { flex: 1 1 auto; min-height: 0; width: 100%; image-rendering: pixelated; pointer-events: none; }
html[data-ui="v2"] .v2PetCard b { flex: none; max-width: 100%; font: 900 var(--fs-xs)/1.2 var(--sg-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="v2"] .v2PetCard span { flex: none; color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.1 var(--sg-font); }
html[data-ui="v2"] .v2PetCard .v2Tag { position: absolute; left: calc(4 * var(--u)); top: calc(4 * var(--u)); padding: calc(2 * var(--u)) calc(6 * var(--u)); }
/* 宠物不到一排（4 张）时后面补的空栏：和宠物卡一样大，虚线框、一枚淡爪印，名字那行写「空栏」，点了没反应。 */
html[data-ui="v2"] .v2PetCard.slot { border-style: dashed; border-color: rgba(122, 74, 30, 0.35); background: rgba(255, 243, 214, 0.4); }
html[data-ui="v2"] .v2PetCard.slot i { flex: 1 1 auto; align-self: stretch; min-height: 0; background: var(--sg-paw) center / calc(64 * var(--u)) no-repeat; }
html[data-ui="v2"] .v2PetCard.slot b { color: rgba(122, 90, 58, 0.55); font-weight: 800; }
html[data-ui="v2"] .v2St {
  position: absolute; right: calc(4 * var(--u)); top: calc(4 * var(--u));
  padding: calc(2 * var(--u)) calc(6 * var(--u));
  border-radius: 999px;
  font: 800 var(--fs-xs)/1.1 var(--sg-font); font-style: normal;
  color: #fff; background: #8a7a68;
}
html[data-ui="v2"] .v2St.st1 { background: #2a78c0; }
html[data-ui="v2"] .v2St.st2 { background: #1f9a8a; }
html[data-ui="v2"] .v2St.st3 { background: #c0281e; }
html[data-ui="v2"] #pet.v2Panel .v2PetDetail { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: calc(8 * var(--u)); touch-action: pan-y; }
/* 形象框是正方形：9:16 时 196，屏幕比 9:16 每高出 3 单位长 1 单位，最大 280（多出的高度大半还是给下面的分页体）。只看屏幕高，不看内容，换宠物、换分页不跳。 */
html[data-ui="v2"] #pet.v2Panel { --petHero: clamp(calc(196 * var(--u)), calc(196 * var(--u) + (100cqh - 1280 * var(--u)) / 3), calc(280 * var(--u))); }
html[data-ui="v2"] #pet.v2Panel .v2Hero.pet { flex: none; height: var(--petHero); min-height: 0; max-height: none; }
html[data-ui="v2"] #pet.v2Panel .v2Hero.pet .v2Port { width: var(--petHero); }
html[data-ui="v2"] #pet.v2Panel .v2Port.pet { cursor: pointer; }
html[data-ui="v2"] #pet.v2Panel .petFaceBig {
  position: absolute; left: calc(6 * var(--u)); top: calc(6 * var(--u));
  width: calc(100% - 12 * var(--u)); height: calc(100% - 34 * var(--u));
  background: none; z-index: 1; pointer-events: auto;
}
html[data-ui="v2"] .v2Turn {
  position: absolute; left: 0; right: 0; bottom: calc(6 * var(--u));
  text-align: center; color: var(--sg-ink-soft);
  font: 700 var(--fs-xs)/1 var(--sg-font); font-style: normal;
  white-space: nowrap;
  pointer-events: none;
}
html[data-ui="v2"] #pet.v2Panel .v2HeroInfo { gap: calc(8 * var(--u)); }
html[data-ui="v2"] .v2Drop { margin-left: auto; flex: none; height: calc(40 * var(--u)); padding: 0 calc(14 * var(--u)); font-size: var(--fs-xs); }
html[data-ui="v2"] .v2PetSt { display: grid; grid-template-columns: repeat(4, 1fr); flex: none; }
html[data-ui="v2"] .v2PetSt button { min-width: 0; height: calc(50 * var(--u)); }
html[data-ui="v2"] .v2PetSt button.off { color: rgba(122, 90, 58, 0.4); }
/* 下方分页：属性面板 / 技能。分页体高度固定，内容放不下在里面滚，不撑高面板。 */
html[data-ui="v2"] .v2PetTab { flex: 1 1 auto; min-height: calc(330 * var(--u)); display: flex; flex-direction: column; gap: calc(8 * var(--u)); padding: calc(10 * var(--u)); }
html[data-ui="v2"] .v2TabBody { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding-right: max(10px, calc(20 * var(--u))); }
html[data-ui="v2"] .v2TabBody .sgHint { margin: calc(10 * var(--u)) 0 0; text-align: center; }
/* 属性面板一屏放下、不出滚动条，右边不用给条留宽，两列左右对称。 */
html[data-ui="v2"] .v2TabBody[data-tab="attr"] { display: flex; flex-direction: column; padding-right: 0; }
html[data-ui="v2"] .v2Total {
  padding: calc(4 * var(--u)) calc(14 * var(--u));
  border: calc(2 * var(--u)) solid var(--sg-gold-line);
  border-radius: 999px;
  background: var(--sg-night); color: #fff3d0;
  font: 800 var(--fs-xs)/1.1 var(--sg-font);
  white-space: nowrap;
}
html[data-ui="v2"] .v2Total em { color: #ffd75e; font: 900 var(--fs-m)/1 var(--sg-font); font-style: normal; font-variant-numeric: tabular-nums; }
/* 属性面板：两列四行铺满分页体，八张卡一样的边、圆角、间距，一行两张同高。
   左列战斗属性卡：上一行名字、每级成长；下一行现值，箭头指到 140 级推算（正好落在每级成长下面）；总成长在左列头上。
   右列地水火风竖排：名字牌和数一行，下面彩柱。左列是主角（彩色左边、底色），右列只有名字牌和柱子带色，不抢。
   矮屏战斗中（标题下多一行说明）放不下时格子不压扁，在分页体里滚。 */
html[data-ui="v2"] .v2PetAttr {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
  grid-template-rows: auto repeat(4, minmax(min-content, 1fr));
  gap: calc(6 * var(--u)) calc(12 * var(--u));
  /* 行高 1 的大字，字体的上下留白会伸出卡外一两像素，不裁掉分页体就以为放不下、出滚动条。 */
  overflow: clip;
}
html[data-ui="v2"] .v2PetAttr .v2SecHead { margin: 0; min-width: 0; }
html[data-ui="v2"] .v2PetAttr .v2Total { padding-top: calc(2 * var(--u)); padding-bottom: calc(2 * var(--u)); }
html[data-ui="v2"] .v2Stat.v2PaStat {
  grid-area: auto; min-width: 0;
  grid-template-columns: auto minmax(calc(30 * var(--u)), 1fr) auto;
  grid-template-rows: auto auto;
  grid-template-areas: "name name rate" "val arw at";
  align-content: space-evenly;
  column-gap: calc(12 * var(--u)); row-gap: 0;
  padding: calc(1 * var(--u)) calc(14 * var(--u)) calc(1 * var(--u)) calc(12 * var(--u));
}
html[data-ui="v2"] .v2Stat.v2PaStat > b { grid-area: name; }
html[data-ui="v2"] .v2Stat.v2PaStat > small { grid-area: rate; justify-self: end; line-height: 1; }
html[data-ui="v2"] .v2Stat.v2PaStat > em { grid-area: val; justify-self: start; }
html[data-ui="v2"] .v2PaStat .rate { margin-left: calc(6 * var(--u)); color: var(--st); font: 900 var(--fs-s)/1 var(--sg-font); font-variant-numeric: tabular-nums; }
/* 箭头从现值指向 140 级，越往右颜色越实。 */
html[data-ui="v2"] .v2Arw {
  grid-area: arw; position: relative; align-self: center;
  height: calc(4 * var(--u)); margin-right: calc(12 * var(--u));
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(122, 74, 30, 0.12), var(--st));
}
html[data-ui="v2"] .v2Arw::after {
  content: ""; position: absolute; right: calc(-12 * var(--u)); top: 50%;
  transform: translateY(-50%);
  border-left: calc(14 * var(--u)) solid var(--st);
  border-top: calc(9 * var(--u)) solid transparent; border-bottom: calc(9 * var(--u)) solid transparent;
}
html[data-ui="v2"] .v2At {
  grid-area: at; justify-self: end; align-self: center; white-space: nowrap;
  color: var(--sg-ink-soft); font: 800 var(--fs-xs)/1 var(--sg-font);
}
html[data-ui="v2"] .v2At strong {
  margin-left: calc(6 * var(--u)); color: var(--st);
  font: 900 var(--fs-l)/1 var(--sg-font); font-variant-numeric: tabular-nums;
}
html[data-ui="v2"] .v2PaElem {
  min-width: 0; box-sizing: border-box;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas: "tag val" "bar bar";
  align-content: space-evenly; align-items: center;
  row-gap: calc(4 * var(--u));
  padding: calc(1 * var(--u)) calc(12 * var(--u));
  border: calc(2 * var(--u)) solid rgba(167, 122, 69, 0.55);
  border-radius: calc(12 * var(--u));
  background: var(--sg-paper-in);
}
html[data-ui="v2"] .v2PaElem .v2ElemTag { grid-area: tag; align-self: center; width: calc(40 * var(--u)); height: calc(30 * var(--u)); font-size: var(--fs-s); border-radius: calc(8 * var(--u)); }
html[data-ui="v2"] .v2PaElem > em { grid-area: val; justify-self: end; color: var(--sg-ink); font: 900 var(--fs-l)/1 var(--sg-font); font-style: normal; font-variant-numeric: tabular-nums; }
html[data-ui="v2"] .v2PaElem .v2Bar { grid-area: bar; height: calc(24 * var(--u)); border-width: calc(2 * var(--u)); border-radius: calc(8 * var(--u)); }
html[data-ui="v2"] .v2SkillGrid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8 * var(--u)); }
html[data-ui="v2"] .v2SkillCard {
  display: flex; flex-direction: column; gap: calc(4 * var(--u)); min-width: 0;
  min-height: calc(76 * var(--u));
  padding: calc(8 * var(--u)) calc(12 * var(--u));
  box-sizing: border-box;
  border: calc(2 * var(--u)) solid var(--sg-gold-line);
  border-radius: calc(12 * var(--u));
  background: var(--sg-paper-in);
}
html[data-ui="v2"] .v2SkillCard b { color: var(--sg-ink); font: 900 var(--fs-s)/1.1 var(--sg-font); }
html[data-ui="v2"] .v2SkillCard span {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.3 var(--sg-font);
}
html[data-ui="v2"] .v2SkillCard span:empty { display: none; }
html[data-ui="v2"] .v2SkillCard.empty { justify-content: center; border-style: dashed; border-color: rgba(122, 74, 30, 0.35); background: transparent; }
html[data-ui="v2"] .v2SkillCard.empty b { color: rgba(122, 90, 58, 0.5); font-weight: 800; }

/* ---------- 邮件：一封一行，种类色块 + 数量 + 寄来的时间，下面全部领取 ---------- */
html[data-ui="v2"] .v2MailList { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
html[data-ui="v2"] .v2MailRow {
  display: flex; align-items: center; gap: calc(12 * var(--u));
  padding: calc(10 * var(--u)) calc(14 * var(--u));
  border: calc(2 * var(--u)) solid rgba(167, 122, 69, 0.55);
  border-radius: calc(12 * var(--u));
  background: var(--sg-paper-in);
}
html[data-ui="v2"] .v2MailIcon {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: calc(64 * var(--u)); height: calc(64 * var(--u));
  border-radius: calc(12 * var(--u));
  color: #fff; font: 900 var(--fs-s)/1 var(--sg-font); font-style: normal;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  background: linear-gradient(#ffd977, #c8901a);
}
html[data-ui="v2"] .v2MailRow.stone .v2MailIcon { background: linear-gradient(#cfc9bd, #7d776c); }
html[data-ui="v2"] .v2MailRow.bone .v2MailIcon { background: linear-gradient(#f6eedc, #b8a98a); color: #4a2c12; text-shadow: none; }
html[data-ui="v2"] .v2MailText { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
html[data-ui="v2"] .v2MailText b { font: 900 var(--fs-m)/1.15 var(--sg-font); }
html[data-ui="v2"] .v2MailText em { font: 700 var(--fs-s)/1.3 var(--sg-font); font-style: normal; color: var(--sg-ink); word-break: break-all; }
html[data-ui="v2"] .v2MailRow.gift .v2MailIcon { background: linear-gradient(#c07ce0, #7d3c9a); }
html[data-ui="v2"] .v2MailText span { color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.2 var(--sg-font); }
html[data-ui="v2"] .v2Mail .v2Acts .sgBtn.off { opacity: 0.45; }

/* ---------- 对话框（NPC 对话、任务、传送、拦路问话，view.js showWN 填字）：纸卡、木纹标题条，正文可滚，按钮一行 ---------- */
html[data-ui="v2"] #wn {
  position: absolute; inset: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--topH) + 16 * var(--u)) calc(24 * var(--u)) calc(var(--botH) + 16 * var(--u));
  box-sizing: border-box;
  cursor: default;
}
html[data-ui="v2"] #wnDim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); }
html[data-ui="v2"] #wnBoard {
  position: relative;
  width: 100%; max-width: calc(660 * var(--u));
  min-height: calc(460 * var(--u)); max-height: 100%;
  box-sizing: border-box;
  display: flex; flex-direction: column;
  background: var(--paper-bg);
  border: var(--bw) solid var(--sg-wood);
  border-radius: var(--r);
  box-shadow: 0 0 0 calc(3 * var(--u)) var(--sg-gold-line), 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, 0.55);
  color: var(--sg-ink);
  font: 700 var(--fs-m)/1.35 var(--sg-font);
  overflow: hidden;
  transform-origin: 50% 50%;
}
html[data-ui="v2"] #wnBoard[data-h="tall"] { min-height: calc(760 * var(--u)); }
html[data-ui="v2"] #wnBoard.wnGrow { animation: wnGrow var(--wn-grow-ms, 333ms) steps(10, end) both; }
html[data-ui="v2"] #wnBoard.wnGrow > * { opacity: 0; }
@keyframes wnGrow {
  from { transform: scale(0.04); }
  to { transform: scale(1); }
}
html[data-ui="v2"] #wnHead {
  flex: none;
  display: flex; align-items: center; gap: calc(12 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u)) calc(20 * var(--u));
  background: var(--wood-bar);
  box-shadow: inset 0 calc(-3 * var(--u)) 0 var(--sg-wood-dk);
}
html[data-ui="v2"] #wnTitle {
  flex: 1; min-width: 0;
  color: var(--sg-paper-hi);
  font: 900 var(--fs-l)/1.2 var(--sg-font);
  text-shadow: 0 1px 0 #2a1606;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-ui="v2"] #wnChip {
  flex: none;
  padding: calc(6 * var(--u)) calc(16 * var(--u));
  border: calc(2 * var(--u)) solid var(--sg-gold-line);
  border-radius: 999px;
  background: var(--sg-night); color: #fff3d0;
  font: 800 var(--fs-xs)/1 var(--sg-font);
  white-space: nowrap;
}
html[data-ui="v2"] #wnClose {
  flex: none;
  width: calc(56 * var(--u)); height: calc(44 * var(--u)); padding: 0;
  border: calc(3 * var(--u)) solid var(--sg-wood-dk);
  border-radius: calc(10 * var(--u));
  background: var(--sg-paper); color: var(--sg-ink);
  font: 900 var(--fs-m)/1 var(--sg-font);
  cursor: pointer;
  transition: transform 120ms ease-out;
}
html[data-ui="v2"] #wnClose::after { content: "关"; }
html[data-ui="v2"] #wnWell {
  flex: 1 1 auto; min-height: 0;
  padding: calc(18 * var(--u)) calc(26 * var(--u));
  overflow-y: auto; overscroll-behavior: contain;
  font: 700 var(--fs-m)/1.7 var(--sg-font);
}
html[data-ui="v2"] .wnBody { white-space: pre-wrap; }
html[data-ui="v2"] .wnChoice {
  display: block; width: 100%;
  margin-top: calc(10 * var(--u));
  padding: calc(14 * var(--u)) calc(18 * var(--u));
  box-sizing: border-box;
  border: calc(3 * var(--u)) solid var(--sg-wood);
  border-radius: calc(12 * var(--u));
  background: var(--sg-paper-in); color: var(--sg-ink);
  font: 800 var(--fs-m)/1.3 var(--sg-font);
  text-align: left;
  box-shadow: 0 calc(3 * var(--u)) 0 rgba(58, 34, 12, 0.45);
  cursor: pointer;
  transition: transform 120ms ease-out;
}
html[data-ui="v2"] .wnChoice::before { content: "▸ "; color: var(--sg-wood-lt); }
/* 任选一：正文下面一块虚线金框，「任选一样奖励」小标题，一排格子（两到四样等分），点一格描金、打勾，下面一行写它的说明。 */
html[data-ui="v2"] .wnPick {
  margin-top: calc(14 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
  border: calc(2 * var(--u)) dashed var(--sg-gold-line);
  border-radius: calc(14 * var(--u));
  background: rgba(255, 249, 230, 0.7);
}
html[data-ui="v2"] .wnPickHead {
  display: flex; align-items: center; gap: calc(8 * var(--u));
  margin-bottom: calc(8 * var(--u));
  color: #9a6214; font: 900 var(--fs-s)/1 var(--sg-font); letter-spacing: 0.1em;
}
html[data-ui="v2"] .wnPickHead::after { content: ""; flex: 1; height: calc(2 * var(--u)); border-radius: 999px; background: linear-gradient(90deg, rgba(167, 122, 69, 0.55), transparent); }
html[data-ui="v2"] .wnPickRow { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: calc(10 * var(--u)); }
html[data-ui="v2"] .wnPickRow[data-n="2"] { --n: 2; }
html[data-ui="v2"] .wnPickRow[data-n="3"] { --n: 3; }
html[data-ui="v2"] .wnPickRow[data-n="4"] { --n: 4; }
html[data-ui="v2"] .wnPickTile {
  position: relative; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u));
  padding: calc(8 * var(--u)) calc(4 * var(--u)) calc(8 * var(--u));
  border: calc(3 * var(--u)) solid var(--sg-gold-line);
  border-radius: calc(12 * var(--u));
  background: radial-gradient(circle at 50% 30%, #fffdf5, #f6e2b0 70%);
  color: var(--sg-ink);
  box-shadow: 0 calc(3 * var(--u)) 0 rgba(58, 34, 12, 0.4);
  cursor: pointer;
  transition: transform 120ms ease-out;
}
html[data-ui="v2"] .wnPickTile.k-pet { border-color: #5b9bd5; background: radial-gradient(circle at 50% 30%, #f7fbff, #d4e7f7 70%); }
html[data-ui="v2"] .wnPickTile:active { transform: translateY(calc(2 * var(--u))) scale(0.97); box-shadow: none; }
html[data-ui="v2"] .wnPickTile.on { border-color: #fff; box-shadow: 0 0 0 calc(4 * var(--u)) var(--sg-gold), 0 0 calc(14 * var(--u)) rgba(255, 215, 94, 0.9); }
html[data-ui="v2"] .wnPickTile.on::after {
  content: "✓"; position: absolute; right: calc(-8 * var(--u)); top: calc(-8 * var(--u));
  width: calc(30 * var(--u)); height: calc(30 * var(--u));
  display: grid; place-items: center;
  border-radius: 50%; background: var(--sg-ok); color: #fff;
  font: 900 var(--fs-s)/1 var(--sg-font);
  box-shadow: 0 0 0 calc(2 * var(--u)) #fff;
}
html[data-ui="v2"] .wnPickArt { position: relative; width: calc(84 * var(--u)); height: calc(84 * var(--u)); pointer-events: none; }
html[data-ui="v2"] .wnPickArt canvas, html[data-ui="v2"] .wnPickArt img.rwArt { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
html[data-ui="v2"] .wnPickArt i { position: absolute; left: 18%; top: 18%; width: 64%; height: 64%; }
html[data-ui="v2"] .wnPickTile b { max-width: 100%; font: 900 var(--fs-xs)/1.2 var(--sg-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
html[data-ui="v2"] .wnPickTile em { color: #8a3a0e; font: 900 var(--fs-xs)/1 var(--sg-font); font-style: normal; pointer-events: none; }
html[data-ui="v2"] .wnPickInfo {
  margin-top: calc(10 * var(--u));
  color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.5 var(--sg-font);
}
html[data-ui="v2"] #wnFoot {
  flex: none;
  display: flex; gap: calc(12 * var(--u));
  padding: calc(12 * var(--u)) calc(20 * var(--u)) calc(18 * var(--u));
  border-top: calc(2 * var(--u)) dashed rgba(122, 74, 30, 0.35);
}
html[data-ui="v2"] #wnFoot:empty { display: none; }
/* 一两颗钮时分左右两格（上一页在左，下一页 / 确定在右），翻页时钮不跳位；中间一格放页码。 */
html[data-ui="v2"] #wnFoot[data-n="1"], html[data-ui="v2"] #wnFoot[data-n="2"] {
  display: grid; grid-template-columns: 1fr calc(96 * var(--u)) 1fr;
}
html[data-ui="v2"] #wnFoot .wnBtn[data-slot="left"] { grid-column: 1; grid-row: 1; }
html[data-ui="v2"] #wnFoot .wnBtn[data-slot="right"] { grid-column: 3; grid-row: 1; }
html[data-ui="v2"] .wnBtn {
  flex: 1; min-width: 0;
  height: calc(76 * var(--u)); padding: 0;
  border: calc(3 * var(--u)) solid var(--sg-wood);
  border-radius: calc(12 * var(--u));
  background: var(--sg-paper); color: var(--sg-ink);
  font: 900 var(--fs-l)/1 var(--sg-font);
  box-shadow: 0 calc(3 * var(--u)) 0 rgba(58, 34, 12, 0.55);
  cursor: pointer;
  transition: transform 120ms ease-out;
}
html[data-ui="v2"] .wnBtn[data-slot="right"] { background: linear-gradient(var(--sg-gold-hi), var(--sg-gold)); }
html[data-ui="v2"] .wnBtn:disabled { opacity: 0.45; }
html[data-ui="v2"] .wnBtnText { white-space: nowrap; pointer-events: none; }
html[data-ui="v2"] #wnClose.down, html[data-ui="v2"] .wnChoice.down, html[data-ui="v2"] .wnBtn.down:not(:disabled) {
  transform: translateY(calc(2 * var(--u))) scale(0.97);
  box-shadow: none;
}
html[data-ui="v2"] .wnPageN {
  position: absolute; left: 50%; bottom: calc(18 * var(--u) + 38 * var(--u));
  transform: translate(-50%, 50%);
  color: var(--sg-ink-soft);
  font: 800 var(--fs-s)/1 var(--sg-font);
  pointer-events: none;
}

/* ---------- 设置（新版代码绘制，ui-v2.js 搭） ---------- */
html[data-ui="v2"] #setting {
  top: var(--topH); height: calc(100cqh - var(--topH) - var(--botH));
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: calc(30 * var(--u));
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.35);
}
html[data-ui="v2"] #setting[hidden] { display: none; }
html[data-ui="v2"] #setting .sgCard { width: calc(640 * var(--u)); padding: 0 calc(24 * var(--u)) calc(20 * var(--u)); }
html[data-ui="v2"] #setting .sgHead { margin: 0 calc(-24 * var(--u)) calc(6 * var(--u)); }
/* 音量（问题 9）：名字、喇叭钮（点一下静音 / 回到上次的音量；小声一道波、大声两道波、静音带红叉）、金色滑条（和数量弹窗同一种）、百分比。 */
html[data-ui="v2"] #setting .sgVol { justify-content: flex-start; gap: calc(12 * var(--u)); }
html[data-ui="v2"] #setting .sgVol > span { flex: none; width: calc(118 * var(--u)); white-space: nowrap; }
html[data-ui="v2"] #setting .svMute {
  flex: none; display: grid; place-items: center;
  width: calc(54 * var(--u)); height: calc(54 * var(--u)); padding: 0; box-sizing: border-box;
  border: calc(3 * var(--u)) solid var(--sg-wood); border-radius: 50%;
  background: radial-gradient(circle at 40% 34%, #fffaea, var(--sg-paper) 72%);
  box-shadow: 0 calc(3 * var(--u)) 0 rgba(58, 34, 12, 0.45);
  cursor: pointer;
}
html[data-ui="v2"] #setting .svMute:active { transform: translateY(calc(2 * var(--u))); box-shadow: none; }
html[data-ui="v2"] #setting .svMute i {
  display: block; width: 66%; height: 66%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M4.5 12.2h5.2l7.3-6.2v20l-7.3-6.2H4.5z' fill='%234a2c12' stroke='%234a2c12' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M20.6 11.6a6.2 6.2 0 0 1 0 8.8M24.2 8a11.3 11.3 0 0 1 0 16' fill='none' stroke='%234a2c12' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-ui="v2"] #setting .sgVol.lo .svMute i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M4.5 12.2h5.2l7.3-6.2v20l-7.3-6.2H4.5z' fill='%234a2c12' stroke='%234a2c12' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M20.6 11.6a6.2 6.2 0 0 1 0 8.8' fill='none' stroke='%234a2c12' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
html[data-ui="v2"] #setting .sgVol.mute .svMute { background: radial-gradient(circle at 40% 34%, #f3e3c8, #e3caa0 72%); }
html[data-ui="v2"] #setting .sgVol.mute .svMute i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M4.5 12.2h5.2l7.3-6.2v20l-7.3-6.2H4.5z' fill='%237a5a3a' stroke='%237a5a3a' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M21 12.2l7 7.6M28 12.2l-7 7.6' stroke='%23c0281e' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
html[data-ui="v2"] #setting .svBar {
  -webkit-appearance: none; appearance: none;
  flex: 1; min-width: 0; height: calc(46 * var(--u)); margin: 0;
  background: transparent; cursor: pointer; touch-action: none;
}
html[data-ui="v2"] #setting .svBar:focus { outline: none; }
html[data-ui="v2"] #setting .svBar::-webkit-slider-runnable-track {
  height: calc(16 * var(--u)); border-radius: 999px;
  background: linear-gradient(90deg, var(--sg-gold-hi), var(--sg-gold) var(--p, 0%), var(--sg-paper-in) var(--p, 0%));
  box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--sg-wood), inset 0 calc(3 * var(--u)) calc(4 * var(--u)) rgba(58, 34, 12, 0.3);
}
html[data-ui="v2"] #setting .svBar::-moz-range-track { height: calc(16 * var(--u)); border: calc(2 * var(--u)) solid var(--sg-wood); border-radius: 999px; background: var(--sg-paper-in); }
html[data-ui="v2"] #setting .svBar::-moz-range-progress { height: calc(16 * var(--u)); border-radius: 999px; background: linear-gradient(90deg, var(--sg-gold-hi), var(--sg-gold)); }
html[data-ui="v2"] #setting .svBar::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  width: calc(44 * var(--u)); height: calc(44 * var(--u)); margin-top: calc(-14 * var(--u));
  border: calc(3 * var(--u)) solid var(--sg-wood-dk); border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fffbe6 0 16%, var(--sg-gold-hi) 42%, var(--sg-gold) 100%);
  box-shadow: 0 calc(3 * var(--u)) 0 rgba(58, 34, 12, 0.55);
}
html[data-ui="v2"] #setting .svBar::-moz-range-thumb {
  box-sizing: border-box; width: calc(44 * var(--u)); height: calc(44 * var(--u));
  border: calc(3 * var(--u)) solid var(--sg-wood-dk); border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fffbe6 0 16%, var(--sg-gold-hi) 42%, var(--sg-gold) 100%);
  box-shadow: 0 calc(3 * var(--u)) 0 rgba(58, 34, 12, 0.55);
}
html[data-ui="v2"] #setting .sgVol.mute .svBar::-webkit-slider-thumb { filter: grayscale(0.7); }
html[data-ui="v2"] #setting .svVal { flex: none; width: calc(80 * var(--u)); text-align: right; color: var(--sg-ink); font: 900 var(--fs-m)/1 var(--sg-font); font-variant-numeric: tabular-nums; }
html[data-ui="v2"] #setting .sgVol.mute .svVal { color: var(--sg-ink-soft); }
html[data-ui="v2"] #setting .sgNote {
  margin: 0; padding: calc(6 * var(--u)) 0 calc(12 * var(--u));
  border-bottom: calc(2 * var(--u)) dashed rgba(122, 74, 30, 0.35);
  color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.45 var(--sg-font);
}
html[data-ui="v2"] #setting .sgVol:has(+ .sgNote:not([hidden])) { border-bottom: 0; padding-bottom: calc(4 * var(--u)); }

/* ---------- GM 设置（gm-panel.js 搭，只有 GM 账号有钮） ---------- */
/* 钮：左上角人物头像下面（用户 2026-10-15 要，原来那格让给原地遇敌），和齿轮同一种画法（铜色调节板 + 下面一块「GM」牌）；
   还有没应用的改动时右上角一枚金色角标写几项。--gearH 是齿轮钮的高（图 48 − 5 + 牌子：字高 1.1 倍 + 上下边距 8）。 */
html[data-ui="v2"] #hudBot { --gearH: calc(51 * var(--u) + var(--fs-xs) * 1.1); }
html[data-ui="v2"] #gmBtn {
  left: calc(12 * var(--u)); right: auto; top: calc(var(--topH) + 12 * var(--u)); bottom: auto;
  width: calc(56 * var(--u));
  color: #c08a3e;
  --gmEdge: #3a220c;
}
html[data-ui="v2"] #gmBtn .gmIcon { display: block; width: calc(48 * var(--u)); height: calc(48 * var(--u)); }
html[data-ui="v2"] #gmBtn .gmIcon svg {
  display: block; width: 100%; height: 100%;
  filter: drop-shadow(0 calc(2 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.55));
}
html[data-ui="v2"] #gmBtn span {
  margin-top: calc(-5 * var(--u));
  padding: calc(2 * var(--u)) calc(9 * var(--u));
  border: calc(2 * var(--u)) solid var(--sg-wood-dk);
  border-radius: 999px;
  background: linear-gradient(#5a3d22, #2c1a0a);
  color: #f6e2bd;
  font: 900 var(--fs-xs)/1.1 var(--sg-font);
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0 calc(2 * var(--u)) 0 rgba(0, 0, 0, 0.45);
}
html[data-ui="v2"] #gmBtn.dirty { color: #e6a817; }
html[data-ui="v2"] #gmBtn .gmBadge {
  position: absolute; top: calc(-6 * var(--u)); right: calc(-6 * var(--u));
  min-width: calc(28 * var(--u)); height: calc(28 * var(--u));
  padding: 0 calc(6 * var(--u)); box-sizing: border-box;
  border: calc(2 * var(--u)) solid var(--sg-wood-dk);
  border-radius: 999px;
  background: linear-gradient(var(--sg-gold-hi), var(--sg-gold));
  color: var(--sg-ink);
  font: 900 var(--fs-xs)/calc(24 * var(--u)) var(--sg-font);
  text-align: center;
  box-shadow: 0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.45);
}
/* 面板：地图区里一张纸卡（和设置同一套），标题条下一行说明，中间分区可滚，底栏钉住：左边状态字，右边「撤销」「应用到全服」。 */
html[data-ui="v2"] #gm {
  top: var(--topH); height: calc(100cqh - var(--topH) - var(--botH));
  display: flex; justify-content: center; align-items: stretch;
  padding: calc(14 * var(--u)) calc(12 * var(--u));
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.35);
  transition: background-color 140ms ease-out;
}
html[data-ui="v2"] #gm .gmCard {
  width: 100%; max-width: calc(696 * var(--u));
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
  transition: border-color 140ms ease-out, box-shadow 140ms ease-out;
}
html[data-ui="v2"] #gm .sgHead { margin: 0; flex: none; padding: calc(6 * var(--u)) calc(14 * var(--u)); border-radius: calc(12 * var(--u)) calc(12 * var(--u)) 0 0; }
html[data-ui="v2"] #gm .gmScope {
  flex: none; padding: calc(3 * var(--u)) calc(12 * var(--u));
  border-radius: 999px; background: var(--sg-night); color: #ffd75e;
  font: 800 var(--fs-xs)/1.2 var(--sg-font); font-style: normal; text-shadow: none;
}
html[data-ui="v2"] #gm .gmLead { flex: none; margin: 0; padding: calc(10 * var(--u)) calc(18 * var(--u)) calc(2 * var(--u)); color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.45 var(--sg-font); }
html[data-ui="v2"] #gm .gmBody {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; gap: calc(12 * var(--u));
  padding: calc(8 * var(--u)) calc(12 * var(--u)) calc(14 * var(--u));
  overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
}
html[data-ui="v2"] #gm.busy .gmBody { pointer-events: none; }
html[data-ui="v2"] #gm .gmSec {
  flex: none; display: flex; flex-direction: column; gap: calc(10 * var(--u));
  transition: opacity 140ms ease-out;
}
/* 一组的小标题（走路、画面、保留、状态）：木色小字 + 一道虚线。 */
html[data-ui="v2"] #gm .gmSecHead {
  display: flex; align-items: center; gap: calc(10 * var(--u));
  margin: calc(4 * var(--u)) calc(4 * var(--u)) calc(-2 * var(--u));
  color: var(--sg-wood); font: 900 var(--fs-xs)/1.2 var(--sg-font);
  transition: opacity 140ms ease-out;
}
html[data-ui="v2"] #gm .gmSecHead:not(.gvHead)::after {
  content: ""; flex: 1; height: calc(2 * var(--u));
  background: repeating-linear-gradient(90deg, rgba(122, 74, 30, 0.45) 0 calc(10 * var(--u)), transparent calc(10 * var(--u)) calc(18 * var(--u)));
}
/* 一项一张卡：名字、「?」、风险签、生效签、现值；下面 慢 ━━●━━ 快（或分段钮）；改了没应用写「原 X」「恢复默认」，整张金边、左边金条。 */
html[data-ui="v2"] #gm .gmRow {
  position: relative;
  padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(14 * var(--u));
  border-radius: calc(14 * var(--u));
  background: rgba(255, 250, 236, 0.8);
  box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(167, 122, 69, 0.4);
  transition: background-color 160ms ease-out, box-shadow 160ms ease-out, opacity 140ms ease-out;
}
html[data-ui="v2"] #gm .gmRow.dirty { background: #fff7e2; box-shadow: inset 0 0 0 calc(3 * var(--u)) var(--sg-gold-line), inset calc(8 * var(--u)) 0 0 var(--sg-gold); }
/* 全服公告（世界页最上面）：输入框 + 「发送」（按一下变红「再按一下发送」，3 秒内再按才发），下面一行结果和字数。 */
html[data-ui="v2"] #gm .gmSay {
  padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u));
  border-radius: calc(14 * var(--u));
  background: linear-gradient(rgba(255, 236, 228, 0.9), rgba(255, 246, 236, 0.85));
  box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(168, 36, 26, 0.35);
}
html[data-ui="v2"] #gm .gmSay .gmSecHead { color: #a8241a; }
html[data-ui="v2"] #gm .gmSayRow { display: flex; gap: calc(10 * var(--u)); margin-top: calc(8 * var(--u)); }
html[data-ui="v2"] #gm .gmSayIn {
  flex: 1; min-width: 0; box-sizing: border-box; height: calc(56 * var(--u));
  padding: 0 calc(14 * var(--u));
  border: calc(3 * var(--u)) solid var(--sg-wood); border-radius: calc(12 * var(--u));
  background: var(--sg-paper-in); color: var(--sg-ink);
  font: 700 max(16px, calc(24 * var(--u)))/1 var(--sg-font);
}
html[data-ui="v2"] #gm .gmSayIn:focus { outline: none; border-color: var(--sg-gold); box-shadow: 0 0 0 calc(3 * var(--u)) rgba(230, 168, 23, 0.4); }
html[data-ui="v2"] #gm .gmSayGo { flex: none; min-width: calc(150 * var(--u)); height: calc(56 * var(--u)); font: 900 var(--fs-m)/1 var(--sg-font); }
html[data-ui="v2"] #gm .gmSayGo.warn { background: linear-gradient(#ff7a62, #c0281e); color: #fff; border-color: #6a1208; }
html[data-ui="v2"] #gm .gmSayFoot { display: flex; align-items: baseline; gap: calc(10 * var(--u)); margin-top: calc(6 * var(--u)); }
html[data-ui="v2"] #gm .gmSayMsg { flex: 1; min-width: 0; color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.4 var(--sg-font); }
html[data-ui="v2"] #gm .gmSayMsg.ok { color: var(--sg-ok); font-weight: 900; }
html[data-ui="v2"] #gm .gmSayMsg.bad { color: var(--sg-bad); font-weight: 900; }
html[data-ui="v2"] #gm .gmSayN { flex: none; color: var(--sg-ink-soft); font: 800 var(--fs-xs)/1 var(--sg-font); font-style: normal; font-variant-numeric: tabular-nums; }
html[data-ui="v2"] #gm .gmRow.off { opacity: 0.45; pointer-events: none; }
html[data-ui="v2"] #gm .gmRow.flash { animation: gmFlash 1.2s ease-out; }
@keyframes gmFlash { 0%, 30% { background-color: rgba(120, 200, 90, 0.35); } }
html[data-ui="v2"] #gm .gmTop { display: flex; align-items: center; gap: calc(8 * var(--u)); min-height: calc(36 * var(--u)); }
html[data-ui="v2"] #gm .gmName { flex: none; color: var(--sg-ink); font: 900 var(--fs-m)/1.2 var(--sg-font); white-space: nowrap; }
html[data-ui="v2"] #gm .gmTop .gmSp { flex: 1 1 auto; min-width: 0; }
/* 「?」：点了展开说明（平时收起，一屏放得下）。 */
html[data-ui="v2"] #gm .gmQ {
  flex: none; width: calc(30 * var(--u)); height: calc(30 * var(--u)); padding: 0;
  border: 0; border-radius: 50%; background: rgba(122, 74, 30, 0.16); color: var(--sg-wood);
  font: 900 var(--fs-xs)/1 var(--sg-font); cursor: pointer;
}
html[data-ui="v2"] #gm .gmRow.open .gmQ { background: var(--sg-wood); color: #fff3d6; }
/* 生效签：马上（绿）、下一场（蓝）、一小时内（紫）、只这台设备 / 测试（灰）；风险签红。 */
html[data-ui="v2"] #gm .gmWhen {
  flex: none; padding: calc(3 * var(--u)) calc(10 * var(--u)); border-radius: 999px;
  font: 800 var(--fs-xs)/1.2 var(--sg-font); font-style: normal; white-space: nowrap;
}
html[data-ui="v2"] #gm .gmWhen.now { background: rgba(47, 122, 37, 0.14); color: var(--sg-ok); }
html[data-ui="v2"] #gm .gmWhen.next, html[data-ui="v2"] #gm .gmWhen.settle { background: rgba(3, 120, 180, 0.13); color: #0a6aa0; }
html[data-ui="v2"] #gm .gmWhen.hour { background: rgba(120, 60, 170, 0.13); color: #6a3aa0; }
html[data-ui="v2"] #gm .gmWhen.local, html[data-ui="v2"] #gm .gmWhen.test { background: rgba(122, 90, 58, 0.15); color: var(--sg-ink-soft); }
html[data-ui="v2"] #gm .gmWhen.risk { background: rgba(192, 40, 30, 0.12); color: var(--sg-bad); }
html[data-ui="v2"] #gm .gmVal {
  flex: none; min-width: calc(112 * var(--u)); box-sizing: border-box;
  padding: calc(5 * var(--u)) calc(12 * var(--u));
  border-radius: 999px; background: var(--sg-night); color: #ffd75e;
  font: 900 var(--fs-s)/1.1 var(--sg-font); font-variant-numeric: tabular-nums;
  text-align: center; white-space: nowrap;
}
html[data-ui="v2"] #gm .gmRow.dirty .gmVal { background: linear-gradient(var(--sg-gold-hi), var(--sg-gold)); color: var(--sg-ink); box-shadow: 0 0 0 calc(2 * var(--u)) var(--sg-wood-dk); }
/* 改了没应用：「原 1.0×」；值不是默认：「恢复默认 1.0×」。两样都没有就整行收起。 */
html[data-ui="v2"] #gm .gmDiff { display: flex; align-items: center; gap: calc(10 * var(--u)); margin-top: calc(8 * var(--u)); }
html[data-ui="v2"] #gm .gmDiff[hidden] { display: none; }
html[data-ui="v2"] #gm .gmWas { min-width: 0; overflow: hidden; color: #a8400e; font: 800 var(--fs-xs)/1.2 var(--sg-font); white-space: nowrap; text-overflow: ellipsis; }
html[data-ui="v2"] #gm .gmDef {
  flex: none; margin-left: auto;
  height: calc(34 * var(--u)); padding: 0 calc(12 * var(--u));
  border: 0; border-radius: 999px;
  background: rgba(122, 74, 30, 0.12); color: var(--sg-wood);
  font: 800 var(--fs-xs)/1 var(--sg-font); white-space: nowrap;
}
html[data-ui="v2"] #gm .gmDef[hidden] { display: none; }
html[data-ui="v2"] #gm .gmDef:active { transform: translateY(1px); }
/* 滑条：两头是步进钮（写慢 / 快、近 / 远、上 / 下，按住连续走），中间深色木槽里金色的量，金色圆钮；改了没应用时槽里一道白刻线标原值。 */
html[data-ui="v2"] #gm .gmSlide {
  display: grid; grid-template-columns: calc(76 * var(--u)) minmax(0, 1fr) calc(76 * var(--u));
  align-items: center; gap: calc(12 * var(--u));
  margin-top: calc(8 * var(--u));
}
html[data-ui="v2"] #gm .gmStep {
  height: calc(52 * var(--u)); padding: 0;
  border: calc(3 * var(--u)) solid var(--sg-wood);
  border-radius: calc(12 * var(--u));
  background: linear-gradient(var(--sg-gold-hi), var(--sg-gold));
  color: var(--sg-ink);
  font: 900 var(--fs-s)/1 var(--sg-font);
  box-shadow: 0 calc(3 * var(--u)) 0 rgba(58, 34, 12, 0.55);
  touch-action: manipulation;
}
html[data-ui="v2"] #gm .gmStep.lo { background: var(--sg-paper); }
html[data-ui="v2"] #gm .gmStep:active { transform: translateY(calc(2 * var(--u))); box-shadow: none; }
html[data-ui="v2"] #gm .gmStep.off { background: var(--sg-paper-in); color: rgba(122, 90, 58, 0.45); border-color: rgba(122, 74, 30, 0.35); box-shadow: none; }
html[data-ui="v2"] #gm .gmTrack {
  position: relative; height: calc(52 * var(--u));
  --tr: calc(22 * var(--u));
  touch-action: pan-y;
}
html[data-ui="v2"] #gm .gmTrack::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: calc(20 * var(--u));
  transform: translateY(-50%);
  box-sizing: border-box;
  border: calc(3 * var(--u)) solid var(--sg-wood-dk);
  border-radius: 999px;
  background: linear-gradient(#24160a, #45301e);
  box-shadow: inset 0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.6);
}
html[data-ui="v2"] #gm .gmFill {
  position: absolute; left: calc(3 * var(--u)); top: 50%;
  width: calc(var(--tr) + (100% - 2 * var(--tr)) * var(--p, 0) - 3 * var(--u));
  height: calc(14 * var(--u)); transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(var(--sg-gold-hi), var(--sg-gold) 60%, #b07a10);
  box-shadow: inset 0 calc(2 * var(--u)) 0 rgba(255, 255, 255, 0.45);
}
html[data-ui="v2"] #gm .gmMark {
  display: none;
  position: absolute; top: 50%; left: calc(var(--tr) + (100% - 2 * var(--tr)) * var(--bp, 0));
  width: calc(5 * var(--u)); height: calc(30 * var(--u));
  transform: translate(-50%, -50%);
  border-radius: calc(3 * var(--u));
  background: #fff3d6;
  box-shadow: 0 0 0 calc(2 * var(--u)) var(--sg-wood-dk);
}
html[data-ui="v2"] #gm .gmRow.dirty .gmMark { display: block; }
html[data-ui="v2"] #gm .gmThumb {
  position: absolute; top: 50%; left: calc(var(--tr) + (100% - 2 * var(--tr)) * var(--p, 0));
  width: calc(2 * var(--tr)); height: calc(2 * var(--tr));
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  border: calc(3 * var(--u)) solid var(--sg-wood-dk);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6d6, var(--sg-gold-hi) 40%, var(--sg-gold) 75%, #b07a10);
  box-shadow: 0 calc(3 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, 0.45);
  transition: transform 80ms ease-out, box-shadow 80ms ease-out;
}
html[data-ui="v2"] #gm .gmTrack.drag .gmThumb {
  transform: translate(-50%, -50%) scale(1.15);
  box-shadow: 0 0 0 calc(6 * var(--u)) rgba(255, 207, 90, 0.45), 0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.5);
}
html[data-ui="v2"] #gm .gmSeg { display: flex; width: 100%; box-sizing: border-box; margin-top: calc(8 * var(--u)); }
html[data-ui="v2"] #gm .gmSeg button { flex: 1 1 0; min-width: 0; height: calc(48 * var(--u)); }
html[data-ui="v2"] #gm .gmNote { display: none; margin: calc(8 * var(--u)) 0 0; color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.5 var(--sg-font); }
html[data-ui="v2"] #gm .gmRow.open .gmNote { display: block; }
/* 测试动作（立刻遇敌）：金钮在名字那一行右边。 */
html[data-ui="v2"] #gm .gmGo { flex: none; height: calc(52 * var(--u)); min-width: calc(130 * var(--u)); }
html[data-ui="v2"] #gm .gmGo:disabled { opacity: 0.5; }
html[data-ui="v2"] #gm .gmInfoGrid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: calc(6 * var(--u)) calc(14 * var(--u));
  padding: calc(8 * var(--u)) calc(6 * var(--u)) calc(10 * var(--u));
}
html[data-ui="v2"] #gm .gmInfoGrid > div { display: flex; align-items: baseline; gap: calc(10 * var(--u)); min-width: 0; }
html[data-ui="v2"] #gm .gmInfoGrid > div.wide { grid-column: 1 / -1; }
html[data-ui="v2"] #gm .gmInfoGrid span { flex: none; color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.3 var(--sg-font); }
html[data-ui="v2"] #gm .gmInfoGrid b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 var(--fs-s)/1.3 var(--sg-font); font-variant-numeric: tabular-nums; }
/* 战斗页「速度」最后一张：实际倍数（鞋 +0 / +100 / +250 / +450 / 你）和一场大约多久（一条分段的条），按还没应用的值算；改了的金边。 */
html[data-ui="v2"] #gm .gmCalc {
  display: flex; flex-direction: column; gap: calc(8 * var(--u));
  padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(14 * var(--u));
  border-radius: calc(14 * var(--u));
  background: rgba(58, 30, 6, 0.06);
  box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(167, 122, 69, 0.4);
}
html[data-ui="v2"] #gm .gmCalc.dirty { box-shadow: inset 0 0 0 calc(3 * var(--u)) var(--sg-gold-line); }
html[data-ui="v2"] #gm .gmCalcHead { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(4 * var(--u)) calc(10 * var(--u)); }
html[data-ui="v2"] #gm .gmCalcHead b { color: var(--sg-ink); font: 900 var(--fs-s)/1.2 var(--sg-font); }
html[data-ui="v2"] #gm .gmCalcHead small { min-width: 0; color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.35 var(--sg-font); }
html[data-ui="v2"] #gm .gmMulGrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(6 * var(--u)); }
html[data-ui="v2"] #gm .gmMulGrid > div {
  display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--u)); min-width: 0;
  padding: calc(6 * var(--u)) calc(2 * var(--u));
  border-radius: calc(10 * var(--u)); background: rgba(255, 250, 236, 0.85);
}
html[data-ui="v2"] #gm .gmMulGrid > div.me { background: var(--sg-night); }
html[data-ui="v2"] #gm .gmMulGrid > div.changed { box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--sg-gold); }
html[data-ui="v2"] #gm .gmMulGrid span { color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.2 var(--sg-font); white-space: nowrap; }
html[data-ui="v2"] #gm .gmMulGrid b {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--sg-ink); font: 900 var(--fs-xs)/1.2 var(--sg-font); font-variant-numeric: tabular-nums;
}
html[data-ui="v2"] #gm .gmMulGrid > div.me span { color: #e9d7a8; }
html[data-ui="v2"] #gm .gmMulGrid > div.me b { color: #ffd75e; }
html[data-ui="v2"] #gm .gmBar {
  display: flex; height: calc(18 * var(--u)); overflow: hidden;
  border-radius: 999px; background: rgba(58, 30, 6, 0.15);
}
html[data-ui="v2"] #gm .gmBar i { flex: 1 1 0; min-width: calc(3 * var(--u)); transition: flex-grow 200ms ease-out; }
html[data-ui="v2"] #gm .gmBar i + i { border-left: calc(2 * var(--u)) solid rgba(255, 250, 236, 0.9); }
html[data-ui="v2"] #gm .gmBar .in, html[data-ui="v2"] #gm .gmBarKey .in::before { background: #6c9fd8; }
html[data-ui="v2"] #gm .gmBar .fight, html[data-ui="v2"] #gm .gmBarKey .fight::before { background: #d8653a; }
html[data-ui="v2"] #gm .gmBar .out, html[data-ui="v2"] #gm .gmBarKey .out::before { background: #8fb3e0; }
html[data-ui="v2"] #gm .gmBar .gap, html[data-ui="v2"] #gm .gmBarKey .gap::before { background: #b7a68a; }
html[data-ui="v2"] #gm .gmBarKey { display: flex; flex-wrap: wrap; gap: calc(4 * var(--u)) calc(14 * var(--u)); }
html[data-ui="v2"] #gm .gmBarKey span { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.3 var(--sg-font); font-variant-numeric: tabular-nums; }
html[data-ui="v2"] #gm .gmBarKey span::before { content: ""; width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: calc(3 * var(--u)); }
html[data-ui="v2"] #gm .gmBarSum { display: flex; align-items: baseline; gap: calc(12 * var(--u)); margin: 0; }
html[data-ui="v2"] #gm .gmBarSum b { color: var(--sg-ink); font: 900 var(--fs-m)/1.2 var(--sg-font); font-variant-numeric: tabular-nums; }
html[data-ui="v2"] #gm .gmBarSum s { color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.2 var(--sg-font); }
html[data-ui="v2"] #gm .gmErr {
  margin: 0 calc(4 * var(--u)) calc(8 * var(--u)); padding: calc(8 * var(--u));
  max-height: calc(160 * var(--u)); overflow: auto;
  border-radius: calc(8 * var(--u)); background: rgba(192, 40, 30, 0.1);
  color: var(--sg-bad); font: 700 var(--fs-xs)/1.4 var(--sg-font); white-space: pre-wrap;
}
html[data-ui="v2"] #gm .gmFoot {
  flex: none; display: flex; align-items: center; gap: calc(10 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  border-top: calc(3 * var(--u)) solid rgba(122, 74, 30, 0.35);
  background: linear-gradient(#f3d79c, #e2bb78);
  transition: opacity 140ms ease-out;
}
html[data-ui="v2"] #gm .gmMsg { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--sg-ink-soft); font: 800 var(--fs-xs)/1.35 var(--sg-font); }
html[data-ui="v2"] #gm .gmMsg.dirty { color: #9a5a00; }
html[data-ui="v2"] #gm .gmMsg.ok { color: var(--sg-ok); }
html[data-ui="v2"] #gm .gmMsg.bad { color: var(--sg-bad); }
html[data-ui="v2"] #gm .gmFoot .sgBtn { flex: none; height: calc(60 * var(--u)); }
html[data-ui="v2"] #gm .gmUndo { min-width: calc(110 * var(--u)); }
html[data-ui="v2"] #gm .gmApply { min-width: calc(230 * var(--u)); }
html[data-ui="v2"] #gm .gmFoot .sgBtn:disabled { opacity: 0.45; }
/* 拖视野、人物位置时：面板只留正在拖的这一行，其余淡掉、底色去掉，直接看身后的地图；松手恢复。 */
html[data-ui="v2"] #gm.peek { background-color: transparent; }
html[data-ui="v2"] #gm.peek .gmCard { background: transparent; border-color: transparent; box-shadow: none; }
html[data-ui="v2"] #gm.peek .sgHead, html[data-ui="v2"] #gm.peek .gmLead, html[data-ui="v2"] #gm.peek .gmFoot,
html[data-ui="v2"] #gm.peek .gmSecHead, html[data-ui="v2"] #gm.peek .gmRow:not(.active), html[data-ui="v2"] #gm.peek .gmInfo { opacity: 0; }
html[data-ui="v2"] #gm.peek .gmSec { background-color: transparent; border-color: transparent; }
html[data-ui="v2"] #gm.peek .gmRow.active {
  background: var(--paper-bg);
  box-shadow: 0 0 0 calc(3 * var(--u)) var(--sg-wood), 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, 0.45);
}
html[data-ui="v2"] #gm.peek .gmTabs { opacity: 0; }
/* 六页：收益 / 战斗 / 世界 / 托管 / 删档 / 本机（GMPANEL.md 4.1），标题条下一排；有没应用的草稿，页名右上角红点写几项。 */
html[data-ui="v2"] #gm .gmTabs { flex: none; display: flex; gap: calc(6 * var(--u)); margin: calc(10 * var(--u)) calc(12 * var(--u)) 0; }
html[data-ui="v2"] #gm .gmTabs button { position: relative; flex: 1 1 0; min-width: 0; height: calc(52 * var(--u)); display: inline-flex; align-items: center; justify-content: center; }
html[data-ui="v2"] #gm .gmTabN:empty { display: none; }
html[data-ui="v2"] #gm .gmTabN {
  position: absolute; right: calc(-8 * var(--u)); top: calc(-12 * var(--u));
  min-width: calc(28 * var(--u)); height: calc(28 * var(--u)); padding: 0 calc(6 * var(--u)); box-sizing: border-box;
  border-radius: 999px; background: #d2501a; color: #fff; box-shadow: 0 0 0 calc(2 * var(--u)) #fff3d0;
  font: 900 var(--fs-xs)/calc(28 * var(--u)) var(--sg-font); font-style: normal; text-align: center;
}
html[data-ui="v2"] #gm .gmLead[hidden] { display: none; }
html[data-ui="v2"] #gm .gmBody[hidden] { display: none; }
/* 顶栏「记录」：和「关」一样高的纸钮。 */
html[data-ui="v2"] #gm .gmLogBtn {
  flex: none; height: calc(40 * var(--u)); padding: 0 calc(14 * var(--u));
  border: calc(3 * var(--u)) solid var(--sg-wood-dk); border-radius: calc(10 * var(--u));
  background: var(--sg-paper); color: var(--sg-ink); font: 900 var(--fs-s)/1 var(--sg-font);
}
/* 野外怪经验（收益页第一张，GMPANEL.md 4.2）：原值划掉 → 新值大字、预设钮、举例、「持续」。 */
html[data-ui="v2"] #gm .gmRow.big { background: linear-gradient(#fff6dc, #f3d79c); }
html[data-ui="v2"] #gm .gmRow.big.dirty { background: linear-gradient(#fff8e6, #f6dda8); }
html[data-ui="v2"] #gm .gmBig { display: flex; align-items: baseline; gap: calc(12 * var(--u)); margin-top: calc(6 * var(--u)); }
html[data-ui="v2"] #gm .gmBig[hidden], html[data-ui="v2"] #gm .gmBig > [hidden] { display: none; }
html[data-ui="v2"] #gm .gmBigWas { color: #9a8468; font: 800 var(--fs-m)/1 var(--sg-font); }
html[data-ui="v2"] #gm .gmBigTo { color: var(--sg-ink-soft); font: 800 var(--fs-m)/1 var(--sg-font); }
html[data-ui="v2"] #gm .gmRow.big .gmVal, html[data-ui="v2"] #gm .gmRow.big.dirty .gmVal {
  min-width: 0; padding: 0; border-radius: 0; background: none; box-shadow: none;
  color: #a8400e; font: 900 calc(64 * var(--u))/1 var(--sg-font); letter-spacing: -0.02em; text-align: left;
}
html[data-ui="v2"] #gm .gmBig small { color: var(--sg-ink-soft); font: 800 var(--fs-xs)/1.3 var(--sg-font); }
html[data-ui="v2"] #gm .gmPresets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(8 * var(--u)); margin-top: calc(10 * var(--u)); }
html[data-ui="v2"] #gm .gmPresets button {
  height: calc(48 * var(--u)); padding: 0;
  border: calc(3 * var(--u)) solid var(--sg-wood-lt); border-radius: calc(12 * var(--u));
  background: var(--sg-paper-in); color: #5a3a18; font: 900 var(--fs-s)/1 var(--sg-font);
}
html[data-ui="v2"] #gm .gmPresets button.on { border-color: var(--sg-wood); background: linear-gradient(var(--sg-gold-hi), var(--sg-gold)); color: var(--sg-ink); }
html[data-ui="v2"] #gm .gmEx { margin: calc(10 * var(--u)) 0 0; padding: calc(8 * var(--u)) calc(12 * var(--u)); border-radius: calc(10 * var(--u)); background: rgba(58, 30, 6, 0.86); color: #ffe08a; font: 800 var(--fs-xs)/1.45 var(--sg-font); }
html[data-ui="v2"] #gm .gmTimer { margin-top: calc(10 * var(--u)); padding: calc(8 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u)); border-radius: calc(12 * var(--u)); background: rgba(122, 74, 30, 0.08); }
html[data-ui="v2"] #gm .gmTimer.dirty { background: rgba(255, 207, 90, 0.3); box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--sg-gold-line); }
html[data-ui="v2"] #gm .gmTimer.off { opacity: 0.45; pointer-events: none; }
html[data-ui="v2"] #gm .gmTimerTop { display: flex; align-items: baseline; gap: calc(10 * var(--u)); }
html[data-ui="v2"] #gm .gmTimerTop b { font: 900 var(--fs-s)/1.2 var(--sg-font); }
html[data-ui="v2"] #gm .gmLeft { min-width: 0; color: #a8400e; font: 800 var(--fs-xs)/1.3 var(--sg-font); font-variant-numeric: tabular-nums; }
html[data-ui="v2"] #gm .gmFor { margin-top: calc(6 * var(--u)); }
html[data-ui="v2"] #gm .gmFor button { height: calc(44 * var(--u)); font-size: var(--fs-xs); }
html[data-ui="v2"] #gm .gmFor button:disabled { opacity: 0.45; }
/* 拉出来的纸：「检查并应用」的确认单、顶栏「记录」（GMPANEL.md 4.3、4.4）。盖住面板下半截，点外面收起。 */
html[data-ui="v2"] #gm .gmCard { position: relative; }
html[data-ui="v2"] #gm .gmVeil { position: absolute; z-index: 3; inset: 0; background: rgba(20, 10, 2, 0.55); }
html[data-ui="v2"] #gm .gmSheet {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; max-height: 82%; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(18 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u)); box-sizing: border-box;
  border-radius: calc(22 * var(--u)) calc(22 * var(--u)) 0 0;
  background: linear-gradient(#fff6dc, #f1d394);
  box-shadow: 0 calc(-6 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, 0.45), inset 0 calc(4 * var(--u)) 0 var(--sg-gold-line);
}
html[data-ui="v2"] #gm .gmVeil[hidden], html[data-ui="v2"] #gm .gmSheet[hidden] { display: none; }
html[data-ui="v2"] #gm .gmSheet h4 { margin: 0; font: 900 var(--fs-l)/1.2 var(--sg-font); }
html[data-ui="v2"] #gm .gmSub { margin: calc(6 * var(--u)) 0 0; color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.5 var(--sg-font); }
html[data-ui="v2"] #gm .gmChgs, html[data-ui="v2"] #gm .gmLogList { display: flex; flex-direction: column; gap: calc(10 * var(--u)); margin-top: calc(12 * var(--u)); }
html[data-ui="v2"] #gm .gmChg { padding: calc(10 * var(--u)) calc(14 * var(--u)); border-radius: calc(14 * var(--u)); background: rgba(255, 250, 236, 0.92); box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(122, 74, 30, 0.3); }
html[data-ui="v2"] #gm .gmChg.risk { background: #fff1ea; box-shadow: inset 0 0 0 calc(4 * var(--u)) #e0745a; }
html[data-ui="v2"] #gm .gmChgTop { display: flex; align-items: center; gap: calc(10 * var(--u)); justify-content: space-between; }
html[data-ui="v2"] #gm .gmChgTop b { font: 900 var(--fs-m)/1.25 var(--sg-font); }
html[data-ui="v2"] #gm .gmChgFt { margin-top: calc(4 * var(--u)); color: var(--sg-ink-soft); font: 800 var(--fs-xs)/1.4 var(--sg-font); }
html[data-ui="v2"] #gm .gmChgFt s { color: #9a8468; }
html[data-ui="v2"] #gm .gmChgFt strong { color: #a8400e; }
html[data-ui="v2"] #gm .gmWarn { margin: calc(4 * var(--u)) 0 0; color: var(--sg-bad); font: 800 var(--fs-xs)/1.45 var(--sg-font); }
html[data-ui="v2"] #gm .gmSheetActs { display: flex; gap: calc(12 * var(--u)); margin-top: calc(16 * var(--u)); }
html[data-ui="v2"] #gm .gmSheetActs .sgBtn { flex: 1; height: calc(68 * var(--u)); font: 900 var(--fs-m)/1 var(--sg-font); }
html[data-ui="v2"] #gm .gmConfirm { background: linear-gradient(#f4b7a2, #d0634a); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); }
html[data-ui="v2"] #gm .gmLogRow {
  display: grid; grid-template-columns: calc(110 * var(--u)) minmax(0, 1fr); align-items: start; gap: calc(10 * var(--u));
  width: 100%; padding: calc(10 * var(--u)) calc(14 * var(--u)); box-sizing: border-box;
  border: 0; border-radius: calc(12 * var(--u)); background: rgba(255, 250, 236, 0.92); box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(122, 74, 30, 0.25);
  color: var(--sg-ink); text-align: left; cursor: pointer;
}
html[data-ui="v2"] #gm .gmLogRow:active { background: rgba(255, 224, 150, 0.9); }
html[data-ui="v2"] #gm .gmLogRow time { color: var(--sg-wood); font: 900 var(--fs-xs)/1.4 var(--sg-font); }
html[data-ui="v2"] #gm .gmLogRow b { display: block; font: 900 var(--fs-s)/1.3 var(--sg-font); }
html[data-ui="v2"] #gm .gmLogRow span { display: block; color: var(--sg-ink-soft); font: 800 var(--fs-xs)/1.4 var(--sg-font); }
html[data-ui="v2"] #gm .gmLogRow em { color: #a8400e; font-style: normal; }
/* 删档区：一行一个删掉的角色——金边头像、名字和账号、还剩几天（越近越红）和删的时间、「恢复」金钮。 */
html[data-ui="v2"] #gm .gvHead { display: flex; align-items: center; gap: calc(10 * var(--u)); }
html[data-ui="v2"] #gm .gvHead span { flex: 1; }
html[data-ui="v2"] #gm .gvCount { flex: none; color: var(--sg-ink-soft); font: 800 var(--fs-xs)/1 var(--sg-font); font-style: normal; }
html[data-ui="v2"] #gm .gvRefresh {
  flex: none; height: calc(36 * var(--u)); padding: 0 calc(12 * var(--u));
  border: calc(2 * var(--u)) solid var(--sg-wood); border-radius: 999px;
  background: var(--sg-paper-in); color: var(--sg-ink); font: 800 var(--fs-xs)/1 var(--sg-font);
}
html[data-ui="v2"] #gm .gvList { display: flex; flex-direction: column; gap: calc(8 * var(--u)); padding: calc(8 * var(--u)) 0 calc(8 * var(--u)); }
html[data-ui="v2"] #gm .gvEmpty { margin: 0; padding: calc(22 * var(--u)) calc(10 * var(--u)); color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.5 var(--sg-font); text-align: center; }
html[data-ui="v2"] #gm .gvRow {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: calc(10 * var(--u));
  padding: calc(10 * var(--u)) calc(10 * var(--u));
  border-radius: calc(12 * var(--u));
  background: rgba(255, 251, 238, 0.8); box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(167, 122, 69, 0.34);
  animation: brIn 220ms ease-out both;
}
html[data-ui="v2"] #gm .gvFace {
  position: relative; width: calc(64 * var(--u)); height: calc(64 * var(--u)); min-width: 36px; min-height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #fffdf5, #f6e2b0 62%, #ddb469);
  box-shadow: 0 0 0 calc(2 * var(--u)) var(--sg-gold), 0 0 0 calc(4 * var(--u)) var(--sg-wood-dk);
  filter: grayscale(0.35);
}
html[data-ui="v2"] #gm .gvFace canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
html[data-ui="v2"] #gm .gvInfo { min-width: 0; display: flex; flex-direction: column; gap: calc(3 * var(--u)); }
html[data-ui="v2"] #gm .gvInfo b { font: 900 var(--fs-m)/1.15 var(--sg-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="v2"] #gm .gvInfo span, html[data-ui="v2"] #gm .gvInfo small { color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.25 var(--sg-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="v2"] #gm .gvWhen { display: flex; flex-direction: column; align-items: flex-end; gap: calc(4 * var(--u)); }
html[data-ui="v2"] #gm .gvWhen small { color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.2 var(--sg-font); white-space: nowrap; }
html[data-ui="v2"] #gm .gvLeft {
  padding: calc(3 * var(--u)) calc(10 * var(--u)); border-radius: 999px;
  background: var(--sg-night); color: #ffd977; font: 900 var(--fs-xs)/1.2 var(--sg-font); font-style: normal; white-space: nowrap;
}
html[data-ui="v2"] #gm .gvLeft.warn { background: #b07a00; color: #fff3d6; }
html[data-ui="v2"] #gm .gvLeft.bad { background: #b5301c; color: #fff; }
html[data-ui="v2"] #gm .gvLeft.gone { background: #5a1a0c; color: #ffb4a0; }
html[data-ui="v2"] #gm .gvBack { height: calc(52 * var(--u)); min-width: calc(104 * var(--u)); padding: 0 calc(12 * var(--u)); font-size: var(--fs-s); }
html[data-ui="v2"] #gm .gvBack.busy { background: linear-gradient(110deg, var(--sg-gold) 30%, #fff3c4 50%, var(--sg-gold) 70%) 0 0 / 300% 100%; animation: tpBusy 1s linear infinite; opacity: 1; }
@media (max-width: 420px) {
  html[data-ui="v2"] #gm .gvRow { grid-template-columns: auto minmax(0, 1fr) auto; }
  html[data-ui="v2"] #gm .gvWhen { grid-column: 2; grid-row: 2; flex-direction: row; align-items: center; justify-content: flex-start; gap: calc(8 * var(--u)); }
  html[data-ui="v2"] #gm .gvBack { grid-column: 3; grid-row: 1 / span 2; }
}

/* ---------- 战斗层：保持 720×1032 的比例，贴着聊天上沿（上方空档由 #v2Band 补）。界面零件全是代码画的 ---------- */
html[data-ui="v2"] #battle { top: auto; bottom: var(--botH); height: calc(1032 * var(--u)); }
/* 顶部木条（和顶栏同一种木纹、金线）一直铺到战斗层上沿，和回合纸牌：「第 N 回合 ⌛ 读秒」。 */
html[data-ui="v2"] #battleTop {
  top: 0; height: max(calc(var(--sat) + 140 * var(--u)), calc(100cqh - var(--botH) - 1032 * var(--u)));
  background: var(--wood-bar);
  box-shadow: inset 0 calc(-4 * var(--u)) 0 var(--sg-wood-dk), inset 0 calc(-7 * var(--u)) 0 var(--sg-gold-line), 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.45);
}
html[data-ui="v2"] #battleRound {
  left: 50%; width: auto; min-width: calc(380 * var(--u)); transform: translateX(-50%);
  top: calc(var(--sat) + 26 * var(--u)); height: calc(84 * var(--u));
  padding: 0 calc(34 * var(--u));
  box-sizing: border-box;
  border: var(--bw) solid var(--sg-wood);
  border-radius: calc(18 * var(--u));
  background: var(--paper-bg);
  box-shadow: 0 0 0 calc(3 * var(--u)) var(--sg-gold-line), 0 calc(5 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.45);
  color: var(--sg-ink);
  font: 900 max(17px, calc(36 * var(--u)))/1 var(--sg-font);
  gap: calc(18 * var(--u));
}
html[data-ui="v2"] #battleClock { gap: calc(6 * var(--u)); }
html[data-ui="v2"] #battleClock::before { width: calc(26 * var(--u)); height: calc(36 * var(--u)); }
/* 带速小牌（老板 10-31 二轮第 3 问重做）：竖版勋章牌，挂在回合牌右边（回合牌不动、照旧正中；最窄 380u 时右沿 550u）。
   左沿 562u、宽 148u：离回合牌 ≥ 12u、右边离壳 10u。高度跟名字走（1～3 行），比木条长时像勋章垂下来一截；右上角打击数字按它的下沿让（battle-ui.js measureTally）。
   上：速度翅膀徽（头像 44u 金边圆，两侧一对后掠金翅，--wing-svg 遮罩 + 渐变，皇冠没了）；中：名字居中、最多 3 行全显示、不省略，
   字号按名字长度分三档（JS 开战只设一次 .n1/.n2/.n3，不读布局）；下：「战速」小签 + 「×N」金字，两边一小片翅膀点缀。
   自己带：亮金边 + 顶上「你在带速」金绶带；别人带：暗金边。入场只放一次（.intro），之后完全静止；没人带速整块 hidden。
   只看不点：#playHud 整层穿透，它写 pointer-events: none。 */
html[data-ui="v2"] #battleCarry {
  position: absolute; z-index: 3; overflow: hidden;
  left: calc(562 * var(--u)); top: calc(var(--sat) + 16 * var(--u));
  box-sizing: border-box; width: calc(148 * var(--u));
  display: flex; flex-direction: column; align-items: center; gap: calc(5 * var(--u));
  padding: calc(8 * var(--u)) calc(7 * var(--u)) calc(10 * var(--u));
  border-radius: calc(18 * var(--u)) calc(18 * var(--u)) calc(30 * var(--u)) calc(30 * var(--u));
  background: linear-gradient(180deg, rgba(56, 36, 16, 0.95), rgba(24, 14, 6, 0.95));
  box-shadow: inset 0 0 0 calc(2 * var(--u)) #9a7230, inset 0 0 calc(12 * var(--u)) rgba(255, 217, 119, 0.12), 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.5);
  color: #fff3d6;
  pointer-events: none;
}
html[data-ui="v2"] #shell:not(.battling) #battleCarry { visibility: hidden; }
html[data-ui="v2"] #battleCarry.self {
  background: linear-gradient(180deg, rgba(72, 46, 16, 0.96), rgba(30, 18, 6, 0.96));
  box-shadow: inset 0 0 0 calc(3 * var(--u)) var(--sg-gold-hi), inset 0 0 calc(14 * var(--u)) rgba(255, 217, 119, 0.3), 0 0 0 calc(2 * var(--u)) rgba(230, 168, 23, 0.6), 0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, 0.5);
}
/* 「你在带速」金绶带：自己带时才占位（不带时 display: none，牌子不多出这一截）。 */
html[data-ui="v2"] #battleCarry .bcSelf {
  display: none; margin: calc(-2 * var(--u)) 0 0;
  padding: calc(2 * var(--u)) calc(10 * var(--u)); border-radius: 999px;
  background: linear-gradient(var(--sg-gold-hi), var(--sg-gold)); box-shadow: 0 0 0 calc(2 * var(--u)) var(--sg-wood-dk);
  color: #3a220c; font: 900 max(9px, calc(15 * var(--u)))/1.2 var(--sg-font); font-style: normal; white-space: nowrap;
}
html[data-ui="v2"] #battleCarry.self .bcSelf { display: block; }
/* 翅膀徽：头像在中间，左右两片翅膀的根藏在头像后面、尖往上后掠。外层 .bcWing 定位 + 深褐描边（drop-shadow 描遮罩的轮廓），里层 i 是金色翅膀本体（入场时它张开）。 */
html[data-ui="v2"] #battleCarry .bcBadge { position: relative; flex: none; width: calc(128 * var(--u)); height: calc(50 * var(--u)); }
html[data-ui="v2"] #battleCarry .bcWing {
  position: absolute; top: calc(2 * var(--u)); width: calc(50 * var(--u)); height: calc(38 * var(--u));
  filter: drop-shadow(0 0 calc(1.5 * var(--u)) #3a220c) drop-shadow(0 calc(2 * var(--u)) 0 rgba(58, 34, 12, 0.85));
}
html[data-ui="v2"] #battleCarry .bcWing.r { left: calc(74 * var(--u)); }
html[data-ui="v2"] #battleCarry .bcWing.l { left: calc(4 * var(--u)); transform: scaleX(-1); }
html[data-ui="v2"] #battleCarry .bcWing > i {
  position: absolute; inset: 0; transform-origin: 6% 84%;
  background: linear-gradient(170deg, #fff6c8 0%, var(--sg-gold-hi) 38%, var(--sg-gold) 72%, #b8780c 100%);
  -webkit-mask: var(--wing-svg) center / contain no-repeat; mask: var(--wing-svg) center / contain no-repeat;
}
html[data-ui="v2"] #battleCarry .bcFace {
  position: absolute; left: calc(42 * var(--u)); top: calc(3 * var(--u));
  width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #fffdf5, #f6e2b0 62%, #ddb469);
  box-shadow: 0 0 0 calc(2 * var(--u)) var(--sg-gold), 0 0 0 calc(4 * var(--u)) var(--sg-wood-dk);
}
html[data-ui="v2"] #battleCarry .bcFace canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
/* 找不到头像（队伍同步晚了、不在队伍名单里）：圆里是一枚深色底的金翅膀，等 team.sync 补上。 */
html[data-ui="v2"] #battleCarry.noFace .bcFace { background: radial-gradient(circle at 50% 40%, #5a3a16, #2a180a); }
html[data-ui="v2"] #battleCarry.noFace .bcFace canvas { visibility: hidden; }
html[data-ui="v2"] #battleCarry.noFace .bcFace::before {
  content: ""; position: absolute; inset: 24% 18% 26% 20%; background: var(--sg-gold-hi);
  -webkit-mask: var(--wing-svg) center / contain no-repeat; mask: var(--wing-svg) center / contain no-repeat;
}
/* 名字：不 nowrap、不省略、不截；中英文混排、长串数字字母也能在任意处折（老板：名字任何长度都完整显示）。 */
html[data-ui="v2"] #battleCarry .bcName {
  display: block; width: 100%; text-align: center;
  white-space: normal; overflow-wrap: anywhere; word-break: break-all;
  color: #fff3d6; font: 800 var(--fs-s)/1.25 var(--sg-font);
  text-shadow: 0 calc(1.5 * var(--u)) 0 #1a0e04;
}
html[data-ui="v2"] #battleCarry.n2 .bcName { font-size: var(--fs-xs); }
html[data-ui="v2"] #battleCarry.n3 .bcName { font-size: max(9px, calc(16 * var(--u))); }
html[data-ui="v2"] #battleCarry .bcMul { display: flex; align-items: center; justify-content: center; gap: calc(4 * var(--u)); white-space: nowrap; }
html[data-ui="v2"] #battleCarry .bcMul small { color: #e8cf96; font: 700 max(9px, calc(15 * var(--u)))/1 var(--sg-font); }
html[data-ui="v2"] #battleCarry .bcMul strong { color: var(--sg-gold-hi); font: 900 var(--fs-m)/1 var(--sg-font); font-variant-numeric: tabular-nums; text-shadow: 0 calc(2 * var(--u)) 0 #3a220c; }
html[data-ui="v2"] #battleCarry .bcTick {
  flex: none; width: calc(14 * var(--u)); height: calc(11 * var(--u)); background: var(--sg-gold);
  -webkit-mask: var(--wing-svg) center / contain no-repeat; mask: var(--wing-svg) center / contain no-repeat;
}
html[data-ui="v2"] #battleCarry .bcTick.l { transform: scaleX(-1); }
/* 入场（只在前台新开的一场放一次，JS 加 .intro、最后一段 bcSheen 放完摘掉）：牌子从上往下落、头像一弹、两片翅膀从根部张开、一道光扫过；
   之后完全静止（不循环、不呼吸）。全是 transform / opacity，不动布局。扫光是一条斜光带用 transform 横扫（牌子 overflow: hidden 裁住）。 */
html[data-ui="v2"] #battleCarry::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 60%; pointer-events: none;
  background: linear-gradient(105deg, transparent 20%, rgba(255, 236, 170, 0.5) 50%, transparent 80%);
  opacity: 0;
}
html[data-ui="v2"] #battleCarry.intro { animation: bcIn 260ms cubic-bezier(.2, .9, .3, 1.15) both; }
html[data-ui="v2"] #battleCarry.intro .bcFace { animation: bcPop 300ms 60ms cubic-bezier(.3, 1.6, .5, 1) both; }
html[data-ui="v2"] #battleCarry.intro .bcWing > i { animation: bcFlap 320ms 120ms cubic-bezier(.25, 1.5, .5, 1) both; }
html[data-ui="v2"] #battleCarry.intro::after { animation: bcSheen 560ms 320ms ease-out both; }
@keyframes bcIn { from { opacity: 0; transform: translateY(calc(-12 * var(--u))); } to { opacity: 1; transform: none; } }
@keyframes bcPop { from { transform: scale(0.6); } to { transform: none; } }
@keyframes bcFlap { from { opacity: 0; transform: rotate(38deg) scale(0.35); } to { opacity: 1; transform: none; } }
@keyframes bcSheen { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(270%); } }
/* 省电挂机：照全局规矩所有动画停住。 */
html[data-ui="v2"] #shell.saving #battleCarry, html[data-ui="v2"] #shell.saving #battleCarry * { animation: none !important; }
html[data-ui="v2"] #shell.saving #battleCarry::after { animation: none !important; opacity: 0; }
/* 系统设了「减少动画」：JS 不加 .intro；这里再兜一道，万一加上了也不动。 */
@media (prefers-reduced-motion: reduce) {
  html[data-ui="v2"] #battleCarry.intro, html[data-ui="v2"] #battleCarry.intro .bcFace, html[data-ui="v2"] #battleCarry.intro .bcWing > i { animation: none; }
  html[data-ui="v2"] #battleCarry.intro::after { animation: none; opacity: 0; }
}
/* 提示条：木条下面一行亮字。 */
html[data-ui="v2"] #battleBar { top: 15.5%; font: 800 var(--fs-m)/1.3 var(--sg-font); }
/* 指令盘：一圈虚线绳，7 颗金色圆钮配褐色图标（照 APK 战斗钮），外圈和下沿名牌按指令分颜色。 */
html[data-ui="v2"] #battleRingRope {
  position: absolute; left: 50.556%; top: 62.306%; width: 38%; height: 28.39%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  border: calc(6 * var(--u)) dashed rgba(122, 74, 30, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 0 calc(4 * var(--u)) rgba(251, 232, 189, 0.28), inset 0 0 0 calc(4 * var(--u)) rgba(251, 232, 189, 0.28);
  pointer-events: none;
}
html[data-ui="v2"] #battle .ringBtn {
  width: calc(100 * var(--u)); height: calc(100 * var(--u));
  box-sizing: border-box;
  border: calc(4 * var(--u)) solid var(--sg-wood-dk);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #fff3c4 0%, #f7d36f 42%, #dd9c34 78%, #b2721f 100%);
  box-shadow: 0 0 0 calc(5 * var(--u)) var(--rb), 0 calc(6 * var(--u)) 0 rgba(30, 16, 4, 0.75), inset 0 calc(4 * var(--u)) 0 rgba(255, 255, 255, 0.5), inset 0 calc(-6 * var(--u)) calc(10 * var(--u)) rgba(120, 60, 10, 0.35);
  color: #6b3510;
  transition: filter 80ms linear, transform 80ms ease-out;
}
html[data-ui="v2"] #battle .ringBtn:hover { filter: brightness(1.12); }
html[data-ui="v2"] #battle .ringBtn:active {
  transform: translate(-50%, -46%) scale(0.94);
  background: radial-gradient(circle at 50% 30%, #dcae72 0%, #b67d42 50%, #7e4b1e 100%);
  color: #3c1b05;
  box-shadow: 0 0 0 calc(5 * var(--u)) var(--rb), 0 calc(2 * var(--u)) 0 rgba(30, 16, 4, 0.75), inset 0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.35);
}
html[data-ui="v2"] #battle .ringIcon {
  position: absolute; left: 50%; top: 45%;
  width: calc(60 * var(--u)); height: calc(60 * var(--u));
  transform: translate(-50%, -50%);
  pointer-events: none;
}
html[data-ui="v2"] #battle .ringIcon svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 calc(1.5 * var(--u)) 0 rgba(255, 244, 210, 0.75)); }
html[data-ui="v2"] #battle .ringLab {
  position: absolute; left: 50%; bottom: calc(-14 * var(--u)); transform: translateX(-50%);
  padding: calc(3 * var(--u)) calc(12 * var(--u));
  border: calc(2 * var(--u)) solid var(--sg-wood-dk);
  border-radius: 999px;
  background: var(--rb); color: #fff;
  font: 900 var(--fs-xs)/1.15 var(--sg-font);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  box-shadow: 0 calc(2 * var(--u)) 0 rgba(30, 16, 4, 0.55);
  pointer-events: none;
}
html[data-ui="v2"] #battle .ringBtn.rb-attack { --rb: #d4502e; }
html[data-ui="v2"] #battle .ringBtn.rb-guard { --rb: #3577c0; }
html[data-ui="v2"] #battle .ringBtn.rb-spirit { --rb: #8352c8; }
html[data-ui="v2"] #battle .ringBtn.rb-capture { --rb: #4f9e36; }
html[data-ui="v2"] #battle .ringBtn.rb-item { --rb: #c98a12; }
html[data-ui="v2"] #battle .ringBtn.rb-pet { --rb: #a8692e; }
html[data-ui="v2"] #battle .ringBtn.rb-escape { --rb: #7d776c; }

/* ---------- 新版战斗：左下角战况面板 #battleBoard、小牌子 #battleBoardChip、战后战报 #battleReport 的样式在 battle-ui.css ----------
   （S4 M3 从这里搬走：游戏、资源库「原版战斗」「技能实验室」三处引同一份；index.html 在本文件后面引它）。 */
/* 组队：队员的「逃跑」灰掉（只有队长能带队逃跑），点了只提示。 */
html[data-ui="v2"] #battle .ringBtn.off { filter: grayscale(1) brightness(0.85); opacity: 0.55; }
/* 自动战斗钮：游戏区右下角一颗小齿轮，下面写「自动」，贴着聊天框上沿。关着铜色，开着绿色、转圈。走路和战斗中都在，随时开关；
   聊天展开时跟着纸的上沿上去。 */
html[data-ui="v2"] #battleAuto {
  right: calc(12 * var(--u)); top: auto; bottom: calc(100% + 12 * var(--u));
  width: calc(56 * var(--u));
  color: #c08a3e;
  --gearEdge: #3a220c;
}
html[data-ui="v2"] #hudBot.chatOpen #battleAuto { bottom: calc(118 * var(--u) + var(--sab) + var(--chatOpenH) + 12 * var(--u)); }
html[data-ui="v2"] #battleAuto .autoIcon { display: block; width: calc(48 * var(--u)); height: calc(48 * var(--u)); }
html[data-ui="v2"] #battleAuto .autoIcon svg {
  display: block; width: 100%; height: 100%;
  filter: drop-shadow(0 calc(2 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.55));
}
html[data-ui="v2"] #battleAuto span {
  margin-top: calc(-5 * var(--u));
  padding: calc(2 * var(--u)) calc(7 * var(--u));
  border: calc(2 * var(--u)) solid var(--sg-wood-dk);
  border-radius: 999px;
  background: linear-gradient(#5a3d22, #2c1a0a);
  color: #f6e2bd;
  font: 900 var(--fs-xs)/1.1 var(--sg-font);
  white-space: nowrap;
  box-shadow: 0 calc(2 * var(--u)) 0 rgba(0, 0, 0, 0.45);
}
html[data-ui="v2"] #battleAuto.on { color: #47c23b; --gearEdge: #134d0c; }
html[data-ui="v2"] #battleAuto.on .autoIcon svg { filter: drop-shadow(0 0 calc(5 * var(--u)) rgba(130, 255, 110, 0.9)); }
html[data-ui="v2"] #battleAuto.on span { border-color: #134d0c; background: linear-gradient(#7fdc5f, #2f8a25); color: #fff; text-shadow: 0 1px 1px #0b3d12; }
@media (prefers-reduced-motion: no-preference) {
  html[data-ui="v2"] #battleAuto.on .autoIcon svg { animation: battleAutoSpin 3.2s linear infinite; will-change: transform; }
}
@keyframes battleAutoSpin { to { transform: rotate(360deg); } }
/* 人物动作、宠物动作（act-ui.js，BATTLEACT.md）：「自动」左边同一排两颗（中心隔 80u，牌子四个字也不挤），同样大小。
   圆里是头像，右下角徽章是现在的动作（剑红、盾蓝、星紫）；开着自动时外圈亮绿；没宠物、宠物倒下、冻结灰掉；记的精灵不在身上牌子发红。 */
html[data-ui="v2"] .actBtn {
  position: absolute; z-index: 3; padding: 0;
  display: flex; flex-direction: column; align-items: center;
  border: 0; background: none; pointer-events: auto; cursor: var(--bone-cur);
  top: auto; bottom: calc(100% + 12 * var(--u)); width: calc(56 * var(--u));
  --c: #c08a3e;
  transition: filter 80ms linear, transform 80ms ease-out;
}
html[data-ui="v2"] #actPet { right: calc(92 * var(--u)); }
html[data-ui="v2"] #actChar { right: calc(172 * var(--u)); }
html[data-ui="v2"] #hudBot.chatOpen .actBtn { bottom: calc(118 * var(--u) + var(--sab) + var(--chatOpenH) + 12 * var(--u)); }
html[data-ui="v2"] .actBtn:hover { filter: brightness(1.12); }
html[data-ui="v2"] .actBtn:active { transform: scale(0.94); }
html[data-ui="v2"] .actBtn .actRing {
  position: relative; display: block; box-sizing: border-box;
  width: calc(48 * var(--u)); height: calc(48 * var(--u)); padding: calc(4 * var(--u)); border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 calc(2 * var(--u)) #3a220c, 0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.55);
}
html[data-ui="v2"] .actBtn .actFace { display: block; width: 100%; height: 100%; border-radius: 50%; background: #f6e2bd; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35); }
html[data-ui="v2"] .actBtn .actBadge {
  position: absolute; right: calc(-8 * var(--u)); bottom: calc(-6 * var(--u));
  width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--c); box-shadow: 0 0 0 calc(2 * var(--u)) #fff3d6, 0 1px 2px rgba(0, 0, 0, 0.6);
}
html[data-ui="v2"] .actBtn .actBadge:empty { display: none; }
html[data-ui="v2"] .actBtn .actBadge svg { width: 62%; height: 62%; fill: #fff; }
html[data-ui="v2"] .actBtn span {
  max-width: calc(78 * var(--u)); overflow: hidden; text-overflow: ellipsis;
  margin-top: calc(-5 * var(--u));
  padding: calc(2 * var(--u)) calc(6 * var(--u));
  border: calc(2 * var(--u)) solid var(--sg-wood-dk); border-radius: 999px;
  background: linear-gradient(#5a3d22, #2c1a0a);
  color: #f6e2bd; font: 900 max(9px, calc(17 * var(--u)))/1.15 var(--sg-font); white-space: nowrap;
  box-shadow: 0 calc(2 * var(--u)) 0 rgba(0, 0, 0, 0.45);
}
html[data-ui="v2"] .actBtn.atk { --c: #d8452b; }
html[data-ui="v2"] .actBtn.grd { --c: #2f74c8; }
html[data-ui="v2"] .actBtn.mag { --c: #8a3fc0; }
html[data-ui="v2"] .actBtn.off { --c: #8c7a63; }
html[data-ui="v2"] .actBtn.off .actFace { filter: grayscale(1) brightness(0.75); }
html[data-ui="v2"] .actBtn.live .actRing { box-shadow: 0 0 0 calc(2 * var(--u)) #134d0c, 0 0 0 calc(4 * var(--u)) #6fe36a, 0 0 calc(10 * var(--u)) calc(2 * var(--u)) rgba(111, 227, 106, 0.75); }
html[data-ui="v2"] .actBtn.warn span { border-color: #5c0f06; background: linear-gradient(#e0745a, #a3220f); color: #fff; }
/* 选的纸（act-ui.js）：从聊天上沿拉出来，人物 / 宠物两页；点一块立刻存（服上回了才描金边）。标签条不动，下面 .acBody 滚。
   #playHud 整层点击穿透，纸要自己接住（pointer-events: auto）：漏了的话点纸是点到下面的地图，人走过去，纸当成点了外面收起。 */
html[data-ui="v2"] #actSheet {
  position: absolute; z-index: 8; left: calc(8 * var(--u)); right: calc(8 * var(--u)); bottom: calc(var(--botH) + 8 * var(--u));
  max-height: calc(100cqh - var(--topH) - var(--botH) - 16 * var(--u)); box-sizing: border-box;
  display: flex; flex-direction: column; overflow: hidden;
  pointer-events: auto;
  border-radius: calc(24 * var(--u));
  background: linear-gradient(#fff6dc, #efd090);
  box-shadow: 0 0 0 calc(5 * var(--u)) var(--sg-wood), 0 calc(-8 * var(--u)) calc(28 * var(--u)) rgba(0, 0, 0, 0.55), inset 0 calc(4 * var(--u)) 0 var(--sg-gold-line);
  color: var(--sg-ink); font: 700 var(--fs-s)/1.35 var(--sg-font);
  cursor: default;
}
html[data-ui="v2"] #actSheet[hidden] { display: none; }
html[data-ui="v2"] #actSheet.busy .acBody { opacity: 0.7; }
html[data-ui="v2"] #actSheet .acTabs { flex: none; display: flex; gap: calc(10 * var(--u)); padding: calc(14 * var(--u)) calc(14 * var(--u)) 0; background: linear-gradient(180deg, #a06c38, #6e4520); }
html[data-ui="v2"] #actSheet .acTab {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u));
  border: 0; border-radius: calc(20 * var(--u)) calc(20 * var(--u)) 0 0; background: rgba(255, 243, 214, 0.18); color: #f6e2bd; text-align: left; cursor: pointer;
  font: 900 var(--fs-m)/1.2 var(--sg-font);
}
html[data-ui="v2"] #actSheet .acTab small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e8cfa4; font: 700 var(--fs-xs)/1.25 var(--sg-font); }
html[data-ui="v2"] #actSheet .acTab > div { min-width: 0; }
html[data-ui="v2"] #actSheet .acTab.on { background: linear-gradient(#fff6dc, #fbe8bd); color: var(--sg-ink); }
html[data-ui="v2"] #actSheet .acTab.on small { color: var(--sg-ink-soft); }
html[data-ui="v2"] #actSheet .acAv { flex: none; width: calc(50 * var(--u)); height: calc(50 * var(--u)); border-radius: 50%; background: #f6e2bd; box-shadow: 0 0 0 calc(3 * var(--u)) var(--sg-wood); }
html[data-ui="v2"] #actSheet .acX {
  flex: none; align-self: center; width: calc(72 * var(--u)); height: calc(56 * var(--u)); margin-bottom: calc(10 * var(--u));
  border: calc(3 * var(--u)) solid var(--sg-wood-dk); border-radius: calc(14 * var(--u)); background: var(--sg-paper); color: var(--sg-ink);
  font: 900 var(--fs-s)/1 var(--sg-font); cursor: pointer;
}
html[data-ui="v2"] #actSheet .acBody {
  flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  padding: calc(16 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u));
}
html[data-ui="v2"] #actSheet .acLead { margin: 0 0 calc(14 * var(--u)); color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.5 var(--sg-font); }
html[data-ui="v2"] #actSheet .acLead b { color: var(--sg-ink); }
html[data-ui="v2"] #actSheet .acIc { display: flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; background: var(--c, #8a3fc0); }
html[data-ui="v2"] #actSheet .acIc svg { width: 56%; height: 56%; fill: #fff; }
html[data-ui="v2"] #actSheet .atk { --c: #d8452b; }
html[data-ui="v2"] #actSheet .grd { --c: #2f74c8; }
html[data-ui="v2"] #actSheet .mag { --c: #8a3fc0; }
html[data-ui="v2"] #actSheet .acTiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(14 * var(--u)); }
html[data-ui="v2"] #actSheet .acTile {
  position: relative; height: calc(150 * var(--u)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(8 * var(--u));
  border: 0; border-radius: calc(24 * var(--u)); background: #fffaf0; color: var(--sg-ink); cursor: pointer;
  box-shadow: inset 0 0 0 calc(3 * var(--u)) rgba(122, 74, 30, 0.35), 0 calc(4 * var(--u)) 0 rgba(58, 34, 12, 0.25);
}
html[data-ui="v2"] #actSheet .acTile .acIc { width: calc(72 * var(--u)); height: calc(72 * var(--u)); box-shadow: 0 0 0 calc(4 * var(--u)) #fff3d6, 0 0 0 calc(7 * var(--u)) var(--c), 0 calc(5 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, 0.3); }
html[data-ui="v2"] #actSheet .acTile b { font: 900 var(--fs-m)/1.1 var(--sg-font); }
html[data-ui="v2"] #actSheet .acTile small { color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.1 var(--sg-font); }
html[data-ui="v2"] #actSheet .on { background: linear-gradient(#fff4cf, #ffe39a); box-shadow: inset 0 0 0 calc(5 * var(--u)) var(--sg-gold), 0 0 0 calc(2 * var(--u)) var(--sg-wood), 0 calc(5 * var(--u)) calc(14 * var(--u)) rgba(230, 168, 23, 0.45); }
html[data-ui="v2"] #actSheet button:disabled { opacity: 0.5; filter: grayscale(0.9); cursor: default; }
html[data-ui="v2"] #actSheet .acNow {
  position: absolute; right: calc(10 * var(--u)); top: calc(-10 * var(--u)); padding: calc(2 * var(--u)) calc(12 * var(--u)); border-radius: 999px;
  background: var(--sg-ok); color: #fff; font: 900 var(--fs-xs)/1.4 var(--sg-font); font-style: normal; box-shadow: 0 0 0 calc(2 * var(--u)) #fff3d6;
}
html[data-ui="v2"] #actSheet .acSec { display: flex; align-items: center; gap: calc(14 * var(--u)); margin: calc(22 * var(--u)) calc(4 * var(--u)) calc(12 * var(--u)); color: var(--sg-wood); font: 900 var(--fs-xs)/1.2 var(--sg-font); }
html[data-ui="v2"] #actSheet .acSec::after { content: ""; flex: 1; height: calc(3 * var(--u)); background: repeating-linear-gradient(90deg, rgba(122, 74, 30, 0.45) 0 calc(10 * var(--u)), transparent calc(10 * var(--u)) calc(20 * var(--u))); }
html[data-ui="v2"] #actSheet .acList { display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
html[data-ui="v2"] #actSheet .acRow {
  position: relative; display: grid; grid-template-columns: calc(56 * var(--u)) 1fr auto; align-items: center; gap: calc(14 * var(--u));
  padding: calc(12 * var(--u)) calc(16 * var(--u)); border: 0; border-radius: calc(20 * var(--u)); background: #fffaf0; color: var(--sg-ink); text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(122, 74, 30, 0.3);
}
html[data-ui="v2"] #actSheet .acRow .acIc { width: calc(56 * var(--u)); height: calc(56 * var(--u)); }
html[data-ui="v2"] #actSheet .acRow b { display: block; font: 900 var(--fs-s)/1.25 var(--sg-font); }
html[data-ui="v2"] #actSheet .acRow small { display: block; color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.35 var(--sg-font); }
html[data-ui="v2"] #actSheet .acRow small em { color: #b2560c; font-style: normal; }
html[data-ui="v2"] #actSheet .acRow.low { box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(192, 40, 30, 0.45); }
html[data-ui="v2"] #actSheet .acRow.on { box-shadow: inset 0 0 0 calc(4 * var(--u)) var(--sg-gold), 0 0 0 calc(2 * var(--u)) var(--sg-wood); }
html[data-ui="v2"] #actSheet .acMp { padding: calc(3 * var(--u)) calc(12 * var(--u)); border-radius: 999px; background: #1f5f9e; color: #fff; font: 900 var(--fs-xs)/1.3 var(--sg-font); white-space: nowrap; }
html[data-ui="v2"] #actSheet .acWarn { margin: calc(14 * var(--u)) 0 0; padding: calc(10 * var(--u)) calc(14 * var(--u)); border-radius: calc(14 * var(--u)); background: #fff1ea; box-shadow: inset 0 0 0 calc(2 * var(--u)) #e0745a; color: var(--sg-bad); font: 800 var(--fs-xs)/1.45 var(--sg-font); }
html[data-ui="v2"] #actSheet .acFoot { margin: calc(18 * var(--u)) 0 0; padding: calc(12 * var(--u)) calc(16 * var(--u)); border-radius: calc(16 * var(--u)); background: rgba(58, 30, 6, 0.86); color: #ffe08a; font: 800 var(--fs-xs)/1.55 var(--sg-font); }
html[data-ui="v2"] #actSheet .acFoot b { color: #fff; }
html[data-ui="v2"] #actSheet .acFoot em { color: #9be27f; font-style: normal; }
html[data-ui="v2"] #actSheet .acEmpty { margin: calc(30 * var(--u)) 0; text-align: center; color: var(--sg-ink-soft); font: 800 var(--fs-s)/1.6 var(--sg-font); }
html[data-ui="v2"] #actSheet .acPet {
  display: grid; grid-template-columns: calc(96 * var(--u)) 1fr auto; align-items: center; gap: calc(18 * var(--u));
  padding: calc(14 * var(--u)) calc(18 * var(--u)); border-radius: calc(24 * var(--u)); background: #fffaf0; box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(122, 74, 30, 0.3);
}
html[data-ui="v2"] #actSheet .acPf { width: calc(96 * var(--u)); height: calc(96 * var(--u)); border-radius: calc(20 * var(--u)); background: #3a6f9e; box-shadow: 0 0 0 calc(3 * var(--u)) var(--sg-wood); }
html[data-ui="v2"] #actSheet .acPet b { display: block; font: 900 var(--fs-m)/1.25 var(--sg-font); }
html[data-ui="v2"] #actSheet .acPet small { display: block; color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.4 var(--sg-font); }
html[data-ui="v2"] #actSheet .acHp { position: relative; display: block; height: calc(14 * var(--u)); margin-top: calc(6 * var(--u)); border-radius: calc(7 * var(--u)); background: #3a220c; overflow: hidden; }
html[data-ui="v2"] #actSheet .acHp b { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#ff8a7a, #d8452b); }
html[data-ui="v2"] #actSheet .acTag { padding: calc(4 * var(--u)) calc(14 * var(--u)); border-radius: 999px; background: rgba(47, 122, 37, 0.14); color: var(--sg-ok); font: 900 var(--fs-xs)/1.3 var(--sg-font); white-space: nowrap; }
html[data-ui="v2"] #actSheet .acTag.off { background: rgba(122, 90, 58, 0.15); color: var(--sg-ink-soft); }
html[data-ui="v2"] #actSheet .acSkills { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(12 * var(--u)); }
html[data-ui="v2"] #actSheet .acSk {
  position: relative; display: grid; grid-template-columns: calc(50 * var(--u)) 1fr; grid-template-rows: auto auto; column-gap: calc(10 * var(--u)); align-content: center;
  height: calc(118 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)); box-sizing: border-box;
  border: 0; border-radius: calc(20 * var(--u)); background: #fffaf0; color: var(--sg-ink); text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(122, 74, 30, 0.32), 0 calc(4 * var(--u)) 0 rgba(58, 34, 12, 0.2);
}
html[data-ui="v2"] #actSheet .acSk .acIc { grid-row: span 2; align-self: center; width: calc(50 * var(--u)); height: calc(50 * var(--u)); }
html[data-ui="v2"] #actSheet .acSk b { align-self: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 900 var(--fs-s)/1.2 var(--sg-font); }
html[data-ui="v2"] #actSheet .acSk small { color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.3 var(--sg-font); }
html[data-ui="v2"] #actSheet .acSk:disabled small { color: var(--sg-bad); }
html[data-ui="v2"] #actSheet .acSk.empty {
  display: flex; align-items: center; justify-content: center; color: #b39770; font: 800 var(--fs-xs)/1 var(--sg-font); background-color: transparent; cursor: default;
  background-image: repeating-linear-gradient(135deg, rgba(122, 74, 30, 0.08) 0 calc(10 * var(--u)), transparent calc(10 * var(--u)) calc(20 * var(--u)));
}
html[data-ui="v2"] #actSheet .acDesc { margin: calc(14 * var(--u)) 0 0; padding: calc(10 * var(--u)) calc(14 * var(--u)); border-radius: calc(16 * var(--u)); background: #fffaf0; box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(230, 168, 23, 0.6); color: var(--sg-ink-soft); font: 800 var(--fs-xs)/1.5 var(--sg-font); }
html[data-ui="v2"] #actSheet .acDesc b { color: var(--sg-ink); }
/* 原地遇敌钮：自动战斗齿轮正上方，圆形石盘上画道具图包里的 24702（红宝珠嵌骷髅），下面一块字牌「遇敌」；开着字牌变红写「停止」、宝珠一圈红光一明一暗。
   聊天展开时和齿轮一起跟着纸的上沿上去。 */
html[data-ui="v2"] #encBtn {
  right: calc(12 * var(--u)); top: auto; bottom: calc(100% + 24 * var(--u) + var(--gearH));
  width: calc(56 * var(--u));
}
html[data-ui="v2"] #hudBot.chatOpen #encBtn { bottom: calc(118 * var(--u) + var(--sab) + var(--chatOpenH) + 24 * var(--u) + var(--gearH)); }
html[data-ui="v2"] #encBtn .encIcon {
  display: block; position: relative; box-sizing: border-box;
  width: calc(48 * var(--u)); height: calc(48 * var(--u));
  border: calc(2 * var(--u)) solid #3a220c; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #6b4a2c, #2c1a0a 72%);
  box-shadow: 0 calc(2 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.55), inset 0 0 0 calc(2 * var(--u)) rgba(232, 190, 120, 0.35);
}
html[data-ui="v2"] #encBtn .encIcon canvas { position: absolute; left: 6%; top: 4%; width: 88%; height: 88%; image-rendering: pixelated; }
html[data-ui="v2"] #encBtn span {
  margin-top: calc(-5 * var(--u));
  padding: calc(2 * var(--u)) calc(7 * var(--u));
  border: calc(2 * var(--u)) solid var(--sg-wood-dk);
  border-radius: 999px;
  background: linear-gradient(#5a3d22, #2c1a0a);
  color: #f6e2bd;
  font: 900 var(--fs-xs)/1.1 var(--sg-font);
  white-space: nowrap;
  box-shadow: 0 calc(2 * var(--u)) 0 rgba(0, 0, 0, 0.45);
}
html[data-ui="v2"] #encBtn.on .encIcon {
  border-color: #7a1408;
  box-shadow: 0 0 calc(10 * var(--u)) calc(3 * var(--u)) rgba(255, 70, 40, 0.85), inset 0 0 calc(8 * var(--u)) rgba(255, 90, 50, 0.6);
}
html[data-ui="v2"] #encBtn.on span { border-color: #5c0f06; background: linear-gradient(#ef6a4a, #a3220f); color: #fff; text-shadow: 0 1px 1px #4a0a03; }
@media (prefers-reduced-motion: no-preference) {
  html[data-ui="v2"] #encBtn.on .encIcon { isolation: isolate; }
  html[data-ui="v2"] #encBtn.on .encIcon::after {
    content: ""; position: absolute; inset: calc(-2 * var(--u)); z-index: -1;
    border-radius: 50%; pointer-events: none;
    box-shadow: 0 0 calc(18 * var(--u)) calc(6 * var(--u)) rgba(255, 110, 60, 1), inset 0 0 calc(12 * var(--u)) rgba(255, 140, 80, 0.8);
    opacity: 0;
    animation: encGlow 1.4s ease-in-out infinite;
  }
}
/* 呼吸光只动透明度（合成器做，不重画）：以前直接动 box-shadow，开着原地遇敌一整夜每帧重画这颗钮（docs/agent/FORGE.md 第八节）。 */
@keyframes encGlow {
  50% { opacity: 1; }
}
/* 好友钮（friend-ui.js，docs/agent/FRIEND.md）：遇敌钮正上方，同一列、同样大小；第 k 颗钮 bottom = 100% + 12u·(k+1) + k·gearH（齿轮 k=0、遇敌 1、好友 2）。
   有没读的私聊右上角红点写数。 */
html[data-ui="v2"] #friendBtn {
  right: calc(12 * var(--u)); top: auto; bottom: calc(100% + 36 * var(--u) + 2 * var(--gearH));
  width: calc(56 * var(--u));
}
html[data-ui="v2"] #hudBot.chatOpen #friendBtn { bottom: calc(118 * var(--u) + var(--sab) + var(--chatOpenH) + 36 * var(--u) + 2 * var(--gearH)); }
html[data-ui="v2"] #friendBtn .fdIcon {
  display: block; box-sizing: border-box;
  width: calc(48 * var(--u)); height: calc(48 * var(--u));
  border: calc(2 * var(--u)) solid #3a220c; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #6b4a2c, #2c1a0a 72%);
  box-shadow: 0 calc(2 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.55), inset 0 0 0 calc(2 * var(--u)) rgba(232, 190, 120, 0.35);
}
html[data-ui="v2"] #friendBtn .fdIcon svg { display: block; width: 100%; height: 100%; }
html[data-ui="v2"] #friendBtn span {
  margin-top: calc(-5 * var(--u));
  padding: calc(2 * var(--u)) calc(7 * var(--u));
  border: calc(2 * var(--u)) solid var(--sg-wood-dk); border-radius: 999px;
  background: linear-gradient(#5a3d22, #2c1a0a);
  color: #f6e2bd; font: 900 var(--fs-xs)/1.1 var(--sg-font); white-space: nowrap;
  box-shadow: 0 calc(2 * var(--u)) 0 rgba(0, 0, 0, 0.45);
}
html[data-ui="v2"] #friendBtn .fdBadge {
  position: absolute; right: calc(-6 * var(--u)); top: calc(-6 * var(--u));
  min-width: calc(26 * var(--u)); height: calc(26 * var(--u)); padding: 0 calc(5 * var(--u)); box-sizing: border-box;
  border-radius: 999px; background: #d22a1a; color: #fff; box-shadow: 0 0 0 calc(2 * var(--u)) #fff3d0;
  font: 900 var(--fs-xs)/calc(26 * var(--u)) var(--sg-font); text-align: center;
}
html[data-ui="v2"] #friendBtn .fdBadge[hidden] { display: none; }
/* 省电钮（view.js setSaver，docs/agent/FORGE.md 第八节）：原地遇敌开着才露出来，在遇敌钮左边、宠物动作钮正上方，同样大小。 */
html[data-ui="v2"] #saveBtn {
  right: calc(92 * var(--u)); top: auto; bottom: calc(100% + 24 * var(--u) + var(--gearH));
  width: calc(56 * var(--u));
}
html[data-ui="v2"] #hudBot.chatOpen #saveBtn { bottom: calc(118 * var(--u) + var(--sab) + var(--chatOpenH) + 24 * var(--u) + var(--gearH)); }
html[data-ui="v2"] #saveBtn .svIcon {
  display: block; box-sizing: border-box;
  width: calc(48 * var(--u)); height: calc(48 * var(--u));
  border: calc(2 * var(--u)) solid #3a220c; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #3b4a5c, #141b26 72%);
  box-shadow: 0 calc(2 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.55), inset 0 0 0 calc(2 * var(--u)) rgba(232, 190, 120, 0.35);
}
html[data-ui="v2"] #saveBtn .svIcon svg, html[data-ui="v2"] #saver .svIcon svg { display: block; width: 100%; height: 100%; }
html[data-ui="v2"] #saveBtn span {
  margin-top: calc(-5 * var(--u));
  padding: calc(2 * var(--u)) calc(7 * var(--u));
  border: calc(2 * var(--u)) solid var(--sg-wood-dk); border-radius: 999px;
  background: linear-gradient(#5a3d22, #2c1a0a);
  color: #f6e2bd; font: 900 var(--fs-xs)/1.1 var(--sg-font); white-space: nowrap;
  box-shadow: 0 calc(2 * var(--u)) 0 rgba(0, 0, 0, 0.45);
}
/* 省电时的整屏：纯黑（OLED 屏黑的地方不发光），中间一张暗色小卡，字也压暗；整块是一个钮，点哪儿都回来。
   卡每半分钟挪几像素（--svx/--svy，view.js paintSaver）。底下的界面动画全停（#shell.saving）。 */
html[data-ui="v2"] #saver {
  display: flex; align-items: center; justify-content: center;
  background: #000; cursor: pointer;
}
html[data-ui="v2"] #saver .svBox {
  box-sizing: border-box; width: calc(560 * var(--u)); max-width: 92%;
  padding: calc(26 * var(--u)) calc(30 * var(--u));
  border-radius: calc(22 * var(--u));
  background: #120c06; box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(224, 166, 64, 0.28);
  color: #b89a72; font: 700 var(--fs-s)/1.5 var(--sg-font);
  transform: translate(var(--svx, 0px), var(--svy, 0px));
  pointer-events: none;
}
html[data-ui="v2"] #saver .svHead { display: flex; align-items: center; gap: calc(12 * var(--u)); }
html[data-ui="v2"] #saver .svHead .svIcon { display: block; flex: none; width: calc(44 * var(--u)); height: calc(44 * var(--u)); opacity: 0.8; }
html[data-ui="v2"] #saver .svHead b { color: #d9b46a; font: 900 var(--fs-l)/1.2 var(--sg-font); }
html[data-ui="v2"] #saver p { margin: calc(10 * var(--u)) 0 0; }
html[data-ui="v2"] #saver .svSub { color: #8a7458; font-size: var(--fs-xs); }
html[data-ui="v2"] #saver .svGrid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(8 * var(--u));
  margin-top: calc(18 * var(--u));
}
html[data-ui="v2"] #saver .svGrid div {
  display: flex; flex-direction: column; align-items: center;
  padding: calc(10 * var(--u)) 0; border-radius: calc(12 * var(--u)); background: rgba(224, 166, 64, 0.07);
}
html[data-ui="v2"] #saver .svGrid small { color: #8a7458; font: 700 var(--fs-xs)/1.2 var(--sg-font); }
html[data-ui="v2"] #saver .svGrid b { margin-top: calc(4 * var(--u)); color: #e0c79c; font: 900 var(--fs-m)/1.2 var(--sg-font); white-space: nowrap; }
html[data-ui="v2"] #saver .svLine { color: #b89a72; }
html[data-ui="v2"] #saver .svGot { color: #9c8462; font-size: var(--fs-xs); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
html[data-ui="v2"] #saver .svWarn { color: #d27a52; }
html[data-ui="v2"] #saver .svWarn:empty { display: none; }
#shell.saving *:not(#saver):not(#saver *) { animation-play-state: paused !important; }

/* ---------- 好友面板（friend-ui.js）：和背包、邮件、组队同一套纸卡，铺到聊天上沿。列表页四个分页；聊天页气泡（自己的靠右金底）、底部输入。 ---------- */
html[data-ui="v2"] #friend .fdBody { gap: calc(10 * var(--u)); }
html[data-ui="v2"] #friend .fdList { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
html[data-ui="v2"] #friend .fdRow {
  position: relative; display: flex; align-items: center; gap: calc(8 * var(--u));
  padding: calc(8 * var(--u)) calc(10 * var(--u));
  border-radius: calc(12 * var(--u));
  background: rgba(255, 251, 238, 0.75); box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(167, 122, 69, 0.34);
}
html[data-ui="v2"] #friend .fdRow.tap { cursor: pointer; }
html[data-ui="v2"] #friend .fdRow.tap:active { background: rgba(255, 224, 150, 0.9); }
html[data-ui="v2"] #friend .fdRow.off .fdFace, html[data-ui="v2"] #friend .fdRow.off .fdInfo { opacity: 0.6; }
html[data-ui="v2"] #friend .fdFace {
  flex: none; width: calc(56 * var(--u)); height: calc(56 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #fffdf5, #f6e2b0 62%, #ddb469);
  box-shadow: 0 0 0 calc(2 * var(--u)) var(--sg-wood);
}
html[data-ui="v2"] #friend .fdInfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
html[data-ui="v2"] #friend .fdInfo b { font: 900 var(--fs-m)/1.15 var(--sg-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="v2"] #friend .fdInfo span { color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.25 var(--sg-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="v2"] #friend .fdTag {
  flex: none; padding: calc(4 * var(--u)) calc(8 * var(--u)); border-radius: 999px;
  background: var(--sg-night); color: #ffd75e; font: 800 var(--fs-xs)/1 var(--sg-font); font-style: normal;
}
html[data-ui="v2"] #friend .fdTag.ok { background: #3c7d1c; color: #f2ffe6; }
html[data-ui="v2"] #friend .fdTag.warn { background: #a3220f; color: #fff; }
html[data-ui="v2"] #friend .fdSide { flex: none; height: calc(44 * var(--u)); min-width: calc(64 * var(--u)); padding: 0 calc(10 * var(--u)); font-size: var(--fs-xs); }
html[data-ui="v2"] #friend .fdSide:disabled, html[data-ui="v2"] #friend .fdSide.off { opacity: 0.45; }
html[data-ui="v2"] #friend .fdSide.warn { background: linear-gradient(#f4b7a2, #d0634a); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); }
html[data-ui="v2"] #friend .fdTime { flex: none; align-self: flex-start; color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1 var(--sg-font); }
html[data-ui="v2"] #friend .fdUnread {
  position: absolute; left: calc(52 * var(--u)); top: calc(4 * var(--u));
  min-width: calc(24 * var(--u)); height: calc(24 * var(--u)); padding: 0 calc(5 * var(--u)); box-sizing: border-box;
  border-radius: 999px; background: #d22a1a; color: #fff; font: 900 var(--fs-xs)/calc(24 * var(--u)) var(--sg-font); font-style: normal; text-align: center;
}
html[data-ui="v2"] #friend .fdEmpty { text-align: center; }
html[data-ui="v2"] #friend .fdFoot {
  display: flex; align-items: center; justify-content: space-between; gap: calc(10 * var(--u));
  margin-top: calc(4 * var(--u)); padding: calc(8 * var(--u)) calc(10 * var(--u));
  border-radius: calc(12 * var(--u)); background: rgba(122, 74, 30, 0.08);
}
html[data-ui="v2"] #friend .fdFoot .tmAuto { font-size: var(--fs-s); }
html[data-ui="v2"] #friend .fdFoot .tmAuto i { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
html[data-ui="v2"] #friend .fdNearTop { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.3 var(--sg-font); }
html[data-ui="v2"] #friend .fdFind, html[data-ui="v2"] #friend .fdSay { flex: none; display: flex; gap: calc(8 * var(--u)); margin: 0; }
html[data-ui="v2"] #friend .fdFind input, html[data-ui="v2"] #friend .fdSay input {
  flex: 1; min-width: 0; height: calc(52 * var(--u)); box-sizing: border-box;
  padding: 0 calc(14 * var(--u));
  border: calc(3 * var(--u)) solid var(--sg-wood); border-radius: calc(12 * var(--u));
  background: var(--sg-paper-in); color: var(--sg-ink); font: 800 var(--fs-m)/1 var(--sg-font);
}
html[data-ui="v2"] #friend .fdFind .sgBtn, html[data-ui="v2"] #friend .fdSay .sgBtn { flex: none; height: calc(52 * var(--u)); }
html[data-ui="v2"] #friend .fdSay .fdTalk { min-width: calc(128 * var(--u)); padding: 0 calc(10 * var(--u)); font-size: var(--fs-s); touch-action: none; user-select: none; -webkit-user-select: none; }
html[data-ui="v2"] #friend .fdSay .fdTalk.off { opacity: 0.45; }
html[data-ui="v2"] #friend .fdSay .fdTalk.rec { background: linear-gradient(#8fe07a, #2f8a25); color: #fff; text-shadow: 0 1px 1px #0b3d12; font-variant-numeric: tabular-nums; }
html[data-ui="v2"] #friend .fdSay .fdTalk.rec.cancel { background: linear-gradient(#f4b7a2, #d0634a); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); }
html[data-ui="v2"] #friend .sgHead .fdBack { font-size: var(--fs-l); }
html[data-ui="v2"] #friend .sgHead .fdTitle { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-ui="v2"] #friend .fdChatBar { flex: none; display: flex; align-items: center; gap: calc(8 * var(--u)); }
html[data-ui="v2"] #friend .fdChatBar .fdFace { width: calc(48 * var(--u)); height: calc(48 * var(--u)); }
html[data-ui="v2"] #friend .fdChatWho { flex: 1; min-width: 0; color: var(--sg-ink-soft); font: 800 var(--fs-xs)/1.2 var(--sg-font); }
html[data-ui="v2"] #friend .fdMenu { flex: none; display: flex; gap: calc(8 * var(--u)); justify-content: flex-end; }
html[data-ui="v2"] #friend .fdMenu .sgBtn { height: calc(44 * var(--u)); font-size: var(--fs-xs); }
html[data-ui="v2"] #friend .fdMsgs {
  flex: 1 1 auto; min-height: calc(200 * var(--u)); overflow-y: auto;
  display: flex; flex-direction: column; gap: calc(8 * var(--u));
  padding: calc(8 * var(--u)) calc(4 * var(--u));
  border-radius: calc(12 * var(--u)); background: rgba(122, 74, 30, 0.07);
}
html[data-ui="v2"] #friend .fdWhen { margin: calc(4 * var(--u)) 0 0; color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1 var(--sg-font); text-align: center; }
html[data-ui="v2"] #friend .fdMsg { display: flex; flex-direction: column; align-items: flex-start; gap: calc(3 * var(--u)); padding: 0 calc(6 * var(--u)); }
html[data-ui="v2"] #friend .fdMsg.mine { align-items: flex-end; }
html[data-ui="v2"] #friend .fdBubble {
  max-width: 78%; box-sizing: border-box;
  padding: calc(9 * var(--u)) calc(13 * var(--u));
  border-radius: calc(14 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)) calc(4 * var(--u));
  background: var(--sg-paper); box-shadow: 0 calc(2 * var(--u)) 0 rgba(58, 34, 12, 0.25), inset 0 0 0 calc(2 * var(--u)) rgba(167, 122, 69, 0.4);
  color: var(--sg-ink); font: 800 var(--fs-m)/1.35 var(--sg-font); word-break: break-word; white-space: pre-wrap;
}
html[data-ui="v2"] #friend .fdMsg.mine .fdBubble { border-radius: calc(14 * var(--u)) calc(14 * var(--u)) calc(4 * var(--u)) calc(14 * var(--u)); background: linear-gradient(var(--sg-gold-hi), var(--sg-gold)); }
html[data-ui="v2"] #friend .fdBubble.voice { display: flex; align-items: center; gap: calc(8 * var(--u)); min-width: calc(110 * var(--u)); cursor: pointer; }
html[data-ui="v2"] #friend .fdWave {
  flex: none; width: calc(22 * var(--u)); height: calc(22 * var(--u));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9v6M9 6v12M13 9v6M17 4v16M21 10v4' stroke='%233a220c' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-ui="v2"] #friend .fdBubble.playing .fdWave { animation: fdWave 0.8s ease-in-out infinite; }
@keyframes fdWave { 50% { transform: scaleY(0.55); } }
html[data-ui="v2"] #friend .fdNote { color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1 var(--sg-font); }
html[data-ui="v2"] #friend .fdBlockedNote {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u));
  padding: calc(8 * var(--u)) calc(12 * var(--u)); border-radius: calc(10 * var(--u));
  background: rgba(192, 40, 30, 0.12); color: var(--sg-bad); font: 800 var(--fs-xs)/1.3 var(--sg-font);
}
/* 道具 / 精灵 / 宠技列表：一张纸卡，木纹标题条，一行一样。 */
html[data-ui="v2"] #battleMenu {
  left: 50%; width: calc(460 * var(--u)); transform: translateX(-50%);
  top: 38%; max-height: 48%;
  gap: calc(10 * var(--u)); padding: 0 0 calc(14 * var(--u));
  background: var(--paper-bg);
  border: var(--bw) solid var(--sg-wood);
  border-radius: var(--r);
  box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
html[data-ui="v2"] #battleMenu .menuHead {
  padding: calc(10 * var(--u)) calc(16 * var(--u));
  background: var(--wood-bar); color: var(--sg-paper-hi);
  font: 900 var(--fs-m)/1.2 var(--sg-font); text-shadow: 0 1px 0 #2a1606;
}
html[data-ui="v2"] #battleMenu .menuList { gap: calc(8 * var(--u)); padding: 0 calc(14 * var(--u)); }
html[data-ui="v2"] #battleMenu .menuNone { font: 700 var(--fs-s)/1.4 var(--sg-font); }
html[data-ui="v2"] #battleMenu .menuRow {
  padding: calc(10 * var(--u)) calc(14 * var(--u));
  border: calc(2 * var(--u)) solid rgba(167, 122, 69, 0.6);
  border-radius: calc(12 * var(--u));
  background: var(--sg-paper-in); color: var(--sg-ink);
  font: 800 var(--fs-s)/1.3 var(--sg-font);
}
html[data-ui="v2"] #battleMenu .menuBack, html[data-ui="v2"] #battleBack {
  height: calc(56 * var(--u)); padding: 0 calc(28 * var(--u));
  border: calc(3 * var(--u)) solid var(--sg-wood);
  border-radius: calc(12 * var(--u));
  background: var(--sg-paper); color: var(--sg-ink);
  font: 900 var(--fs-m)/1 var(--sg-font);
  box-shadow: 0 calc(3 * var(--u)) 0 rgba(58, 34, 12, 0.55);
}
html[data-ui="v2"] #battleMenu .menuBack { margin: 0 calc(14 * var(--u)); }
html[data-ui="v2"] #battleBack { left: calc(20 * var(--u)); top: auto; bottom: calc(22 * var(--u)); }

/* ---------- 导航面板（nav-ui.js，docs/agent/TRAVEL.md）：只盖地图区，和 GM 面板同一种纸卡。顶上「正在去」、回记录点、搜索框钉住，下面列表可滚。 ---------- */
html[data-ui="v2"] #nav {
  top: var(--topH); height: calc(100cqh - var(--topH) - var(--botH));
  display: flex; justify-content: center; align-items: stretch;
  padding: calc(14 * var(--u)) calc(12 * var(--u));
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.35);
}
html[data-ui="v2"] #nav[hidden] { display: none; }
html[data-ui="v2"] #nav .navCard { width: 100%; max-width: calc(696 * var(--u)); display: flex; flex-direction: column; padding: 0; overflow: hidden; }
html[data-ui="v2"] #nav .sgHead { margin: 0; flex: none; padding: calc(6 * var(--u)) calc(14 * var(--u)); border-radius: calc(12 * var(--u)) calc(12 * var(--u)) 0 0; }
html[data-ui="v2"] #nav .navTop {
  flex: none; display: flex; flex-direction: column; gap: calc(10 * var(--u));
  padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u));
  border-bottom: calc(2 * var(--u)) dashed rgba(122, 74, 30, 0.35);
}
html[data-ui="v2"] #nav .navNow {
  display: flex; align-items: center; gap: calc(10 * var(--u));
  padding: calc(8 * var(--u)) calc(10 * var(--u)) calc(8 * var(--u)) calc(14 * var(--u));
  border-radius: calc(12 * var(--u));
  background: linear-gradient(#e6f7d4, #c8e9a8); box-shadow: inset 0 0 0 calc(2 * var(--u)) #6aa84a;
}
html[data-ui="v2"] #nav .navNow[hidden] { display: none; }
html[data-ui="v2"] #nav .navNow span { flex: none; color: #2f6a1a; font: 800 var(--fs-xs)/1.2 var(--sg-font); }
html[data-ui="v2"] #nav .navNow b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 900 var(--fs-m)/1.2 var(--sg-font); }
html[data-ui="v2"] #nav .navNow .sgBtn { flex: none; height: calc(48 * var(--u)); }
html[data-ui="v2"] #nav .navHome {
  display: flex; align-items: center; gap: calc(12 * var(--u));
  padding: calc(10 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u)) calc(14 * var(--u));
  border-radius: calc(12 * var(--u));
  background: rgba(255, 251, 238, 0.8); box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(167, 122, 69, 0.45);
}
html[data-ui="v2"] #nav .navHomeInfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(3 * var(--u)); }
html[data-ui="v2"] #nav .navLab { color: var(--sg-ink-soft); font: 800 var(--fs-xs)/1.2 var(--sg-font); }
html[data-ui="v2"] #nav .navHomeName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 900 var(--fs-m)/1.2 var(--sg-font); }
html[data-ui="v2"] #nav .navHomeCost { color: #9a5a00; font: 800 var(--fs-xs)/1.2 var(--sg-font); font-style: normal; }
html[data-ui="v2"] #nav .navHomeGo { flex: none; height: calc(56 * var(--u)); min-width: calc(140 * var(--u)); }
html[data-ui="v2"] #nav .navHomeGo.off { opacity: 0.5; }
html[data-ui="v2"] #nav .navHomeGo.warn { background: linear-gradient(#f4b7a2, #d0634a); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); }
html[data-ui="v2"] #nav .navWhy { margin: calc(-4 * var(--u)) 0 0; color: var(--sg-bad); font: 700 var(--fs-xs)/1.3 var(--sg-font); }
html[data-ui="v2"] #nav .navSearch {
  display: flex; align-items: center; gap: calc(8 * var(--u));
  height: calc(56 * var(--u)); padding: 0 calc(14 * var(--u));
  box-sizing: border-box;
  border: calc(3 * var(--u)) solid var(--sg-wood); border-radius: calc(14 * var(--u));
  background: var(--sg-paper-in);
}
html[data-ui="v2"] #nav .navGlass {
  flex: none; width: calc(26 * var(--u)); height: calc(26 * var(--u));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='6.5' fill='none' stroke='%237a4a1e' stroke-width='2.6'/%3E%3Cpath d='M15 15l6 6' stroke='%237a4a1e' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-ui="v2"] #nav .navSearch input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent;
  color: var(--sg-ink); font: 800 var(--fs-m)/1 var(--sg-font);
}
html[data-ui="v2"] #nav .navList { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: calc(4 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)); }
html[data-ui="v2"] #nav .navSec { display: flex; flex-direction: column; gap: calc(8 * var(--u)); margin-top: calc(10 * var(--u)); }
html[data-ui="v2"] #nav .navSecHead { margin: 0; color: var(--sg-ink-soft); font: 900 var(--fs-xs)/1.3 var(--sg-font); }
html[data-ui="v2"] #nav .navEmpty { margin: 0; color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.5 var(--sg-font); }
html[data-ui="v2"] #nav .navRow {
  display: flex; align-items: center; gap: calc(8 * var(--u));
  width: 100%; min-height: calc(62 * var(--u)); box-sizing: border-box;
  padding: calc(8 * var(--u)) calc(14 * var(--u));
  border: 0; border-radius: calc(12 * var(--u));
  background: rgba(255, 251, 238, 0.75); box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(167, 122, 69, 0.34);
  color: var(--sg-ink); text-align: left; cursor: pointer;
}
html[data-ui="v2"] #nav .navRow:active { background: rgba(255, 224, 150, 0.9); }
html[data-ui="v2"] #nav .navRow.off { opacity: 0.5; }
html[data-ui="v2"] #nav .navRow.here { box-shadow: inset 0 0 0 calc(2 * var(--u)) #6aa84a; }
html[data-ui="v2"] #nav .navName { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 900 var(--fs-m)/1.2 var(--sg-font); }
html[data-ui="v2"] #nav .navTag {
  flex: none; padding: calc(3 * var(--u)) calc(8 * var(--u)); border-radius: 999px;
  background: var(--sg-night); color: #ffd75e; font: 800 var(--fs-xs)/1 var(--sg-font); font-style: normal;
}
html[data-ui="v2"] #nav .navTag.field { background: #3c7d1c; color: #f2ffe6; }
html[data-ui="v2"] #nav .navTag.warn { background: #a3220f; color: #fff; }
html[data-ui="v2"] #nav .navTag.id { background: rgba(122, 74, 30, 0.18); color: var(--sg-ink-soft); }
html[data-ui="v2"] #nav .navSteps { flex: none; margin-left: auto; color: var(--sg-ink-soft); font: 800 var(--fs-xs)/1 var(--sg-font); white-space: nowrap; }

/* ---------- 面板开着时：顶栏上的小件压在面板下面，地图区的任务框藏起来 ---------- */
html[data-ui="v2"] #hudFaceLv, html[data-ui="v2"] #hudPetLv, html[data-ui="v2"] #hudPools,
html[data-ui="v2"] #stoneCount, html[data-ui="v2"] #boneCount { z-index: 4; }
html[data-ui="v2"] #playHud:has(> #bag:not([hidden]), > #role:not([hidden]), > #pet:not([hidden]), > #mail:not([hidden]),
  > #family:not([hidden]), > #setting:not([hidden]), > #forge:not([hidden]), > #team:not([hidden]),
  > #nav:not([hidden]), > #friend:not([hidden])) #hudQuestWrap,
html[data-ui="v2"] #playHud:has(> #bag:not([hidden]), > #role:not([hidden]), > #pet:not([hidden]), > #mail:not([hidden]),
  > #family:not([hidden]), > #forge:not([hidden]), > #team:not([hidden]), > #nav:not([hidden]), > #friend:not([hidden])) #mapCorner,
html[data-ui="v2"] #playHud:has(> #bag:not([hidden]), > #role:not([hidden]), > #pet:not([hidden]), > #forge:not([hidden]), > #friend:not([hidden])) #battleAuto,
html[data-ui="v2"] #playHud:has(> #bag:not([hidden]), > #role:not([hidden]), > #pet:not([hidden]), > #forge:not([hidden]), > #friend:not([hidden])) .actBtn,
html[data-ui="v2"] #playHud:has(> #bag:not([hidden]), > #role:not([hidden]), > #pet:not([hidden]), > #forge:not([hidden]), > #friend:not([hidden])) #encBtn,
html[data-ui="v2"] #playHud:has(> #bag:not([hidden]), > #role:not([hidden]), > #pet:not([hidden]), > #forge:not([hidden]), > #friend:not([hidden])) #saveBtn,
html[data-ui="v2"] #playHud:has(> #bag:not([hidden]), > #role:not([hidden]), > #pet:not([hidden]), > #forge:not([hidden]), > #friend:not([hidden])) #friendBtn,
html[data-ui="v2"] #playHud:has(> #bag:not([hidden]), > #role:not([hidden]), > #pet:not([hidden]), > #forge:not([hidden])) #gmBtn { visibility: hidden; }

/* ---------- 登录、选角、建角：代码画，铺满整个壳。背景是天空、太阳、远山（内联 SVG），卡片居中 ---------- */
html[data-ui="v2"] #auth {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(var(--sat) + 30 * var(--u)) calc(28 * var(--u)) calc(var(--sab) + 30 * var(--u));
  box-sizing: border-box;
  background:
    radial-gradient(circle at 78% 18%, #fff1b8 0 calc(54 * var(--u)), rgba(255, 214, 120, 0.55) calc(58 * var(--u)), transparent calc(170 * var(--u))),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 420' preserveAspectRatio='none'%3E%3Cpath d='M0 250 L90 196 L170 236 L250 150 L292 112 L330 110 L372 150 L450 206 L540 168 L630 214 L720 186 V420 H0Z' fill='%23a8643a' opacity='.55'/%3E%3Cpath d='M296 112 Q300 70 286 40 Q312 62 318 30 Q326 70 330 110Z' fill='%23d8d0c4' opacity='.45'/%3E%3Cpath d='M0 318 Q120 248 240 298 T480 288 T720 276 V420 H0Z' fill='%236b4420'/%3E%3Cpath d='M0 372 Q180 330 360 360 T720 350 V420 H0Z' fill='%233b2611'/%3E%3C/svg%3E") left bottom / 100% 46% no-repeat,
    linear-gradient(#f9d488 0%, #eea458 36%, #b8682e 62%, #3b2611 100%);
  overflow: hidden;
}
html[data-ui="v2"] #auth .pane { position: relative; inset: auto; }
html[data-ui="v2"] #auth .authCard {
  width: 100%; max-width: calc(640 * var(--u)); max-height: 100%;
  box-sizing: border-box;
  display: flex; flex-direction: column;
  background: var(--paper-bg);
  border: var(--bw) solid var(--sg-wood);
  border-radius: var(--r);
  box-shadow: 0 0 0 calc(3 * var(--u)) var(--sg-gold-line), 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, 0.5);
  color: var(--sg-ink);
  font: 700 var(--fs-m)/1.35 var(--sg-font);
}
html[data-ui="v2"] #auth .authCard[hidden] { display: none; }
html[data-ui="v2"] #auth[data-pane="chars"] #authLogin,
html[data-ui="v2"] #auth[data-pane="create"] #authLogin { display: none; }
/* 在图里建角（队伍「我的角色」的「去创建」，ALTS.md 5.7）：建角卡叠在游戏上，背后压暗、虚一点，卡片从下面弹上来。 */
html[data-ui="v2"] #auth.over {
  z-index: 12;
  background: radial-gradient(ellipse at 50% 40%, rgba(60, 34, 12, 0.55), rgba(14, 8, 3, 0.82));
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
html[data-ui="v2"] #auth.over #gateCreate { animation: authOverIn 260ms cubic-bezier(0.2, 0.9, 0.3, 1.1) both; }
html[data-ui="v2"] #auth.over #gateCreate .sgHead b::after { content: "建好直接邀请进队"; margin-left: calc(10 * var(--u)); padding: calc(3 * var(--u)) calc(9 * var(--u)); border-radius: 999px; background: rgba(255, 224, 138, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 224, 138, 0.4); color: #ffe7a8; font: 800 var(--fs-xs)/1 var(--sg-font); vertical-align: middle; }
html[data-ui="v2"] #auth.over #gateErr { position: relative; z-index: 1; }
@keyframes authOverIn { from { opacity: 0; transform: translateY(calc(24 * var(--u))) scale(0.97); } to { opacity: 1; transform: none; } }
html[data-ui="v2"] #auth .sgHint { margin: 0; padding: 0 calc(24 * var(--u)); color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.4 var(--sg-font); text-align: center; }
html[data-ui="v2"] .authActs { display: flex; gap: calc(16 * var(--u)); padding: calc(14 * var(--u)) calc(24 * var(--u)) calc(22 * var(--u)); }
html[data-ui="v2"] .authActs .sgBtn { flex: 1; height: calc(76 * var(--u)); font-size: var(--fs-l); }

/* 登录 / 注册：石刻字标题、两页签、输入行、金色大钮。 */
html[data-ui="v2"] #authLogin { padding: calc(30 * var(--u)) calc(36 * var(--u)) calc(36 * var(--u)); gap: calc(22 * var(--u)); }
html[data-ui="v2"] .authLogo { display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u)); }
html[data-ui="v2"] .authLogo b {
  font: 900 calc(96 * var(--u))/1.05 var(--sg-font);
  letter-spacing: calc(8 * var(--u));
  background: linear-gradient(#fff2c0, #e6a817 55%, #a8640e);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter:
    drop-shadow(calc(2 * var(--u)) 0 0 var(--sg-wood-dk)) drop-shadow(calc(-2 * var(--u)) 0 0 var(--sg-wood-dk))
    drop-shadow(0 calc(2 * var(--u)) 0 var(--sg-wood-dk)) drop-shadow(0 calc(-2 * var(--u)) 0 var(--sg-wood-dk))
    drop-shadow(0 calc(5 * var(--u)) 0 rgba(58, 34, 12, 0.6));
}
html[data-ui="v2"] .authLogo span { color: var(--sg-wood); font: 800 var(--fs-s)/1 var(--sg-font); letter-spacing: calc(10 * var(--u)); text-transform: uppercase; }
html[data-ui="v2"] .authTabs { display: flex; width: 100%; box-sizing: border-box; }
html[data-ui="v2"] .authTabs button { flex: 1; height: calc(64 * var(--u)); font-size: var(--fs-l); }
html[data-ui="v2"] .authTabs button:first-child { border-left: 0; }
html[data-ui="v2"] #auth[data-pane="login"] #tabLogin,
html[data-ui="v2"] #auth[data-pane="register"] #tabReg { background: linear-gradient(var(--sg-gold-hi), var(--sg-gold)); color: var(--sg-ink); }
html[data-ui="v2"] .authForm { display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
html[data-ui="v2"] .authField {
  display: flex; align-items: center; gap: calc(14 * var(--u));
  height: calc(80 * var(--u)); padding: 0 calc(20 * var(--u));
  box-sizing: border-box;
  border: calc(3 * var(--u)) solid var(--sg-wood);
  border-radius: calc(14 * var(--u));
  background: var(--sg-paper-in);
  box-shadow: inset 0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(122, 74, 30, 0.25);
}
html[data-ui="v2"] .authField:focus-within { border-color: var(--sg-gold); box-shadow: 0 0 0 calc(3 * var(--u)) rgba(230, 168, 23, 0.45), inset 0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(122, 74, 30, 0.25); }
html[data-ui="v2"] .authField span { flex: none; width: calc(80 * var(--u)); color: var(--sg-wood); font: 900 var(--fs-m)/1 var(--sg-font); }
html[data-ui="v2"] #auth input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; outline: none; background: transparent;
  color: var(--sg-ink); caret-color: var(--sg-ink);
  font: 700 max(16px, calc(28 * var(--u)))/1 var(--sg-font);
  -webkit-appearance: none; appearance: none;
}
html[data-ui="v2"] #auth input::placeholder { color: #7a5a3a; } /* 原 rgba(122,90,58,.55) 在 #fff3d6 上 2.3；不透明 5.7（S1 守卫量过） */
html[data-ui="v2"] #auth input:-webkit-autofill { -webkit-text-fill-color: var(--sg-ink); transition: background-color 99999s ease-out 0s; }
html[data-ui="v2"] .authGo { height: calc(92 * var(--u)); margin-top: calc(8 * var(--u)); font: 900 var(--fs-xl)/1 var(--sg-font); letter-spacing: calc(4 * var(--u)); }

/* 选角：两列三行的角色牌。形象占牌子上大半，脚踩在名字条上沿；左上等级、右上转生，名字条里是名字和所在地。空位虚线「建立角色」。 */
html[data-ui="v2"] #gateChars .sgHead span { color: var(--sg-paper-lo); font: 700 var(--fs-xs)/1 var(--sg-font); }
html[data-ui="v2"] .charGrid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(16 * var(--u));
  padding: calc(20 * var(--u)) calc(24 * var(--u)) calc(12 * var(--u));
  min-height: 0; overflow: auto;
}
html[data-ui="v2"] #gateChars .charSlot {
  position: relative;
  height: calc(262 * var(--u));
  padding: 0;
  box-sizing: border-box;
  border: calc(3 * var(--u)) solid var(--sg-wood);
  border-radius: calc(16 * var(--u));
  background: radial-gradient(75% 60% at 50% 52%, #fffbe8, var(--sg-paper-in) 62%, #f0d7a2);
  color: var(--sg-ink);
  cursor: pointer;
  overflow: hidden;
}
html[data-ui="v2"] #gateChars .charSlot::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(70 * var(--u));
  background: linear-gradient(rgba(240, 215, 162, 0.5), rgba(228, 194, 132, 0.92));
  border-top: calc(2 * var(--u)) solid rgba(122, 74, 30, 0.3);
}
html[data-ui="v2"] #gateChars .charSlot:hover { box-shadow: 0 0 0 calc(3 * var(--u)) var(--sg-gold); }
html[data-ui="v2"] #gateChars .charSlot canvas {
  position: absolute; left: 0; top: calc(4 * var(--u));
  width: 100%; height: calc(100% - 74 * var(--u));
  image-rendering: pixelated; pointer-events: none;
}
html[data-ui="v2"] #gateChars .charLv, html[data-ui="v2"] #gateChars .charTrans {
  position: absolute; top: calc(10 * var(--u)); z-index: 2;
  display: flex; align-items: baseline; gap: calc(3 * var(--u));
  height: calc(36 * var(--u)); padding: calc(7 * var(--u)) calc(12 * var(--u)) 0;
  box-sizing: border-box;
  border-radius: 999px;
  box-shadow: 0 calc(2 * var(--u)) 0 rgba(58, 34, 12, 0.4);
  font: 900 var(--fs-s)/1 var(--sg-font); white-space: nowrap;
}
html[data-ui="v2"] #gateChars .charLv {
  left: calc(10 * var(--u));
  border: calc(2 * var(--u)) solid var(--sg-wood);
  background: linear-gradient(var(--sg-gold-hi), var(--sg-gold));
  color: var(--sg-ink);
}
html[data-ui="v2"] #gateChars .charLv::before { content: "Lv"; font-size: 0.72em; font-weight: 800; }
html[data-ui="v2"] #gateChars .charTrans {
  right: calc(10 * var(--u));
  border: calc(2 * var(--u)) solid #5b2a6e;
  background: linear-gradient(#c07ce0, #7d3c9a);
  color: #fff6e0;
  text-shadow: 0 1px 0 rgba(40, 10, 50, 0.6);
}
html[data-ui="v2"] #gateChars .charTrans.none {
  border-color: rgba(122, 74, 30, 0.4);
  background: rgba(255, 248, 228, 0.88);
  color: var(--sg-ink-soft);
  text-shadow: none; box-shadow: none;
  font: 800 var(--fs-xs)/1 var(--sg-font);
}
html[data-ui="v2"] #gateChars .charName, html[data-ui="v2"] #gateChars .charWhere {
  position: absolute; left: calc(10 * var(--u)); right: calc(10 * var(--u)); z-index: 2;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-ui="v2"] #gateChars .charName { bottom: calc(32 * var(--u)); font: 900 var(--fs-m)/1.2 var(--sg-font); }
html[data-ui="v2"] #gateChars .charWhere { bottom: calc(8 * var(--u)); color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.2 var(--sg-font); }
html[data-ui="v2"] #gateChars .charSlot.empty { border-style: dashed; background: rgba(255, 243, 214, 0.55); }
html[data-ui="v2"] #gateChars .charSlot.empty::before,
html[data-ui="v2"] #gateChars .charSlot.empty canvas,
html[data-ui="v2"] #gateChars .charSlot.empty .charLv,
html[data-ui="v2"] #gateChars .charSlot.empty .charTrans,
html[data-ui="v2"] #gateChars .charSlot.empty .charName,
html[data-ui="v2"] #gateChars .charSlot.empty .charWhere { display: none; }
html[data-ui="v2"] #gateChars .charSlot.empty::after {
  content: "＋\A建立角色"; white-space: pre;
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--sg-wood-lt); font: 900 var(--fs-m)/1.5 var(--sg-font);
}
/* 删角：牌子右下角一只垃圾桶（深红木圆牌、奶油色桶），名字两边让出位置；空位没有。 */
html[data-ui="v2"] #gateChars .charName, html[data-ui="v2"] #gateChars .charWhere { left: calc(54 * var(--u)); right: calc(54 * var(--u)); }
html[data-ui="v2"] #gateChars .charDel {
  position: absolute; z-index: 3; right: calc(8 * var(--u)); bottom: calc(13 * var(--u));
  width: calc(44 * var(--u)); height: calc(44 * var(--u)); min-width: 26px; min-height: 26px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff3d6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 7h15M9.5 7V4.8h5V7M6.5 7l1 12.2h9L17.5 7M10.4 10.5v5.6M13.6 10.5v5.6'/%3E%3C/svg%3E") center / 62% no-repeat,
    radial-gradient(circle at 38% 32%, #c4603f, #8e2f1a 70%, #5e1a0c);
  box-shadow: 0 0 0 calc(2 * var(--u)) var(--sg-wood-dk), 0 calc(2 * var(--u)) 0 rgba(58, 34, 12, 0.45);
  opacity: 0.85;
  transition: opacity 120ms ease-out, transform 120ms ease-out;
  cursor: pointer;
}
html[data-ui="v2"] #gateChars .charSlot:hover .charDel { opacity: 1; }
html[data-ui="v2"] #gateChars .charDel:hover { transform: scale(1.08); }
html[data-ui="v2"] #gateChars .charDel:active { transform: scale(0.92); }
html[data-ui="v2"] #gateChars .charSlot.empty .charDel { display: none; }

/* 删角框：整页压暗（偏一点红），中间一张纸卡，标题条是深红木；上面头像 + 名字，中间一块警告（删档区几天、能找管理员恢复），
   下面输入账号密码，「取消」「删除」（红）。输错的话一行红字，框不关。 */
html[data-ui="v2"] #charDelAsk {
  position: absolute; inset: 0; z-index: 11;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--sat) + 24 * var(--u)) calc(24 * var(--u)) calc(var(--sab) + 24 * var(--u));
  box-sizing: border-box;
  background: radial-gradient(ellipse at 50% 42%, rgba(80, 22, 10, 0.5), rgba(16, 6, 3, 0.84));
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
html[data-ui="v2"] #charDelAsk[hidden] { display: none; }
html[data-ui="v2"] #charDelAsk .cdBox {
  max-width: calc(600 * var(--u)); margin: 0;
  box-shadow: 0 0 0 calc(3 * var(--u)) rgba(196, 64, 26, 0.55), 0 calc(14 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, 0.6);
  animation: authOverIn 240ms cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
}
html[data-ui="v2"] #charDelAsk .sgHead { background: linear-gradient(#a8452a, #7a2a16 55%, #5a1a0c); }
html[data-ui="v2"] #charDelAsk .cdIcon {
  flex: none; width: calc(34 * var(--u)); height: calc(34 * var(--u)); min-width: 20px; min-height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffe08a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 7h15M9.5 7V4.8h5V7M6.5 7l1 12.2h9L17.5 7M10.4 10.5v5.6M13.6 10.5v5.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-ui="v2"] #charDelAsk .cdBody { display: flex; flex-direction: column; gap: calc(14 * var(--u)); padding: calc(20 * var(--u)) calc(24 * var(--u)) calc(4 * var(--u)); }
html[data-ui="v2"] #charDelAsk .cdWho { display: flex; align-items: center; gap: calc(16 * var(--u)); }
html[data-ui="v2"] #charDelAsk .cdFace {
  position: relative; flex: none; width: calc(96 * var(--u)); height: calc(96 * var(--u)); min-width: 56px; min-height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #fffdf5, #f6e2b0 62%, #ddb469);
  box-shadow: 0 0 0 calc(3 * var(--u)) #b5301c, 0 0 0 calc(6 * var(--u)) var(--sg-wood-dk);
  overflow: hidden;
}
html[data-ui="v2"] #charDelAsk .cdFace canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; filter: saturate(0.85); }
html[data-ui="v2"] #charDelAsk .cdWhoText { min-width: 0; display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
html[data-ui="v2"] #charDelAsk .cdWhoText b { font: 900 var(--fs-l)/1.15 var(--sg-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="v2"] #charDelAsk .cdWhoText span { color: var(--sg-ink-soft); font: 700 var(--fs-s)/1.3 var(--sg-font); }
html[data-ui="v2"] #charDelAsk .cdWarn {
  position: relative;
  padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u)) calc(58 * var(--u));
  border: calc(2 * var(--u)) dashed rgba(181, 48, 28, 0.55); border-radius: calc(14 * var(--u));
  background: rgba(192, 40, 30, 0.08);
  color: var(--sg-ink); font: 700 var(--fs-xs)/1.5 var(--sg-font);
}
html[data-ui="v2"] #charDelAsk .cdWarn::before {
  content: ""; position: absolute; left: calc(14 * var(--u)); top: calc(14 * var(--u));
  width: calc(32 * var(--u)); height: calc(32 * var(--u)); min-width: 18px; min-height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5 22.5 20.5h-21z' fill='%23c0402a' stroke='%235a1a0c' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M12 9v5.5' stroke='%23fff3d6' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.4' r='1.4' fill='%23fff3d6'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-ui="v2"] #charDelAsk .cdWarn p { margin: 0; }
html[data-ui="v2"] #charDelAsk .cdWarn p + p { margin-top: calc(6 * var(--u)); color: var(--sg-ink-soft); }
html[data-ui="v2"] #charDelAsk .cdWarn b { color: #9a2a14; font-weight: 900; }
html[data-ui="v2"] #charDelAsk .cdErr { margin: 0; min-height: calc(26 * var(--u)); color: var(--sg-bad); font: 800 var(--fs-s)/1.3 var(--sg-font); text-align: center; }
html[data-ui="v2"] #charDelAsk .cdErr:empty::before { content: "\00a0"; }
html[data-ui="v2"] #charDelAsk .cdGo { background: linear-gradient(#e8754f, #b5301c); border-color: #5a1a0c; color: #fff; text-shadow: 0 1px 1px #5a1206; }
html[data-ui="v2"] #charDelAsk .cdGo:disabled { opacity: 0.5; }

/* 建角：上排脸（眼睛、嘴巴）和坐骑预览，下面坐骑四选一、名字，基础点数和属性左右并排。 */
html[data-ui="v2"] .makerBody { display: flex; flex-direction: column; gap: calc(14 * var(--u)); padding: calc(16 * var(--u)) calc(22 * var(--u)) 0; min-height: 0; overflow: auto; }
html[data-ui="v2"] .makerTop { display: flex; gap: calc(16 * var(--u)); }
html[data-ui="v2"] .makerFace { flex: none; display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); }
html[data-ui="v2"] #faceFrame {
  display: block; width: calc(150 * var(--u)); height: calc(150 * var(--u));
  box-sizing: border-box;
  border: calc(4 * var(--u)) solid var(--sg-wood);
  border-radius: calc(16 * var(--u));
  background: var(--sg-paper-in);
  box-shadow: 0 0 0 calc(2 * var(--u)) var(--sg-gold-line);
}
html[data-ui="v2"] .makerPick { display: flex; align-items: center; gap: calc(6 * var(--u)); color: var(--sg-ink-soft); font: 800 var(--fs-xs)/1 var(--sg-font); }
html[data-ui="v2"] .makerPick b { min-width: calc(30 * var(--u)); text-align: center; color: var(--sg-ink); font: 900 var(--fs-m)/1 var(--sg-font); }
html[data-ui="v2"] .makerPick button, html[data-ui="v2"] .makerRow button {
  flex: none;
  width: calc(46 * var(--u)); height: calc(46 * var(--u)); padding: 0;
  border: calc(3 * var(--u)) solid var(--sg-wood);
  border-radius: calc(10 * var(--u));
  background: var(--sg-paper); color: var(--sg-ink);
  font: 900 var(--fs-l)/1 var(--sg-font);
  box-shadow: 0 calc(3 * var(--u)) 0 rgba(58, 34, 12, 0.5);
  cursor: pointer; touch-action: manipulation; user-select: none;
}
html[data-ui="v2"] .makerPick button:active, html[data-ui="v2"] .makerRow button:active { transform: translateY(calc(2 * var(--u))); box-shadow: 0 1px 0 rgba(58, 34, 12, 0.5); }
html[data-ui="v2"] .makerRide {
  flex: 1; min-width: 0; position: relative;
  display: flex; align-items: center; justify-content: space-between;
  border: calc(3 * var(--u)) solid rgba(167, 122, 69, 0.6);
  border-radius: calc(16 * var(--u));
  background: radial-gradient(80% 60% at 50% 72%, rgba(122, 74, 30, 0.22), transparent 70%), var(--sg-paper-in);
}
html[data-ui="v2"] #createPreview {
  position: absolute; left: calc(56 * var(--u)); top: calc(6 * var(--u));
  width: calc(100% - 112 * var(--u)); height: calc(100% - 12 * var(--u));
  image-rendering: pixelated; pointer-events: none;
}
html[data-ui="v2"] .makerArrow {
  position: relative; z-index: 1;
  width: calc(48 * var(--u)); height: calc(96 * var(--u)); margin: 0 calc(4 * var(--u)); padding: 0;
  border: calc(3 * var(--u)) solid var(--sg-wood);
  border-radius: calc(12 * var(--u));
  background: linear-gradient(var(--sg-gold-hi), var(--sg-gold)); color: var(--sg-ink);
  font: 900 var(--fs-xl)/1 var(--sg-font);
  cursor: pointer;
}
html[data-ui="v2"] .makerSec { display: flex; flex-direction: column; gap: calc(8 * var(--u)); min-width: 0; }
html[data-ui="v2"] .makerSec h3 {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 0; padding-bottom: calc(4 * var(--u));
  border-bottom: calc(2 * var(--u)) solid rgba(167, 122, 69, 0.45);
  color: var(--sg-wood); font: 900 var(--fs-m)/1.2 var(--sg-font);
}
html[data-ui="v2"] #statRemain, html[data-ui="v2"] #attrRemain { color: var(--sg-warn); font: 800 var(--fs-xs)/1 var(--sg-font); }
html[data-ui="v2"] .makerTigers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(10 * var(--u)); }
html[data-ui="v2"] #gateCreate .tiger {
  display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--u));
  padding: calc(4 * var(--u)) 0 calc(6 * var(--u));
  border: calc(3 * var(--u)) solid rgba(167, 122, 69, 0.6);
  border-radius: calc(14 * var(--u));
  background: var(--sg-paper-in); color: var(--sg-ink-soft);
  font: 800 var(--fs-xs)/1.1 var(--sg-font);
  cursor: pointer;
}
html[data-ui="v2"] #gateCreate .tiger.on { border-color: var(--sg-wood); background: linear-gradient(var(--sg-gold-hi), var(--sg-gold)); color: var(--sg-ink); box-shadow: 0 0 0 calc(2 * var(--u)) var(--sg-gold-line); }
html[data-ui="v2"] #gateCreate .tigerArt { display: block; width: 100%; height: calc(96 * var(--u)); image-rendering: pixelated; pointer-events: none; }
html[data-ui="v2"] .makerName { display: flex; gap: calc(12 * var(--u)); }
html[data-ui="v2"] #auth #newName {
  height: calc(70 * var(--u)); padding: 0 calc(18 * var(--u));
  box-sizing: border-box;
  border: calc(3 * var(--u)) solid var(--sg-wood);
  border-radius: calc(14 * var(--u));
  background: var(--sg-paper-in);
}
html[data-ui="v2"] #btnDice { flex: none; width: calc(120 * var(--u)); height: calc(70 * var(--u)); }
html[data-ui="v2"] .makerPoints { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(18 * var(--u)); }
html[data-ui="v2"] .makerRow { display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(54 * var(--u)); }
html[data-ui="v2"] .makerRow > span { flex: none; width: calc(64 * var(--u)); color: var(--sg-ink); font: 900 var(--fs-s)/1 var(--sg-font); }
html[data-ui="v2"] .makerRow > span.earth { color: #157b2a; }
html[data-ui="v2"] .makerRow > span.water { color: #0392c6; }
html[data-ui="v2"] .makerRow > span.fire { color: #be2019; }
html[data-ui="v2"] .makerRow > span.wind { color: #b07a00; }
html[data-ui="v2"] .makerRow > b { flex: 1; text-align: center; font: 900 var(--fs-l)/1 var(--sg-font); }
html[data-ui="v2"] #gateCreate .attrBar {
  position: relative; flex: 1; height: calc(22 * var(--u));
  border: calc(2 * var(--u)) solid var(--sg-wood);
  border-radius: 999px;
  background: rgba(58, 34, 12, 0.18);
}
html[data-ui="v2"] #gateCreate .attrBar i { border-radius: 999px; transition: width 120ms ease-out; }

/* 进图读条、错误提示：深色圆角条，压在最上面。 */
html[data-ui="v2"] #enterLoad { position: absolute; background: rgba(18, 10, 6, 0.55); }
html[data-ui="v2"] .enterLoadBox {
  width: calc(520 * var(--u)); padding: calc(26 * var(--u)) calc(30 * var(--u));
  border: var(--bw) solid var(--sg-wood);
  border-radius: var(--r);
  background: var(--paper-bg);
  box-shadow: 0 0 0 calc(3 * var(--u)) var(--sg-gold-line), 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.5);
}
html[data-ui="v2"] #enterLoadTxt { margin: 0 0 calc(16 * var(--u)); color: var(--sg-ink); text-shadow: none; font: 900 var(--fs-l)/1.2 var(--sg-font); }
html[data-ui="v2"] .enterLoadTrack { height: calc(22 * var(--u)); border: calc(2 * var(--u)) solid var(--sg-wood); background: rgba(58, 34, 12, 0.25); }
html[data-ui="v2"] #enterLoadBar { background: linear-gradient(var(--sg-gold-hi), var(--sg-gold)); }
html[data-ui="v2"] #gateErr {
  position: absolute; z-index: 10;
  left: 50%; bottom: calc(var(--sab) + 36 * var(--u)); transform: translateX(-50%);
  max-width: calc(640 * var(--u)); margin: 0;
  padding: calc(12 * var(--u)) calc(26 * var(--u));
  border-radius: 999px;
  background: var(--sg-night); color: #fff3d0;
  font: 800 var(--fs-m)/1.3 var(--sg-font); text-align: center;
  box-shadow: 0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
html[data-ui="v2"] #gateErr:empty { display: none; }

/* ---------- 练级（train-ui.js、view.js，docs/agent/TRAIN.md）：任务栏上方的练级钮、任务栏「等级不足 / 练级中」、练级面板 ---------- */
/* 练级钮：任务栏抽屉上方、贴左边沿，和遇敌钮同一套（48u 石盘 + 字牌）。--qH 是抽屉现在的高（view.js 量好写在 #playHud 上），
   抽屉收起（只动 transform）时钮不跟着滑走。.lack 下一个任务等级不够：一圈金光、右上角「差8」；.on 练级中：绿光。 */
html[data-ui="v2"] #trainBtn {
  left: calc(10 * var(--u)); top: auto;
  bottom: calc(var(--botH) + 24 * var(--u) + var(--qH, 0px));
  width: calc(64 * var(--u));
}
html[data-ui="v2"] #trainBtn .trIcon {
  display: block; position: relative; box-sizing: border-box;
  width: calc(48 * var(--u)); height: calc(48 * var(--u));
  border: calc(2 * var(--u)) solid #3a220c; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #6b4a2c, #2c1a0a 72%);
  box-shadow: 0 calc(2 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.55), inset 0 0 0 calc(2 * var(--u)) rgba(232, 190, 120, 0.35);
}
html[data-ui="v2"] #trainBtn .trIcon svg { position: absolute; left: 12%; top: 10%; width: 76%; height: 76%; }
html[data-ui="v2"] #trainBtn span {
  margin-top: calc(-5 * var(--u));
  padding: calc(2 * var(--u)) calc(7 * var(--u));
  border: calc(2 * var(--u)) solid var(--sg-wood-dk); border-radius: 999px;
  background: linear-gradient(#5a3d22, #2c1a0a);
  color: #f6e2bd; font: 900 var(--fs-xs)/1.1 var(--sg-font); white-space: nowrap;
  box-shadow: 0 calc(2 * var(--u)) 0 rgba(0, 0, 0, 0.45);
}
html[data-ui="v2"] #trainBtn .trBadge {
  position: absolute; right: calc(-4 * var(--u)); top: calc(-8 * var(--u));
  min-width: calc(30 * var(--u)); height: calc(26 * var(--u)); padding: 0 calc(5 * var(--u)); box-sizing: border-box;
  border-radius: 999px; background: #d2501a; color: #fff; box-shadow: 0 0 0 calc(2 * var(--u)) #fff3d0;
  font: 900 var(--fs-xs)/calc(26 * var(--u)) var(--sg-font); text-align: center; white-space: nowrap;
}
html[data-ui="v2"] #trainBtn .trBadge[hidden] { display: none; }
html[data-ui="v2"] #trainBtn.lack .trIcon { border-color: #6a3a06; box-shadow: 0 0 calc(10 * var(--u)) calc(3 * var(--u)) rgba(255, 190, 60, 0.85), inset 0 0 0 calc(2 * var(--u)) rgba(255, 217, 119, 0.7); }
html[data-ui="v2"] #trainBtn.on .trIcon { border-color: #134d0c; box-shadow: 0 0 calc(10 * var(--u)) calc(3 * var(--u)) rgba(130, 255, 110, 0.8), inset 0 0 0 calc(2 * var(--u)) rgba(160, 255, 140, 0.6); }
html[data-ui="v2"] #trainBtn.on span { border-color: #134d0c; background: linear-gradient(#7fdc5f, #2f8a25); color: #fff; text-shadow: 0 1px 1px #0b3d12; }
@media (prefers-reduced-motion: no-preference) {
  html[data-ui="v2"] #trainBtn.lack .trIcon { isolation: isolate; }
  html[data-ui="v2"] #trainBtn.lack .trIcon::after {
    content: ""; position: absolute; inset: calc(-2 * var(--u)); z-index: -1;
    border-radius: 50%; pointer-events: none;
    box-shadow: 0 0 calc(16 * var(--u)) calc(5 * var(--u)) rgba(255, 210, 90, 1), inset 0 0 0 calc(2 * var(--u)) rgba(255, 217, 119, 0.9);
    opacity: 0;
    animation: trainGlow 1.6s ease-in-out infinite;
  }
}
@keyframes trainGlow { 50% { opacity: 1; } }
html[data-ui="v2"] #playHud:has(> #hudBot.chatOpen) #trainBtn,
html[data-ui="v2"] #playHud:has(> #bag:not([hidden]), > #role:not([hidden]), > #pet:not([hidden]), > #mail:not([hidden]),
  > #family:not([hidden]), > #setting:not([hidden]), > #forge:not([hidden]), > #team:not([hidden]),
  > #nav:not([hidden]), > #friend:not([hidden]), > #train:not([hidden])) #trainBtn,
html[data-ui="v2"] #playHud:has(> #train:not([hidden])) #hudQuestWrap { visibility: hidden; }

/* 任务栏：下一个任务等级不够（view.js paintQuestBar 的 next）——顶条写「下一个任务」、签换成橙色「等级不足」；任务名下写要几级、还差几级，
   一格一级的进度条（当前这一格按经验填，超过 10 级只画一条），奖励，最下面「去练级」。练级中签换成绿色、钮写「停止练级」。 */
html[data-ui="v2"] #questGoBtn.lock { background: linear-gradient(#ffb36b, #d2501a); color: #fff; text-shadow: 0 1px 1px #5c1a03; }
html[data-ui="v2"] #questGoBtn.train { background: linear-gradient(#9be27f, #3d9a2c); color: #fff; text-shadow: 0 1px 1px #0b3d12; }
html[data-ui="v2"] #questGoBtn.lock i, html[data-ui="v2"] #questGoBtn.train i { display: none; }
html[data-ui="v2"] #hudQuestLock { margin: calc(4 * var(--u)) calc(12 * var(--u)) 0; }
html[data-ui="v2"] #hudQuestLock .qNeed { margin: 0; color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.45 var(--sg-font); }
html[data-ui="v2"] #hudQuestLock .qNeed b { color: var(--sg-bad); font-weight: 900; }
html[data-ui="v2"] #hudQuestLock .qNeed em { color: var(--sg-ok); font-style: normal; font-weight: 900; }
html[data-ui="v2"] #hudQuestLock .qLvBar { display: flex; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(6 * var(--u)); color: var(--sg-ink); font: 900 var(--fs-xs)/1 var(--sg-font); }
html[data-ui="v2"] #hudQuestLock .qSegs { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: calc(3 * var(--u)); height: calc(14 * var(--u)); }
html[data-ui="v2"] #hudQuestLock .qSegs span { border-radius: calc(4 * var(--u)); background: rgba(122, 74, 30, 0.18); box-shadow: inset 0 0 0 1px rgba(122, 74, 30, 0.35); }
html[data-ui="v2"] #hudQuestLock .qSegs span.full { background: linear-gradient(#9be27f, #3d9a2c); }
html[data-ui="v2"] #hudQuestLock .qSegs span.part { background: linear-gradient(90deg, #9be27f 0 var(--p), rgba(122, 74, 30, 0.18) var(--p)); }
html[data-ui="v2"] #questTrainBtn {
  display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--u));
  margin: calc(10 * var(--u)) calc(12 * var(--u)) 0; height: calc(44 * var(--u)); padding: 0 calc(10 * var(--u));
  border: calc(3 * var(--u)) solid var(--sg-wood); border-radius: calc(12 * var(--u));
  background: linear-gradient(var(--sg-gold-hi), var(--sg-gold)); color: var(--sg-ink);
  font: 900 var(--fs-s)/1 var(--sg-font); white-space: nowrap; overflow: hidden;
  box-shadow: 0 calc(3 * var(--u)) 0 rgba(58, 34, 12, 0.55);
}
html[data-ui="v2"] #questTrainBtn small { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #6a420f; font: 800 var(--fs-xs)/1 var(--sg-font); }
html[data-ui="v2"] #questTrainBtn small:empty { display: none; }
html[data-ui="v2"] #questTrainBtn.stop { background: var(--sg-paper); }

/* 练级面板 #train：和好友面板一个外形（纸卡铺到聊天上沿），标题条、「练级 | 抓宠」分页钉住，下面滚。 */
html[data-ui="v2"] #train {
  top: 0; height: calc(100cqh - var(--botH));
  box-sizing: border-box;
  padding: calc(var(--sat) + 8 * var(--u)) calc(10 * var(--u)) calc(8 * var(--u));
  display: flex; flex-direction: column;
  background: rgba(12, 7, 2, 0.55);
  overflow: hidden;
  color: var(--sg-ink); font: 700 var(--fs-m)/1.3 var(--sg-font);
}
html[data-ui="v2"] #train[hidden] { display: none; }
html[data-ui="v2"] #train .sgHead { justify-content: space-between; }
html[data-ui="v2"] #train .v2Body { gap: calc(10 * var(--u)); }
html[data-ui="v2"] #train .trGoal {
  display: flex; flex-wrap: wrap; align-items: center; gap: calc(8 * var(--u)) calc(12 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u));
  border-radius: calc(14 * var(--u)); background: rgba(58, 30, 6, 0.86); color: #ffe08a; font: 800 var(--fs-xs)/1.35 var(--sg-font);
}
html[data-ui="v2"] #train .trGoal > div { flex: 1 1 100%; }
html[data-ui="v2"] #train .trGoal[hidden] { display: none; }
html[data-ui="v2"] #train .trGoal b { color: #fff; font-weight: 900; }
html[data-ui="v2"] #train .trGoal .trBar { flex: 1; min-width: calc(80 * var(--u)); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: calc(3 * var(--u)); height: calc(14 * var(--u)); }
html[data-ui="v2"] #train .trGoal .trBar span { border-radius: calc(4 * var(--u)); background: rgba(255, 224, 138, 0.18); }
html[data-ui="v2"] #train .trGoal .trBar span.part { background: linear-gradient(90deg, #9be27f 0 var(--p), rgba(255, 224, 138, 0.18) var(--p)); }
html[data-ui="v2"] #train .trGoal small { flex: none; color: #f3dcaa; font: 700 var(--fs-xs)/1 var(--sg-font); white-space: nowrap; }
html[data-ui="v2"] #train .trFace { display: block; flex: none; border-radius: calc(10 * var(--u)); background: #fff3d6; box-shadow: inset 0 0 0 calc(2 * var(--u)) #a77a45; }
html[data-ui="v2"] #train .trFace.s { width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: calc(8 * var(--u)); }
html[data-ui="v2"] #train .trFace.m { width: calc(60 * var(--u)); height: calc(60 * var(--u)); }
html[data-ui="v2"] #train .trFace.l { width: calc(84 * var(--u)); height: calc(84 * var(--u)); border-radius: calc(12 * var(--u)); }
html[data-ui="v2"] #train .trFace.xl { width: calc(120 * var(--u)); height: calc(120 * var(--u)); border-radius: calc(14 * var(--u)); }
html[data-ui="v2"] #train .trFace.none { background: repeating-linear-gradient(45deg, #f3e2c0 0 calc(6 * var(--u)), #ead3a6 calc(6 * var(--u)) calc(12 * var(--u))); }
html[data-ui="v2"] #train .v2Sheet { position: relative; }
html[data-ui="v2"] #train .sgBtn.off { opacity: 0.5; cursor: default; }
html[data-ui="v2"] #train .lvG { color: var(--sg-ok); }
html[data-ui="v2"] #train .lvY { color: var(--sg-warn); }
html[data-ui="v2"] #train .lvR { color: var(--sg-bad); }
html[data-ui="v2"] #train .lvL { color: #8a7a68; }
html[data-ui="v2"] #train .trHero {
  position: relative; padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));
  border-radius: calc(16 * var(--u)); background: linear-gradient(#fff6dc, #f3d79c);
  box-shadow: inset 0 0 0 calc(3 * var(--u)) var(--sg-gold-line), 0 calc(3 * var(--u)) 0 rgba(58, 34, 12, 0.35);
}
html[data-ui="v2"] #train .trRib {
  position: absolute; left: calc(-4 * var(--u)); top: calc(12 * var(--u)); padding: calc(4 * var(--u)) calc(12 * var(--u)) calc(4 * var(--u)) calc(10 * var(--u));
  border-radius: 0 999px 999px 0; background: linear-gradient(var(--sg-gold-hi), var(--sg-gold)); color: var(--sg-ink);
  font: 900 var(--fs-xs)/1 var(--sg-font); box-shadow: 0 calc(2 * var(--u)) 0 rgba(58, 34, 12, 0.4);
}
html[data-ui="v2"] #train .trH1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(6 * var(--u)) calc(10 * var(--u)); margin-left: calc(74 * var(--u)); }
html[data-ui="v2"] #train .trH1 b { font: 900 var(--fs-l)/1.2 var(--sg-font); }
html[data-ui="v2"] #train .trH1 small { color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.2 var(--sg-font); }
html[data-ui="v2"] #train .trLv {
  flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: calc(92 * var(--u)); height: calc(34 * var(--u));
  padding: 0 calc(8 * var(--u)); box-sizing: border-box; border-radius: calc(10 * var(--u));
  background: var(--wood-bar); color: #ffe08a; font: 900 var(--fs-xs)/1 var(--sg-font); box-shadow: inset 0 0 0 1px rgba(255, 224, 138, 0.35);
}
html[data-ui="v2"] #train .trMobs { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); margin-top: calc(12 * var(--u)); }
html[data-ui="v2"] #train .trMob {
  display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(6 * var(--u)) calc(10 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u));
  border-radius: calc(12 * var(--u)); background: rgba(255, 243, 214, 0.85); box-shadow: inset 0 0 0 1px rgba(122, 74, 30, 0.3);
}
html[data-ui="v2"] #train .trMob div { display: flex; flex-direction: column; gap: calc(3 * var(--u)); font: 800 var(--fs-xs)/1.15 var(--sg-font); }
html[data-ui="v2"] #train .trFacts { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); margin-top: calc(12 * var(--u)); }
html[data-ui="v2"] #train .trFact { padding: calc(5 * var(--u)) calc(10 * var(--u)); border-radius: 999px; background: rgba(122, 74, 30, 0.12); color: #5a3a18; font: 800 var(--fs-xs)/1.1 var(--sg-font); }
html[data-ui="v2"] #train .trFact.ok { background: rgba(47, 122, 37, 0.13); color: var(--sg-ok); }
html[data-ui="v2"] #train .trFact.warn { background: rgba(192, 40, 30, 0.12); color: #a8231a; }
html[data-ui="v2"] #train .trActs { display: flex; flex-wrap: wrap; align-items: center; gap: calc(10 * var(--u)) calc(14 * var(--u)); margin-top: calc(14 * var(--u)); }
html[data-ui="v2"] #train .trActs .sgBtn { height: calc(52 * var(--u)); min-width: calc(150 * var(--u)); font: 900 var(--fs-m)/1 var(--sg-font); }
html[data-ui="v2"] #train .trCheck { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); padding: 0; border: 0; background: none; color: var(--sg-ink); font: 800 var(--fs-xs)/1.2 var(--sg-font); cursor: pointer; }
html[data-ui="v2"] #train .trCheck i { position: relative; flex: none; width: calc(26 * var(--u)); height: calc(26 * var(--u)); box-sizing: border-box; border-radius: calc(6 * var(--u)); border: calc(3 * var(--u)) solid var(--sg-wood); background: var(--sg-paper-in); }
html[data-ui="v2"] #train .trCheck.on i::after {
  content: ""; position: absolute; left: 28%; top: 4%; width: 30%; height: 60%;
  border: solid var(--sg-ok); border-width: 0 calc(4 * var(--u)) calc(4 * var(--u)) 0; transform: rotate(45deg);
}
html[data-ui="v2"] #train .trSec { display: flex; align-items: center; gap: calc(10 * var(--u)); margin: calc(4 * var(--u)) calc(2 * var(--u)) 0; color: var(--sg-wood); font: 900 var(--fs-xs)/1.2 var(--sg-font); }
html[data-ui="v2"] #train .trSec::after { content: ""; flex: 1; height: calc(2 * var(--u)); background: repeating-linear-gradient(90deg, rgba(122, 74, 30, 0.45) 0 calc(8 * var(--u)), transparent calc(8 * var(--u)) calc(14 * var(--u))); }
html[data-ui="v2"] #train .trSec small { color: var(--sg-wood-lt); font: 700 var(--fs-xs)/1.2 var(--sg-font); }
html[data-ui="v2"] #train .trRow {
  display: grid; grid-template-columns: calc(96 * var(--u)) minmax(0, 1fr) auto; align-items: center; gap: calc(12 * var(--u));
  padding: calc(8 * var(--u)) calc(12 * var(--u)); border-radius: calc(14 * var(--u));
  background: rgba(255, 243, 214, 0.72); box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(122, 74, 30, 0.28); cursor: pointer;
}
html[data-ui="v2"] #train .trRow.hot { background: #fff6dc; box-shadow: inset 0 0 0 calc(3 * var(--u)) var(--sg-gold-line); }
html[data-ui="v2"] #train .trRow.dim > :not(.trExpand) { opacity: 0.62; }
html[data-ui="v2"] #train .trNm { min-width: 0; }
html[data-ui="v2"] #train .trNm b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 900 var(--fs-m)/1.2 var(--sg-font); }
html[data-ui="v2"] #train .trNm small { display: block; margin-top: calc(2 * var(--u)); color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.3 var(--sg-font); }
html[data-ui="v2"] #train .trNm small em { color: var(--sg-bad); font-style: normal; }
html[data-ui="v2"] #train .trMini { display: flex; align-items: center; gap: calc(4 * var(--u)); margin-top: calc(5 * var(--u)); }
html[data-ui="v2"] #train .trMini em { margin-left: calc(4 * var(--u)); font: 900 var(--fs-xs)/1 var(--sg-font); font-style: normal; }
html[data-ui="v2"] #train .trSt { display: flex; flex-direction: column; align-items: flex-end; gap: calc(6 * var(--u)); }
html[data-ui="v2"] #train .trSt .sgBtn, html[data-ui="v2"] #train .trSpot .sgBtn, html[data-ui="v2"] #train .trPc .sgBtn { height: calc(44 * var(--u)); min-width: calc(96 * var(--u)); font: 900 var(--fs-s)/1 var(--sg-font); }
html[data-ui="v2"] #train .sgBtn.warn { background: linear-gradient(#f4b7a2, #d0634a); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); }
html[data-ui="v2"] #train .trPill { padding: calc(4 * var(--u)) calc(10 * var(--u)); border-radius: 999px; font: 900 var(--fs-xs)/1 var(--sg-font); white-space: nowrap; }
html[data-ui="v2"] #train .trPill.best { background: linear-gradient(var(--sg-gold-hi), var(--sg-gold)); color: var(--sg-ink); }
html[data-ui="v2"] #train .trPill.lock { background: #6b5a48; color: #f3e6d0; }
html[data-ui="v2"] #train .trPill.warn { background: var(--sg-bad); color: #fff; }
html[data-ui="v2"] #train .trPill.low { background: #b9a487; color: #fff; }
html[data-ui="v2"] #train .trPill.gray { background: #8a7a68; color: #fff; }
html[data-ui="v2"] #train .trPill.here { background: #3d9a2c; color: #fff; }
html[data-ui="v2"] #train .trExpand {
  grid-column: 1 / -1; margin-top: calc(6 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u));
  border-radius: calc(12 * var(--u)); background: rgba(255, 250, 236, 0.92); box-shadow: inset 0 0 0 1px rgba(122, 74, 30, 0.25); cursor: default;
}
html[data-ui="v2"] #train .trMt { width: 100%; border-collapse: collapse; font: 700 var(--fs-xs)/1.25 var(--sg-font); }
html[data-ui="v2"] #train .trMt td { padding: calc(4 * var(--u)) calc(6 * var(--u)); border-bottom: 1px dashed rgba(122, 74, 30, 0.3); }
html[data-ui="v2"] #train .trMt td.r { text-align: right; white-space: nowrap; }
html[data-ui="v2"] #train .trWarn { margin: calc(8 * var(--u)) 0 0; padding: calc(6 * var(--u)) calc(10 * var(--u)); border-radius: calc(10 * var(--u)); background: rgba(192, 40, 30, 0.1); color: #a8231a; font: 800 var(--fs-xs)/1.4 var(--sg-font); }
html[data-ui="v2"] #train .trNote { margin: 0; color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.5 var(--sg-font); }
html[data-ui="v2"] #train .trChips { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); }
html[data-ui="v2"] #train .trChip {
  display: inline-flex; align-items: center; gap: calc(6 * var(--u)); height: calc(44 * var(--u)); padding: 0 calc(14 * var(--u)); box-sizing: border-box;
  border-radius: 999px; border: calc(2 * var(--u)) solid var(--sg-wood-lt); background: var(--sg-paper-in); color: #5a3a18;
  font: 800 var(--fs-xs)/1 var(--sg-font); cursor: pointer;
}
html[data-ui="v2"] #train .trChip.on { border-color: var(--sg-wood); background: linear-gradient(var(--sg-gold-hi), var(--sg-gold)); color: var(--sg-ink); }
html[data-ui="v2"] #train .trChip .hot { padding: calc(2 * var(--u)) calc(5 * var(--u)); border-radius: calc(6 * var(--u)); background: var(--sg-bad); color: #fff; font: 900 var(--fs-xs)/1 var(--sg-font); }
html[data-ui="v2"] #train .trChip em { color: var(--sg-wood-lt); font: 800 var(--fs-xs)/1 var(--sg-font); font-style: normal; }
html[data-ui="v2"] #train .trGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(10 * var(--u)); }
html[data-ui="v2"] #train .trPc {
  position: relative; display: grid; grid-template-columns: calc(84 * var(--u)) minmax(0, 1fr); gap: calc(6 * var(--u)) calc(10 * var(--u));
  padding: calc(10 * var(--u)); border-radius: calc(14 * var(--u)); background: rgba(255, 243, 214, 0.8);
  box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(122, 74, 30, 0.28); cursor: pointer;
}
html[data-ui="v2"] #train .trPc.sel { background: #fff6dc; box-shadow: inset 0 0 0 calc(3 * var(--u)) var(--sg-gold-line); }
html[data-ui="v2"] #train .trPc.off > :not(.trFoot) { opacity: 0.6; }
html[data-ui="v2"] #train .trPc .trFace { grid-row: span 3; }
html[data-ui="v2"] #train .trPc .trN { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 900 var(--fs-s)/1.15 var(--sg-font); }
html[data-ui="v2"] #train .trPc .trN small { margin-left: calc(4 * var(--u)); color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1 var(--sg-font); }
html[data-ui="v2"] #train .trEl { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(3 * var(--u)); height: calc(9 * var(--u)); align-self: center; }
html[data-ui="v2"] #train .trEl i { position: relative; overflow: hidden; border-radius: calc(3 * var(--u)); background: rgba(122, 74, 30, 0.15); }
html[data-ui="v2"] #train .trEl i b { position: absolute; left: 0; top: 0; bottom: 0; }
html[data-ui="v2"] #train .trEl i.e b { background: #157b2a; }
html[data-ui="v2"] #train .trEl i.w b { background: #0392c6; }
html[data-ui="v2"] #train .trEl i.f b { background: #be2019; }
html[data-ui="v2"] #train .trEl i.a b { background: #da9d0c; }
html[data-ui="v2"] #train .trS { color: #5a3a18; font: 700 var(--fs-xs)/1.35 var(--sg-font); }
html[data-ui="v2"] #train .trOne { color: #a8400e; font-weight: 900; }
html[data-ui="v2"] #train .trFoot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: calc(6 * var(--u)); margin-top: calc(2 * var(--u)); }
html[data-ui="v2"] #train .trFoot small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.2 var(--sg-font); }
/* 抓宠详情：面板里从下往上拉出的一张纸（下面的列表还在，点纸外收起）。 */
html[data-ui="v2"] #train .trSheet {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; max-height: 78%; overflow-y: auto;
  padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)); box-sizing: border-box;
  border-radius: calc(20 * var(--u)) calc(20 * var(--u)) 0 0; background: linear-gradient(#fff6dc, #f1d394);
  box-shadow: 0 calc(-6 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, 0.45), inset 0 calc(3 * var(--u)) 0 var(--sg-gold-line);
}
html[data-ui="v2"] #train .trSheet[hidden] { display: none; }
html[data-ui="v2"] #train .trGrab { display: block; width: calc(90 * var(--u)); height: calc(22 * var(--u)); margin: calc(-8 * var(--u)) auto calc(6 * var(--u)); padding: 0; border: 0; background: none; cursor: pointer; }
html[data-ui="v2"] #train .trGrab::before { content: ""; display: block; width: calc(70 * var(--u)); height: calc(6 * var(--u)); margin: 0 auto; border-radius: 999px; background: rgba(122, 74, 30, 0.35); }
html[data-ui="v2"] #train .trSheetTop { display: flex; gap: calc(14 * var(--u)); align-items: center; }
html[data-ui="v2"] #train .trSheetTop b { font: 900 var(--fs-l)/1.2 var(--sg-font); }
html[data-ui="v2"] #train .trSheetTop .trEl { width: calc(260 * var(--u)); height: calc(12 * var(--u)); margin-top: calc(8 * var(--u)); }
html[data-ui="v2"] #train .trSheetTop p { margin: calc(4 * var(--u)) 0 0; color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.35 var(--sg-font); }
html[data-ui="v2"] #train .trSheet h5 { margin: calc(14 * var(--u)) 0 calc(6 * var(--u)); color: var(--sg-wood); font: 900 var(--fs-xs)/1 var(--sg-font); }
html[data-ui="v2"] #train .trSpot {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: calc(10 * var(--u)); align-items: center;
  margin-top: calc(6 * var(--u)); padding: calc(8 * var(--u)) calc(10 * var(--u)); border-radius: calc(12 * var(--u));
  background: rgba(255, 243, 214, 0.9); box-shadow: inset 0 0 0 1px rgba(122, 74, 30, 0.3);
}
html[data-ui="v2"] #train .trSpot b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 900 var(--fs-s)/1.2 var(--sg-font); }
html[data-ui="v2"] #train .trSpot small { display: block; color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.3 var(--sg-font); }
html[data-ui="v2"] #train .trNeed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(6 * var(--u)) calc(14 * var(--u)); font: 700 var(--fs-xs)/1.35 var(--sg-font); }
html[data-ui="v2"] #train .trNeed span::before { content: "✓"; margin-right: calc(6 * var(--u)); color: var(--sg-ok); font-weight: 900; }
html[data-ui="v2"] #train .trNeed span.no::before { content: "✗"; color: var(--sg-bad); }
html[data-ui="v2"] #train .trNeed span.tip { grid-column: 1 / -1; }
html[data-ui="v2"] #train .trNeed span.tip::before { content: "•"; color: var(--sg-warn); }

/* ---------- 全服经验倍数图标（view.js paintExpBtn，POLISH.md 3.8，用户 2026-10-24 要）：左上角人物头像正下方一颗圆章（紫底金星 EXP），
   和顶栏的药罐一样只有圆图标、下面不挂字牌（用户 10-24 09:34 要去掉「多倍经验」字牌）；不写倍数，点开右边一张小卡写「全服经验 ×N」
   和还剩多久。限时的右上角一枚「限时」。GM 账号的 GM 钮排到它下面。呼吸光只动透明度（合成器做），省电挂机时停。 ---------- */
html[data-ui="v2"] #expBtn {
  left: calc(12 * var(--u)); top: calc(var(--topH) + 12 * var(--u));
  width: calc(56 * var(--u));
}
html[data-ui="v2"] #expBtn .xpIcon {
  position: relative; display: block; width: calc(50 * var(--u)); height: calc(50 * var(--u));
  filter: drop-shadow(0 calc(2 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.55));
}
html[data-ui="v2"] #expBtn .xpIcon svg { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
html[data-ui="v2"] #expBtn .xpIcon::before {
  content: ""; position: absolute; inset: calc(-6 * var(--u)); border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 210, 90, 0.7), rgba(190, 110, 255, 0.35) 46%, transparent 70%);
  opacity: 0.35; animation: xpGlow 2.2s ease-in-out infinite; will-change: opacity;
}
@keyframes xpGlow { 50% { opacity: 1; } }
html[data-ui="v2"] #expBtn .xpClock {
  position: absolute; right: calc(-8 * var(--u)); top: calc(-6 * var(--u)); z-index: 2;
  padding: 0 calc(5 * var(--u));
  border: calc(2 * var(--u)) solid var(--sg-wood-dk); border-radius: 999px;
  background: linear-gradient(var(--sg-gold-hi), var(--sg-gold)); color: var(--sg-ink);
  font: 900 calc(var(--fs-xs) * 0.85)/1.45 var(--sg-font); font-style: normal;
}
html[data-ui="v2"] #expBtn.open .xpIcon::before { opacity: 1; animation: none; }
html[data-ui="v2"] #expBtn:not([hidden]) ~ #gmBtn { top: calc(var(--topH) + 12 * var(--u) + 50 * var(--u) + 18 * var(--u)); }
/* 点开的小卡：贴在图标右边，左边一个小尖角指着图标；深色底金边，大字倍数、走秒、说明。点卡或点别处收起，4 秒自己收。 */
html[data-ui="v2"] #expTip {
  left: calc(86 * var(--u)); top: calc(var(--topH) + 8 * var(--u));
  box-sizing: border-box; width: calc(330 * var(--u));
  display: flex; flex-direction: column; gap: calc(4 * var(--u));
  padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u));
  border: calc(3 * var(--u)) solid var(--sg-gold-line); border-radius: calc(14 * var(--u));
  background: linear-gradient(rgba(70, 22, 110, 0.96), rgba(36, 10, 60, 0.96));
  box-shadow: 0 0 calc(16 * var(--u)) rgba(190, 110, 255, 0.45), 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.5);
  color: #f6e2ff;
  animation: xpTipIn 180ms ease-out;
}
html[data-ui="v2"] #expTip::before {
  content: ""; position: absolute; left: calc(-14 * var(--u)); top: calc(26 * var(--u));
  border-right: calc(14 * var(--u)) solid var(--sg-gold-line);
  border-top: calc(10 * var(--u)) solid transparent; border-bottom: calc(10 * var(--u)) solid transparent;
}
@keyframes xpTipIn { from { opacity: 0; transform: translateX(calc(-8 * var(--u))); } }
html[data-ui="v2"] #expTip .xpBig {
  background: linear-gradient(#fff6c8, #ffcf3a 55%, #e08a10); -webkit-background-clip: text; background-clip: text; color: transparent;
  font: 900 calc(var(--fs-xl) * 1.05)/1.15 var(--sg-font); filter: drop-shadow(0 calc(2 * var(--u)) 0 #2a0a40);
}
html[data-ui="v2"] #expTip .xpLeft { color: #ffe6a0; font: 900 var(--fs-m)/1.2 var(--sg-font); font-variant-numeric: tabular-nums; }
html[data-ui="v2"] #expTip small { color: #d8c0ec; font: 700 var(--fs-xs)/1.45 var(--sg-font); }
html[data-ui="v2"] #playHud:has(> #bag:not([hidden]), > #role:not([hidden]), > #pet:not([hidden]), > #mail:not([hidden]),
  > #family:not([hidden]), > #setting:not([hidden]), > #forge:not([hidden]), > #team:not([hidden]), > #nav:not([hidden]),
  > #friend:not([hidden]), > #train:not([hidden]), > #gm:not([hidden])) :is(#expBtn, #expTip) { visibility: hidden; }