/* ============ 卧龙吟 · 三国尖塔 全局样式 ============ */
/* 本地自托管楷体(已按游戏用字 subset,避开 Google Fonts 在国内被墙;微信 WebView 可用) */
/* 主字体 = 霞鹜文楷 LXGW WenKai —— 真·楷体(OFL 开源)。
   踩坑记录:此前主字体是站酷小薇,代码注释把它写成「清晰楷书衬线」,但它其实是**宋/明体风格**的
   展示字、并非楷体,这正是玩家反馈「字体很怪、为什么不能用楷体」的根因(不是子集或加载问题)。
   另:早前还挂着一个 1.2MB 的书法字 @font-face,却没有任何字体栈引用它——纯死重量,而且被
   Service Worker 预缓存导致每个玩家白下载,已一并删除(subset_fonts.py 里也已摘掉)。 */
@font-face {
  font-family: 'LXGW WenKai';
  src: url('../assets/fonts/LXGWWenKai-Regular.subset.woff2?v=688') format('woff2');
  /* #517 font-display:swap 会先用系统字体画一遍、字体到位后整体跳换,就是「进游戏字体突然变」的根因。
     用 block:短暂空白后直接以楷体上屏,不闪跳;本地文件+预加载,正常网络下几乎无感。 */
  font-weight: normal; font-style: normal; font-display: block;
}
/* A13 附记:换成霞鹜文楷后,原先那个「稀有字兜底子集」重跑出来是 **0 字**——霞鹜的字库比
   站酷小薇全得多,史名/符号已全覆盖,兜底 @font-face 成了空文件还占一次预加载请求,故移除。
   subset_fonts.py 仍保留该兜底作为**覆盖率校验**:若将来加了霞鹜也没有的字,脚本会报错提醒。 */
:root {
  --ink: #14100c; --ink2: #1f1812; --panel: #221a12;
  --paper: #e8dcc0; --paper-dim: #b6a785;
  --gold: #c9a227; --gold-bright: #f0cf6e;
  --red: #c03028; --red-bright: #e8554a;
  --jade: #4a8f6d; --azure: #3e6e9e;
  --shadow: rgba(0,0,0,.55);
  /* 标题/名号/h2/Boss名:统一改用站酷小薇(清晰楷书),原马善政笔触太狂草且与正文字体反差大,
     进游戏时两种字体先后加载完毕会有明显"跳字"感;统一成一种字体后只需加载/切换一次,观感更稳 */
  --brush-deco: 'LXGW WenKai','Kaiti SC','STKaiti','KaiTi',serif;
  /* 楷韵正文/按钮:站酷小薇(清晰楷书衬线)→ 系统楷书兜底 */
  --brush: 'LXGW WenKai','Kaiti SC','STKaiti','KaiTi','Noto Serif CJK SC',serif;
  --body: 'LXGW WenKai','Kaiti SC','STKaiti','KaiTi','Noto Serif CJK SC','Songti SC',serif;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
/* 微信/iOS WebView 关闭字号自动放大 */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html,body { height:100%; overflow:hidden; background:var(--ink); touch-action:manipulation; }
body { font-family:var(--body); color:var(--paper); user-select:none; font-weight:500; letter-spacing:.02em; }
#app { position:relative; width:100vw; height:100vh; overflow:hidden; }
@supports (height:100dvh){ #app{ height:100dvh; } }
.hidden { display:none !important; }
#boot-splash {
  position:fixed; inset:0; z-index:9999; display:grid; place-items:center; overflow:hidden;
  /* place-items:center 是把**每个** grid 项在各自行内居中。以前流内只有字标一个项,看着像整体居中;
     一旦加了副题,它就成了第二行,两行各占半屏 → 副题被甩到屏幕下方。align-content:center
     才是把「所有行作为一个整体」居中,这样字标+副题会贴在一起居中。 */
  align-content:center; gap:0;
  /* B33 开机背景:水墨盘龙(暗金调,hy 生成)。龙在画面上半,把图下沉让字标落在云雾留白区;
     渐变层压在图上保证金字对比度。图 404 时渐变仍是完整兜底。 */
  background:
    radial-gradient(80% 55% at 50% 38%, rgba(76,39,24,.45), transparent 68%),
    linear-gradient(180deg,rgba(21,16,11,.38) 0%,rgba(11,9,7,.66) 100%),
    url('../assets/bg/bg_boot.png?v=688') center 18% / cover no-repeat,
    linear-gradient(180deg,#15100b 0%,#0b0907 100%);
  pointer-events:auto; color:var(--gold-bright);
}
#boot-splash::before, #boot-splash::after {
  content:''; position:absolute; inset:-14%; pointer-events:none;
}
#boot-splash::before {
  background:
    radial-gradient(ellipse at 24% 68%, rgba(240,207,110,.18), transparent 36%),
    radial-gradient(ellipse at 72% 28%, rgba(192,48,40,.16), transparent 34%),
    linear-gradient(100deg, transparent 0 28%, rgba(232,220,192,.12) 44%, transparent 62%);
  filter:blur(18px); transform:translateX(-18%) rotate(-4deg);
  animation:boot-wash-sweep 1.75s cubic-bezier(.2,.8,.28,1) forwards;
}
#boot-splash::after {
  background:
    linear-gradient(115deg, transparent 0 38%, rgba(232,220,192,.08) 44%, transparent 51%),
    repeating-linear-gradient(96deg, transparent 0 18px, rgba(232,220,192,.035) 19px 20px);
  opacity:0; animation:boot-paper-grain 1.35s ease-out .25s forwards;
}
.boot-wash {
  position:absolute; left:50%; top:50%; width:min(84vw,520px); height:min(32vh,210px);
  transform:translate(-50%,-50%) scaleX(.4); transform-origin:left center; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(232,220,192,.20), rgba(156,38,30,.14) 42%, transparent 72%);
  filter:blur(14px); opacity:.4; animation:boot-ink-bloom 1.5s ease-out forwards;
}
.boot-logo {
  position:relative; z-index:1; display:flex; gap:.2em; align-items:center;
  font-family:'Kaiti SC','STKaiti','KaiTi',serif; font-size:clamp(52px,18vw,112px);
  color:#f2d67a; text-shadow:0 0 22px rgba(240,207,110,.34),0 5px 18px #000;
  letter-spacing:.1em;
}
.boot-logo span { opacity:0; transform:translateY(18px) scale(1.18); filter:blur(8px); animation:boot-logo-in .78s cubic-bezier(.16,.82,.2,1) forwards; }
.boot-logo span:nth-child(2) { animation-delay:.18s; }
.boot-logo span:nth-child(3) { animation-delay:.36s; }
/* 开机副题:英文玩家需要知道这仨字是什么游戏(中文模式则显示「三国·尖塔」) */
.boot-sub {
  position:relative; z-index:1; margin-top:.5em;
  font-family:'Kaiti SC','STKaiti','KaiTi',serif; font-size:clamp(11px,3vw,17px);
  color:#c9a961; letter-spacing:.12em; text-indent:.12em; white-space:nowrap;
  opacity:0; animation:boot-logo-in .8s cubic-bezier(.16,.82,.2,1) .52s forwards;
}
.boot-seal {
  /* 印章位置是「字标右下方的空当」。加英文副题后这块被占用了——不要上移印章(会压到「吟」字),
     而是把副题收窄(见 .boot-sub 的字号/字距),让它在印章左侧收住。 */
  position:absolute; z-index:2; left:calc(50% + min(28vw,170px)); top:calc(50% + min(7vw,42px));
  width:42px; height:42px; display:grid; place-items:center; border:2px solid rgba(255,206,162,.88);
  color:#ffe0bb; background:rgba(151,26,21,.82); font-family:'Kaiti SC','STKaiti','KaiTi',serif;
  font-size:23px; line-height:1; transform:rotate(-8deg) scale(1.45); opacity:0;
  box-shadow:inset 0 0 0 2px rgba(100,0,0,.35),0 4px 14px rgba(0,0,0,.55);
  animation:boot-seal-drop .42s cubic-bezier(.25,1.25,.35,1) .82s forwards;
}
.boot-rule {
  position:absolute; z-index:1; left:50%; top:calc(50% + min(17vw,108px)); width:min(52vw,310px); height:2px;
  transform:translateX(-50%) scaleX(0); transform-origin:center; opacity:.78;
  background:linear-gradient(90deg, transparent, rgba(240,207,110,.78), transparent);
  animation:boot-rule-in .55s ease-out .72s forwards;
}
.boot-done #boot-splash { animation:boot-splash-out .46s ease-in forwards; }
@keyframes boot-wash-sweep { to{ transform:translateX(14%) rotate(-4deg); opacity:.95; } }
@keyframes boot-paper-grain { to{ opacity:1; } }
@keyframes boot-ink-bloom { to{ transform:translate(-50%,-50%) scaleX(1); opacity:.9; } }
@keyframes boot-logo-in { to{ opacity:1; transform:none; filter:none; } }
@keyframes boot-seal-drop { to{ opacity:1; transform:rotate(-8deg) scale(1); } }
/* #540 ≤380px 窄屏:left:calc(50%+min(28vw,170px)) 实测在 375px 下印章(x279)压进「吟」字(右缘 x319)。
   改成靠右锚定并缩小:375px 时印章左缘 = 375-8-34 = 333 ≥ 319,不再压字;≥381px 不受影响。 */
@media (max-width:380px){
  .boot-seal { left:auto; right:8px; width:34px; height:34px; font-size:18px; }
}
@keyframes boot-rule-in { to{ transform:translateX(-50%) scaleX(1); } }
@keyframes boot-splash-out { to{ opacity:0; visibility:hidden; } }
#bg { position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(192,48,40,.10), transparent 60%),
    radial-gradient(100% 100% at 50% 120%, rgba(0,0,0,.6), transparent),
    linear-gradient(180deg,#1a140e,#0e0b08); }

.screen { position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; }

/* —— 通用按钮(浮雕立体)—— */
.btn { font-family:var(--brush); font-size:17px; letter-spacing:.12em; color:var(--paper);
  background:linear-gradient(180deg,#473524,#2c1d11); border:1px solid rgba(201,162,39,.5);
  border-top-color:rgba(240,207,110,.55); border-bottom-color:rgba(0,0,0,.5);
  border-radius:9px; padding:11px 26px; cursor:pointer; transition:.13s ease;
  /* 顶部内高光 + 底部内阴影 = 凸起;外部投影 = 离地 */
  box-shadow:
    inset 0 1px 0 rgba(255,236,180,.28),
    inset 0 -2px 3px rgba(0,0,0,.45),
    0 3px 6px rgba(0,0,0,.5),
    0 1px 0 rgba(0,0,0,.4);
  text-shadow:0 1px 1px rgba(0,0,0,.6); }
.btn:hover { border-color:var(--gold-bright);
  background:linear-gradient(180deg,#54402b,#332112);
  box-shadow:
    inset 0 1px 0 rgba(255,240,190,.38),
    inset 0 -2px 3px rgba(0,0,0,.4),
    0 7px 16px rgba(0,0,0,.55),
    0 0 13px rgba(201,162,39,.35);
  transform:translateY(-2px); }
.btn:active { transform:translateY(1px);
  background:linear-gradient(180deg,#2c1d11,#3a2c1c);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(0,0,0,.3),
    0 1px 2px rgba(0,0,0,.4); }
.btn:disabled { opacity:.4; cursor:not-allowed; transform:none;
  box-shadow:inset 0 1px 0 rgba(255,236,180,.12),0 2px 4px rgba(0,0,0,.4); }
.btn.big { font-size:23px; padding:15px 56px; border-radius:11px; }
.btn.sm { font-size:13px; padding:6px 13px; letter-spacing:.08em; border-radius:7px; }

/* —— 标题 —— */
#s-title { align-items:center; justify-content:center; gap:6px; padding-bottom:56px; overflow:hidden; }
/* #19 标题屏粒子背景:墨点/竹叶 canvas,衬于内容之下 */
#title-bg { position:absolute; inset:0; z-index:0; pointer-events:none; }
.perf-lowend #title-bg { opacity:.45; }
.perf-lowend .title-cloud, .perf-lowend .title-flag, .perf-lowend .title-riders { animation-duration:72s !important; }
#s-title > :not(#title-bg):not(.title-scene) { position:relative; z-index:2; }
.title-scene { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; contain:layout paint; }
.title-cloud { position:absolute; width:260px; height:52px; border-radius:999px;
  background:radial-gradient(ellipse at 28% 50%, rgba(226,220,194,.24), transparent 60%),
    radial-gradient(ellipse at 58% 45%, rgba(176,170,146,.18), transparent 62%),
    linear-gradient(90deg, transparent, rgba(230,220,184,.13), transparent);
  filter:blur(5px); mix-blend-mode:screen; opacity:.58; animation:title-cloud-drift 34s linear infinite; }
.cloud-a { top:16%; left:-34%; animation-duration:38s; }
.cloud-b { top:30%; left:-48%; width:330px; opacity:.42; animation-duration:52s; animation-delay:-20s; }
.title-flag { position:absolute; bottom:106px; width:88px; height:168px; transform-origin:50% 100%; animation:title-flag-sway 2.8s ease-in-out infinite alternate; opacity:.8; }
.flag-left { left:7%; --flag-dir:1; }
.flag-right { right:8%; --flag-dir:-1; animation-delay:-1.2s; }
.title-flag::before { content:''; position:absolute; left:12px; bottom:0; width:5px; height:162px; border-radius:3px;
  background:linear-gradient(90deg,#24160d,#8f6e36 45%,#21150d); box-shadow:0 0 8px rgba(0,0,0,.5); }
.title-flag::after { content:''; position:absolute; left:16px; top:14px; width:66px; height:54px;
  background:linear-gradient(90deg,rgba(96,18,16,.95),rgba(166,49,34,.82) 42%,rgba(80,16,15,.72));
  clip-path:polygon(0 0,100% 9%,82% 52%,100% 96%,0 86%);
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.52)); transform-origin:0 50%; animation:title-banner-wave 1.45s ease-in-out infinite alternate; }
.title-riders { position:absolute; bottom:36px; left:-36%; width:34%; height:62px; opacity:.46; animation:title-riders-cross 18s linear infinite; }
.title-riders i { position:absolute; bottom:9px; width:42px; height:16px; border-radius:52% 48% 45% 55%; background:rgba(10,8,6,.82); box-shadow:0 8px 0 -6px rgba(10,8,6,.82); }
.title-riders i::before { content:''; position:absolute; left:18px; bottom:12px; width:9px; height:18px; border-radius:8px 8px 2px 2px; background:rgba(10,8,6,.84); transform:rotate(-8deg); }
.title-riders i::after { content:''; position:absolute; right:-7px; top:3px; width:15px; height:9px; border-radius:50%; background:rgba(10,8,6,.8); transform:rotate(-12deg); }
.title-riders i:nth-child(1) { left:0; transform:scale(.88); }
.title-riders i:nth-child(2) { left:23%; bottom:14px; transform:scale(1.02); }
.title-riders i:nth-child(3) { left:49%; transform:scale(.82); opacity:.9; }
.title-riders i:nth-child(4) { left:74%; bottom:12px; transform:scale(.96); }
@keyframes title-cloud-drift { from{ transform:translateX(0); } to{ transform:translateX(150vw); } }
@keyframes title-flag-sway { from{ transform:scaleX(var(--flag-dir,1)) rotate(-1.5deg); } to{ transform:scaleX(var(--flag-dir,1)) rotate(2.2deg); } }
@keyframes title-banner-wave { from{ transform:skewY(-3deg) scaleX(.97); } to{ transform:skewY(4deg) scaleX(1.04); } }
@keyframes title-riders-cross { from{ transform:translateX(0); } to{ transform:translateX(170vw); } }
.title { font-family:var(--brush-deco); font-size:clamp(52px,17vw,92px); letter-spacing:.1em; max-width:96vw; text-align:center; line-height:1.08;
  color:var(--gold-bright); text-shadow:0 0 30px rgba(201,162,39,.35),0 4px 12px #000; }
/* #F2-8 EN 版"WOLONG · CHRONICLE"比中文"卧 龙 吟"字符数多得多,17vw 在窄屏下按中文行宽估的字号会溢出;
   html[lang^=en] 时用更保守的 vw 系数(9.5vw)+ 更小上限,同时收紧字距,让整行收进视口内。 */
html[lang^="en"] .title { font-size:clamp(30px,9.5vw,58px); letter-spacing:.02em; line-height:1.12; }
.title-ink, .subtitle { color:var(--gold); letter-spacing:.4em; font-family:var(--brush-deco); }
.subtitle { margin-bottom:28px; font-size:16px; }
html[lang^="en"] .subtitle { letter-spacing:.26em; }
.col { display:flex; flex-direction:column; align-items:center; gap:16px; }
.seed-row { display:flex; gap:8px; }
.seed-input { background:rgba(0,0,0,.35); border:1px solid rgba(201,162,39,.4); color:var(--paper);
  padding:8px 12px; border-radius:6px; font-family:var(--body); text-align:center; width:200px; letter-spacing:.15em; }
.foot { display:none; }
.ver-badge { position:absolute; bottom:10px; left:12px; color:var(--paper-dim); font-size:11px; opacity:.5; letter-spacing:.05em; }

/* —— 顶栏 —— */
/* 顶栏:章节名 + 右侧 stats pill 徽章,右上角浮动按键独占空间 */
.topbar { display:flex; align-items:center; gap:10px; padding:12px 14px 12px 14px;
  padding-top:max(12px,env(safe-area-inset-top)); padding-right:180px; /* 让出 EN/牌/⚙/🔇 四键 + 缓冲 */
  background:linear-gradient(180deg,rgba(0,0,0,.5),transparent); }
.topbar #btn-deck { display:none; } /* 「牌库」已移到 .top-btns */
.act-name { text-shadow:0 2px 6px #000,0 0 12px rgba(0,0,0,.6); }
/* stats 改为 pill 徽章风格(参考 napoleon-war #conq-francs) */
.stats { margin-left:auto; display:flex; gap:6px; font-size:13px; flex-shrink:1; min-width:0; }
.stats .stat { padding:3px 9px; border-radius:12px;
  background:linear-gradient(180deg,#2a1f14,#14100a);
  border:1px solid rgba(201,162,39,.45); border-top-color:rgba(240,207,110,.35);
  white-space:nowrap; text-shadow:0 1px 3px #000;
  box-shadow:inset 0 1px 0 rgba(255,236,180,.18),inset 0 -1px 2px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.4);
  color:var(--gold-bright); font-weight:600; }
.stats .stat.hp::before { content:'♥ '; color:var(--red-bright); }
/* 金币不用「金」字当图标了,改画一枚三国铜钱(外圆内方孔),比汉字更一眼、也不占字宽 */
.stats .stat.gold::before { content:''; display:inline-block; width:11px; height:11px; margin-right:4px; vertical-align:-1px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10.2' fill='%23f0cf6e' stroke='%238a6a1c' stroke-width='1.6'/><circle cx='12' cy='12' r='7' fill='none' stroke='%238a6a1c' stroke-width='.9' opacity='.55'/><rect x='8.6' y='8.6' width='6.8' height='6.8' rx='1.1' fill='%23251c08'/></svg>") center/contain no-repeat; }
.stats .stat.seed { max-width:90px; overflow:hidden; text-overflow:ellipsis; font-size:11px; }
@media (max-width:430px) { .stats .stat.seed { display:none; } } /* 窄屏隐藏种子,结算屏仍可复制 */
/* 窄屏:padding-right收紧到恰好让出top-btns(x=213起);flex-shrink:0防止pill被挤压 */
@media (max-width:430px) { .topbar { padding-right:178px; } .stats { gap:4px; flex-shrink:0; } .stats .stat { padding:2px 6px; font-size:11px; } }
/* 战斗顶端:左侧宝贝条 避开右上角浮动按键 */
#battle-relics { max-width:calc(100% - 180px); }
.act-name { font-family:var(--brush); font-size:16px; color:var(--gold-bright);
  flex-shrink:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stats { margin-left:auto; display:flex; gap:12px; font-size:14px; }
.stat.hp::before { content:'♥ '; color:var(--red-bright); }
.stat.gold::before { content:'⬤ '; color:var(--gold-bright); font-size:10px; }
.stat.seed { color:var(--paper-dim); font-size:11px; letter-spacing:.1em; }

/* —— 地图 —— */
.map-wrap { position:relative; flex:1; overflow-y:auto; overflow-x:hidden; padding:20px 0 60px; }
/* svg 是 replaced element,仅 left/right 不会自动撑满宽度(那是非替换块级盒子的行为);
   必须显式 width:100%,否则退回 SVG 默认固有宽度 300px,overflow:hidden 会把 x>300 的连线全部裁掉 */
#map-edges { position:absolute; top:20px; left:0; right:0; bottom:60px; width:100%; pointer-events:none; z-index:1; }
#map-nodes { position:relative; z-index:2; }
.mnode { position:absolute; width:46px; height:46px; transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:radial-gradient(circle,#2a1f14,#181009); border:2px solid rgba(201,162,39,.35);
  font-size:22px; color:var(--paper-dim); transition:.15s; }
.mnode.avail { border-color:var(--map-node,var(--gold-bright)); box-shadow:0 0 16px color-mix(in srgb,var(--map-node,var(--gold-bright)) 48%,transparent); cursor:pointer; color:var(--paper); animation:pulse 1.6s infinite; }
.boss-rush-node { --map-node:#d88cff; border-color:#d88cff; }
.boss-rush-node .mnode-svg { color:#f1c4ff; filter:drop-shadow(0 0 10px rgba(216,140,255,.8)) drop-shadow(0 1px 2px #000); }
.boss-rush-node .here-tag { color:#f7ddff; text-shadow:0 0 8px rgba(216,140,255,.75),0 1px 3px #000; }
.mnode.avail:hover { transform:translate(-50%,-50%) scale(1.12); }
.mnode.done { opacity:.45; border-color:rgba(201,162,39,.5); }
/* #7 未来不可达节点:压暗+去饱和,衬托可达金色脉冲节点 */
.mnode.future { opacity:.6; }
.mnode.future .mnode-svg { filter:grayscale(.35) brightness(.82) drop-shadow(0 1px 2px #000); color:var(--map-future,#9a8a63); }
.mnode.cur { border-color:var(--red-bright); box-shadow:0 0 18px rgba(232,85,74,.6); }
.mnode.scouted { box-shadow:0 0 0 2px #ffe082, 0 0 10px 2px rgba(255,224,130,.45); }
.mnode.scouted.future { opacity:.85; }
.scout-tag { position:absolute; top:-8px; right:-8px; font-size:9px; color:#ffe082; line-height:1; pointer-events:none; text-shadow:0 0 4px #a8760a; }
.secret-edge { stroke:#c99cff; stroke-width:2; stroke-dasharray:2 7; filter:drop-shadow(0 0 4px rgba(201,156,255,.45)); }
.hidden-node .mnode-svg { color:#d8b6ff; filter:drop-shadow(0 0 7px rgba(216,182,255,.72)) drop-shadow(0 1px 2px #000); }
.hidden-node.future { opacity:.72; }
.hidden-node.avail .mnode-svg { animation:nodePulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%,100%{box-shadow:0 0 10px color-mix(in srgb,var(--map-node,var(--gold-bright)) 35%,transparent);} 50%{box-shadow:0 0 22px color-mix(in srgb,var(--map-node,var(--gold-bright)) 70%,transparent);} }
.medge { stroke:var(--map-line,rgba(201,162,39,.28)); stroke-width:2.5; stroke-dasharray:5 6; fill:none; }
.medge.hot { stroke:var(--map-hot,rgba(240,207,110,.7)); stroke-dasharray:none; filter:drop-shadow(0 0 5px var(--map-hot,rgba(240,207,110,.7))); }
.medge.map-plan-edge { stroke:var(--map-hot,rgba(240,207,110,.9)); stroke-width:4; stroke-dasharray:none; filter:drop-shadow(0 0 8px var(--map-hot,rgba(240,207,110,.82))); opacity:.96; }
.mnode.map-plan-node { opacity:1; z-index:5; }
.mnode.map-plan-node .mnode-svg { color:var(--map-node,var(--gold-bright)); filter:drop-shadow(0 0 9px var(--map-hot,rgba(240,207,110,.8))) drop-shadow(0 1px 2px #000); }
.mnode.map-plan-origin .mnode-svg { transform:scale(1.22); color:var(--gold-bright); filter:drop-shadow(0 0 13px var(--map-hot,rgba(240,207,110,.92))) drop-shadow(0 0 4px #fff0b8); }
.map-plan-pop { position:absolute; z-index:7; transform:translate(-50%,-116%); width:max-content; max-width:min(260px,88vw);
  padding:6px 9px; border-radius:8px; pointer-events:none;
  background:linear-gradient(180deg,rgba(38,28,17,.96),rgba(15,10,6,.96));
  border:1px solid rgba(240,207,110,.58); color:var(--paper);
  box-shadow:0 8px 24px rgba(0,0,0,.62), 0 0 12px rgba(240,207,110,.22);
  font-size:11px; line-height:1.35; text-align:center; text-shadow:0 1px 2px #000; }
.map-plan-pop b { display:block; color:var(--gold-bright); font-family:var(--brush); font-size:14px; line-height:1.15; }
.map-plan-pop span { display:block; white-space:nowrap; }
.map-plan-pop.below { transform:translate(-50%,18px); }
.map-plan-pop.dock { transform:none; max-width:calc(100% - 16px); text-align:left; }

/* —— 战斗 —— */
#s-battle { padding:0; }
/* #519 手机优先:战场带接管 flex:1(原来这条空间被 combat-log 占着但大片留白),
   敌人从"吊在刘海底下"下移到带内居中偏上,与左下方主角斜向对峙;
   左侧留 64px 让开药水列,底部留 130px 让开主角立绘 */
.enemies { display:flex; flex:1; min-height:0; justify-content:center; gap:16px; flex-wrap:wrap;
  align-items:center; align-content:center;
  /* 手机竖屏保持敌人和主角的横向中心线一致,避免敌人被左侧安全留白推得太靠右。 */
  padding:calc(max(18px,env(safe-area-inset-top)) + 34px) 12px 130px 12px; }
.efighter { width:128px; display:flex; flex-direction:column; align-items:center; gap:5px; cursor:default; position:relative; }
.efighter.targetable { cursor:pointer; }
.efighter.targetable .eportrait { box-shadow:0 0 0 2px var(--red-bright),0 0 16px rgba(232,85,74,.5); }
.efighter.kbd-target .eportrait { box-shadow:0 0 0 3px var(--gold-bright),0 0 24px rgba(240,207,110,.86); transform:translateY(-3px) scale(1.03); }
.efighter.kbd-target .target-reticle { opacity:.98; transform:translate(-50%,-50%) scale(1.05); animation:reticle-spin 3s linear infinite; }
.efighter.drag-over .eportrait { box-shadow:0 0 0 3px var(--gold-bright),0 0 24px rgba(240,207,110,.78); transform:translateY(-3px) scale(1.03); }
.drag-play-live .efighter .eportrait { transition:transform .12s, box-shadow .12s; }
/* #530 古风描金边框:600px 透明 PNG,中心镂空,用 border-image 9 宫格贴到立绘四周。
   新版框减少 AI 噪线和重污纹理,英雄用鎏金玉纹,精英/Boss 用赤金黑铁;slice 84 对齐透明窗口。
   透明边(border:solid transparent)只占布局,画面全靠 border-image;渲染厚度由各处 border-width 控制。
   同一规则复用给 #hero-stage-wrap(见下方主角立绘)。 */
/* #532 敌人边框分档:普通兵卒用简约的青铜细描边(不喧宾夺主);精英用深铁饕餮框(frame_enemy.png),
   Boss 用更张扬的赤金镇岳框(frame_boss.png)。主角默认鎏金框(frame_ornate.png),战斗开始时由 JS 轮换三套英雄边框。 */
.eportrait { width:108px; height:108px; border-radius:6px; background:linear-gradient(180deg,#2c2113,#170f08);
  display:flex; align-items:center; justify-content:center; font-size:46px; position:relative;
  border:3px solid #6f5c30;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.55), inset 0 0 0 2px rgba(190,160,90,.32), 0 4px 9px rgba(0,0,0,.55); }
/* Boss/精英:豪华古风窗棂框。#533 slice 值必须按当前文件的实际像素量(压缩到 600px 后约 84px)算,
   之前沿用了压缩前 864px 原图量出的 120,slice 偏大导致连中心镂空的一圈也被切进"边框"里,
   视觉上就是"画框比立绘大一圈"——立绘缩在框内、四周多出一圈镂空色。 */
/* #539 三档体格递进:边框宽度 普通(3)<精英(10)<Boss(12) 递增,且净画面(width-2×border)也逐档递增
   普通 108-6=102 < 精英 126-20=106 < Boss 160-24=136。此前 Boss 22px 厚框把 148px 吃到净 104,
   和杂兵一样大毫无压迫感——框要薄、画要大。border-image-width 用 1(=1×border-width),
   这样各处只改 border-width 就能同步渲染厚度,不再出现"布局 22px/绘制 15px"的脱节。 */
.efighter.elite .eportrait {
  width:126px; height:126px; font-size:50px;
  border:10px solid transparent; box-shadow:none;
  border-image:url('../assets/ui/frame_enemy.png?v=688') 84 fill / 1 / 0 stretch;
  filter:drop-shadow(0 4px 9px rgba(0,0,0,.6)); }
.efighter.elite .hpbar { width:126px; }
.efighter.boss .eportrait {
  border:12px solid transparent; box-shadow:none;
  border-image:url('../assets/ui/frame_boss.png?v=688') 84 fill / 1 / 0 stretch;
  filter:drop-shadow(0 4px 9px rgba(0,0,0,.6)); }
/* Boss 放大此前只写在 @media(min-width:760px) 里,手机上 Boss 和杂兵同为 108px,毫无压迫感。
   手机也要放大(受屏宽限制取 160px,配套加大血条/名号)。 */
.efighter.boss { width:168px; }
.efighter.boss .eportrait { width:174px; height:174px; font-size:64px; border-width:8px; } /* B35: 边框再收(12→8)立绘再放(净136→158) */
.efighter.boss .hpbar { width:174px; height:17px; }
.efighter.boss .ename { font-size:17px; }
.intent { position:absolute; top:-14px; left:50%; transform:translateX(-50%); white-space:nowrap;
  background:rgba(0,0,0,.78); border:1px solid rgba(201,162,39,.4); border-radius:12px; padding:2px 9px; font-size:13px; }
.intent.atk { color:var(--red-bright); } .intent.buff { color:var(--gold-bright); } .intent.debuff { color:var(--azure); }
.ename { font-family:var(--brush); font-size:15px; }
.boss-name { color: var(--red-bright, #e05050); font-weight: bold; letter-spacing:0.04em; text-shadow: 0 0 6px rgba(200,50,50,0.4); } /* #538 Boss战名牌高亮 */
.hpbar { width:108px; height:15px; background:#2a1109; border:1px solid rgba(0,0,0,.5); border-radius:8px; position:relative; overflow:hidden; }
.hpfill { position:absolute; inset:0; background:linear-gradient(90deg,#7a1d16,#c03028); transition:width .3s; }
.hptext { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; color:#fff; text-shadow:0 1px 2px #000; }
.block-badge { display:inline-flex; align-items:center; gap:2px; background:#33536e; color:#cfe6ff;
  border-radius:6px; padding:0 5px; font-size:12px; border:1px solid #5b86a8; }
/* #446 格挡数字金色高亮 */
.block-active { color: var(--gold-bright) !important; font-weight: bold; }
.powers { display:flex; gap:4px; flex-wrap:wrap; justify-content:center; min-height:18px; }
.pw { font-size:11px; padding:1px 5px; border-radius:5px; background:rgba(0,0,0,.4); border:1px solid rgba(201,162,39,.3); }
.pw.debuff { color:var(--red-bright); border-color:rgba(232,85,74,.4); }
.pw.buff { color:var(--gold-bright); }
/* #286 敌人意图标牌 */
.intent-badge { font-size:12px; text-align:center; padding:2px 7px; border-radius:8px; cursor:default; line-height:1.4;
  background:rgba(0,0,0,.65); border:1px solid rgba(201,162,39,.35); color:var(--paper-dim);
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.7)); white-space:nowrap; }
.intent-badge-attack { color:var(--red-bright); border-color:rgba(232,85,74,.4); }
.intent-badge-defend { color:#cfe6ff; border-color:rgba(91,134,168,.5); }
.intent-badge-buff   { color:var(--gold-bright); border-color:rgba(201,162,39,.5); }
.intent-badge-debuff { color:var(--azure); border-color:rgba(62,110,158,.5); }

/* #289 进阶徽章(战斗 HUD) */
.asc-badge { background:#b04020; color:#fff; font-size:11px; font-weight:bold; padding:2px 6px; border-radius:10px; z-index:10; }
#s-battle #asc-badge { position:absolute; top:6px; right:116px; width:auto; z-index:10; }

/* 战报文字样式(定位/盒子样式见 #519 块的 #combat-log:改成了顶部居中浮条) */
.combat-log { overflow-y:auto; font-size:12.5px; color:var(--paper-dim); line-height:1.65; }
.combat-log .hot { color:var(--gold-bright); }

.control-bar { display:flex; align-items:center; gap:8px; padding:4px 12px 2px 8px; position:relative; z-index:2; }
.control-bar .fighter { order:0; flex:none; width:130px; min-width:0; }
.control-bar .fighter .ename { font-size:14px; }
.control-bar .fighter .hpbar { width:100%; max-width:130px; }
#energy { order:1; }
.control-bar .piles { order:2; margin-left:auto; }
#btn-endturn { order:3; }
.piles { display:flex; gap:6px; flex-shrink:0; }
.pile { width:32px; text-align:center; position:relative; }
/* #91 无障碍:键盘聚焦可见描边(鼠标点击不显,仅键盘 Tab) */
.pile:focus-visible, .mute-btn:focus-visible, .btn:focus-visible, .card:focus-visible { outline:2px solid var(--gold-bright,#f0cf6e); outline-offset:2px; }
.pile b { display:block; font-size:15px; color:var(--gold-bright); }
.pile span { font-size:10px; color:var(--paper-dim); }
/* 描边挂在容器上:innerHTML 是 `<b>3</b>/3`,「/3」是 .energy 的裸文本节点,
   只给 <b> 加描边的话它照样糊在橙色能量球上(玩家反馈「4后面的字还是看不清」)。 */
.energy { text-shadow:-1px -1px 0 #1a1006, 1px -1px 0 #1a1006, -1px 1px 0 #1a1006, 1px 1px 0 #1a1006; }
.energy { flex-shrink:0; width:50px; height:50px; border-radius:50%;
  background:radial-gradient(circle,#3a2c5e,#1c1430); border:2px solid var(--gold-bright); display:flex;
  align-items:center; justify-content:center; font-size:12px; color:var(--paper); }
/* 能量数字固定用浅金,但各职业能量球底色不同(曹操=橙红),金字压橙底几乎读不出。
   加一圈深色描边:不挑底色,7 个职业通吃,比逐个调色稳。 */
.energy b { font-size:20px; color:var(--gold-bright);
  text-shadow:-1px -1px 0 #1a1006, 1px -1px 0 #1a1006, -1px 1px 0 #1a1006, 1px 1px 0 #1a1006, 0 0 7px rgba(0,0,0,.85); }

/* 手牌溢出可横向滑动。三个要点:
   1) justify-content 用 `safe center`:普通 center 一旦内容溢出,最左边的牌会被推到滚动区外且**永远滑不到**
      (flex 居中经典坑);safe 在溢出时自动退回 flex-start。
   2) overflow-x:auto 会把 overflow-y 也隐式变成 auto → 悬停抬起的牌会被裁掉。用
      `padding-top:40px; margin-top:-40px` 在滚动盒内部让出抬升空间,再用负 margin 把布局高度拉回原值,
      这样既不裁牌、也不占额外竖向空间(#hero-stage 的让位算法依赖 hand.offsetHeight,不能变高)。
   3) 藏滚动条:手机上本来就是手滑,横条很丑。
   4) pointer-events:none 必须挂在容器上、card 上再打开:padding-top/负margin 让容器带着一条 40px 的
      **透明命中区**盖在上方 UI(结束回合按钮下半)之上,手机点按钮会被它吃掉(点了没反应=卡死观感)。
      容器禁事件、卡片恢复事件后,空白区的点击/触摸穿透到按钮,横向滑动仍可在卡片上拖动。 */
.hand { display:flex; justify-content:safe center; align-items:flex-end; padding:4px 4px 6px; padding-bottom:max(6px,env(safe-area-inset-bottom)); min-height:158px; position:relative; z-index:2;
  overflow-x:auto; overflow-y:hidden; padding-top:40px; margin-top:-40px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
  pointer-events:none; }
.hand .card { pointer-events:auto; }
.hand::-webkit-scrollbar { display:none; }
/* margin:0 -13px 的负边距是给「手牌扇形叠放」用的,但它挂在通用 .card 上,于是牌库/移除/图鉴等
   flex-wrap 网格里的牌也互相压着。更糟的是 .card:hover 会把 margin 从 -13px 改成 +6px——
   **改 margin 会触发重排**:手牌是单行只是被撑开,而在换行网格里整行宽度一变就会重新折行,
   鼠标扫过时牌被挤到别的行,表现为「移到不同牌上会上下跳来跳去」。
   这里把扇形叠放和 margin 型 hover 都收进 .hand 作用域,网格里的牌只用 transform(合成层,不触发布局)。 */
.card { width:96px; height:144px; margin:0; border-radius:10px; flex-shrink:0; position:relative; isolation:isolate;
  background:linear-gradient(180deg,#efe4c8,#d8c9a4); color:#2a2012; border:2px solid #b89a4a;
  box-shadow:0 6px 14px var(--shadow); cursor:pointer; transition:transform .12s, margin .12s;
  display:flex; flex-direction:column; padding:7px 7px 5px; transform-origin:bottom center; }
.card > * { position:relative; z-index:2; }
.hand .card { margin:0 -13px; }
.card:hover { transform:translateY(-22px) scale(1.06); z-index:10; }
.hand .card:hover { margin:0 6px; }
.card.unaffordable { filter:grayscale(.55) brightness(.82); }
.card.selected { transform:translateY(-22px) scale(1.08); box-shadow:0 0 0 3px var(--gold-bright),0 8px 20px #000; }
.card.dragging { opacity:.36; transform:translateY(-18px) scale(1.03); }
.drag-card-ghost { position:fixed; left:0; top:0; z-index:140; pointer-events:none; margin:0 !important;
  transform-origin:center center; opacity:.96; filter:drop-shadow(0 14px 22px rgba(0,0,0,.62)); }
.drag-aim { position:fixed; inset:0; z-index:139; width:100vw; height:100vh; pointer-events:none; overflow:visible; }
.drag-aim path { fill:none; stroke:rgba(240,207,110,.92); stroke-width:3; stroke-linecap:round; stroke-dasharray:8 8; filter:drop-shadow(0 0 7px rgba(232,85,74,.55)); animation:dragAimDash .55s linear infinite; }
@keyframes dragAimDash { to { stroke-dashoffset:-16; } }
.lowfx .drag-aim path { animation:none; }
.card .cc-cost { position:absolute; top:-8px; left:-8px; width:28px; height:28px; border-radius:50%;
  background:radial-gradient(circle,#3a2c5e,#1c1430); border:2px solid var(--gold-bright); color:var(--gold-bright);
  display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:bold; }
/* #541 长英文卡名最多 2 行(-webkit-line-clamp),避免 3-4 行换行把 cc-art 挤成一条缝 */
.card .cc-name { font-family:var(--brush); font-size:16px; text-align:center; border-bottom:1px solid rgba(0,0,0,.18); padding-bottom:3px;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; line-height:1.18; }
.card .cc-art { flex:1; display:flex; align-items:center; justify-content:center; font-size:34px; opacity:.85; }
.card .cc-text { font-size:10.5px; line-height:1.3; text-align:center; min-height:38px; }
.card .cc-type { position:absolute; bottom:3px; right:6px; font-size:9px; color:#7a6740; }
/* #41 卡牌类型图标(原创字符):攻⚔/技✦/武略❖/状态◈/诅咒☠,按类型配色 */
.cc-tico { margin-right:2px; font-size:9px; vertical-align:baseline; }
.bigcard .cc-tico { font-size:13px; margin-right:4px; }
.t-ico-attack { color:#c46a4a; }
.t-ico-skill  { color:#5a9a3a; }
.t-ico-power  { color:#8a5ec8; }
.t-ico-status, .t-ico-curse { color:#7a7060; }
.cc-tico-mini { position:absolute; top:4px; right:5px; font-size:11px; z-index:3; line-height:1;
  text-shadow:0 1px 2px rgba(0,0,0,.55),0 0 2px rgba(0,0,0,.5); }
.card.t-attack { background:linear-gradient(180deg,#f0ddc8,#e3c2a4); }
.card.t-skill  { background:linear-gradient(180deg,#e6ecdc,#c4d4b8); }
.card.t-power  { background:linear-gradient(180deg,#e7dcf0,#cdbede); }
.card.t-status,.card.t-curse { background:linear-gradient(180deg,#d8d2c8,#b8b0a4); color:#3a342c; }

/* 稀有度描边 + 光晕(主要用于奖励/牌库/商店的 miniCard) */
.card.rar-uncommon { border-color:#6fa8d6; box-shadow:0 0 11px rgba(111,168,214,.55),0 6px 14px var(--shadow); }
.card.rar-rare { border-color:#e8c45a; box-shadow:0 0 14px rgba(232,196,90,.65),0 6px 14px var(--shadow); }
/* #191 阵营牌边彩色镶边 */
.card.fac-wei { border-color:#8b0000; box-shadow:0 0 8px rgba(180,30,30,.5),0 6px 14px var(--shadow); }
.card.fac-shu { border-color:#1a6b1a; box-shadow:0 0 8px rgba(30,140,30,.5),0 6px 14px var(--shadow); }
.card.fac-wu  { border-color:#0a3580; box-shadow:0 0 8px rgba(20,80,180,.5),0 6px 14px var(--shadow); }
.card.fac-qun { border-color:#4a0a6b; box-shadow:0 0 8px rgba(100,20,160,.5),0 6px 14px var(--shadow); }
/* 升级牌名称左侧小星标 */
.card.upgraded .cc-name::before { content:'★ '; font-size:9px; color:#4caf50; }
/* 稀有度宝石角标 */
.cc-rgem { position:absolute; top:2px; right:3px; font-size:8px; font-weight:bold; letter-spacing:.5px;
  z-index:4; padding:1px 4px; border-radius:6px; color:#0e0a05; line-height:1.3; box-shadow:0 1px 2px rgba(0,0,0,.5); }
.card.rar-uncommon .cc-rgem { background:linear-gradient(180deg,#8fc0e6,#5b93c4); }
.card.rar-rare .cc-rgem { background:linear-gradient(180deg,#f3d574,#d4a934); }
.card.rar-special .cc-rgem { background:linear-gradient(180deg,#d59be8,#a05bc4); color:#fff; }

.btn.endturn { flex-shrink:0; padding:8px 12px; font-size:14px; line-height:1.15; background:linear-gradient(180deg,#5a2420,#3a1410);
  border-color:var(--red-bright); }

/* —— 浮层 —— */
.overlay { background:linear-gradient(rgba(10,7,4,.72),rgba(8,5,3,.84)), url('../assets/bg/bg_overlay.png') center/cover no-repeat;
  align-items:center; justify-content:center; padding:20px; z-index:50; overflow-y:auto; }
/* 手机修:86vh 用的是"大视口"(不含浏览器地址栏),真机上面板底部会伸出屏外且 flex 居中裁掉的部分够不到
   ——设置面板"不能上下滚、选项看不见"即此。改用 dvh(动态视口)封顶 + 面板内部滚动 + 触摸滚动限定在面板内。 */
.panel { position:relative; width:min(560px,94vw); max-height:min(86vh, calc(100dvh - 24px)); overflow-y:auto;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain; background:linear-gradient(180deg,#241a11,#15100a);
  border:1px solid rgba(201,162,39,.45); border-radius:14px; padding:22px; box-shadow:0 20px 60px #000; }
.panel h2 { font-family:var(--brush-deco); color:var(--gold-bright); text-align:center; font-size:24px; margin-bottom:6px; }
.panel.scene-shop, .panel.scene-camp { position:relative; isolation:isolate; overflow-y:auto; }
.panel.scene-shop > *, .panel.scene-camp > * { position:relative; z-index:1; }
.panel.scene-shop {
  border-color:rgba(240,207,110,.64);
  box-shadow:0 22px 68px #000, inset 0 0 42px rgba(203,86,38,.16);
}
.panel.scene-shop::before {
  content:''; position:absolute; z-index:0; pointer-events:none; left:8%; right:8%; top:18px; height:42px;
  background:
    radial-gradient(circle at 10% 60%, rgba(255,145,54,.55), transparent 18px),
    radial-gradient(circle at 90% 58%, rgba(255,145,54,.5), transparent 18px),
    linear-gradient(90deg, transparent, rgba(178,44,28,.56), rgba(110,20,16,.62), rgba(178,44,28,.56), transparent);
  filter:blur(.2px); opacity:.92; animation:shop-banner-sway 3.6s ease-in-out infinite;
}
.panel.scene-shop::after {
  content:'市'; position:absolute; z-index:0; pointer-events:none; right:20px; top:78px;
  width:36px; height:64px; display:grid; place-items:center; border:1px solid rgba(244,209,122,.55);
  background:linear-gradient(180deg,rgba(109,22,16,.86),rgba(59,12,9,.72));
  color:rgba(245,215,136,.55); font-family:var(--brush-deco); font-size:22px;
  box-shadow:0 0 18px rgba(255,116,42,.28); animation:shop-sign-sway 2.8s ease-in-out infinite;
}
.panel.scene-camp {
  border-color:rgba(255,155,72,.52);
  box-shadow:0 22px 68px #000, inset 0 0 54px rgba(255,103,28,.18);
}
.panel.scene-camp::before {
  content:''; position:absolute; z-index:0; pointer-events:none; inset:0;
  background:
    radial-gradient(circle at 38% 68%, rgba(255,185,72,.30) 0 3px, transparent 4px),
    radial-gradient(circle at 62% 55%, rgba(255,114,36,.24) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 72%, rgba(255,226,142,.22) 0 2px, transparent 3px),
    radial-gradient(ellipse at 50% 78%, rgba(255,112,28,.28), transparent 45%);
  animation:camp-embers-drift 2.4s ease-in-out infinite;
}
.panel.scene-camp::after {
  content:''; position:absolute; z-index:0; pointer-events:none; left:0; right:0; bottom:0; height:42%;
  background:radial-gradient(ellipse at 50% 100%, rgba(255,104,24,.26), transparent 68%);
  animation:camp-light-breathe 1.8s ease-in-out infinite;
}
@keyframes shop-banner-sway { 0%,100%{transform:translateY(0) skewX(-1deg)} 50%{transform:translateY(2px) skewX(1deg)} }
@keyframes shop-sign-sway { 0%,100%{transform:rotate(-2deg)} 50%{transform:rotate(2deg)} }
@keyframes camp-embers-drift { 0%,100%{opacity:.55; transform:translateY(0)} 50%{opacity:.9; transform:translateY(-8px)} }
@keyframes camp-light-breathe { 0%,100%{opacity:.56} 50%{opacity:.92} }
/* 营地/商店/事件等 overlay 屏盖住地图顶栏后,常驻显示当前 HP,免得玩家看不到血量做决策(如营火回血前) */
.overlay-hp-badge { position:absolute; top:calc(10px + env(safe-area-inset-top)); left:12px; z-index:5;
  padding:3px 10px; border-radius:12px;
  background:linear-gradient(180deg,#2a1f14,#14100a);
  border:1px solid rgba(201,162,39,.45); border-top-color:rgba(240,207,110,.35);
  color:var(--gold-bright); font-weight:600; font-size:13px; white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,236,180,.18),inset 0 -1px 2px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.4); }
.overlay-hp-badge::before { content:'♥ '; color:var(--red-bright); }
.overlay-hp-badge.danger { color:#ffb0a0; }

/* Boss 登场过场 */
.boss-intro { display:flex; flex-direction:column; align-items:center; text-align:center; padding:8px 10px;
  position:relative; --boss-tint:#e8554a; animation:biFade .5s ease; }
@keyframes biFade { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
/* #3 Boss登场:专属色调横扫光 */
.bi-sweep { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; border-radius:12px; }
.bi-sweep::before { content:''; position:absolute; top:0; bottom:0; left:-45%; width:45%; transform:skewX(-12deg);
  background:linear-gradient(100deg, transparent, color-mix(in srgb, var(--boss-tint) 50%, transparent), transparent);
  animation:bi-sweep-move 1.05s ease-out .12s 1 both; }
@keyframes bi-sweep-move { from{left:-45%} to{left:135%} }
.boss-intro > :not(.bi-sweep) { position:relative; z-index:1; }
.bi-title { font-size:14px; letter-spacing:6px; color:var(--gold-bright); opacity:.85; margin-bottom:10px;
  text-shadow:0 0 8px rgba(201,162,39,.5); }
/* #3 立绘从左滑入 + 落定回弹震一下,随后专属色脉冲辉光 */
.bi-portrait { width:188px; height:188px; border-radius:50%; overflow:hidden; flex-shrink:0;
  border:3px solid var(--boss-tint);
  animation:bi-portrait-in .62s cubic-bezier(.2,.8,.3,1.25) both, biGlowTint 2.2s ease-in-out .72s infinite; }
@keyframes bi-portrait-in { 0%{opacity:0; transform:translateX(-92px) rotate(-8deg) scale(.78)}
  58%{opacity:1; transform:translateX(10px) rotate(2.5deg) scale(1.05)} 76%{transform:translateX(-5px) rotate(-1.5deg)}
  90%{transform:translateX(2px)} 100%{transform:translateX(0) rotate(0) scale(1)} }
@keyframes biGlowTint { 0%,100% { box-shadow:0 0 24px color-mix(in srgb, var(--boss-tint) 52%, transparent),inset 0 0 30px rgba(0,0,0,.6); }
  50% { box-shadow:0 0 44px color-mix(in srgb, var(--boss-tint) 85%, transparent),inset 0 0 30px rgba(0,0,0,.6); } }
.lowfx .bi-portrait { animation:none; box-shadow:0 0 22px color-mix(in srgb, var(--boss-tint) 55%, transparent),inset 0 0 30px rgba(0,0,0,.6); }
/* #144 Boss战「BOSS」大字入场动画 */
.boss-flash-ov { position:fixed; inset:0; z-index:250; display:flex; align-items:center; justify-content:center; pointer-events:none; animation:boss-ov-fade .82s ease-out forwards; }
@keyframes boss-ov-fade { 0%{opacity:0;background:rgba(0,0,0,0)} 12%{opacity:1;background:rgba(0,0,0,.55)} 65%{opacity:1} 100%{opacity:0;background:rgba(0,0,0,0)} }
.boss-flash-txt { font-family:var(--brush-deco,'serif'); font-size:clamp(70px,18vw,140px); font-weight:900; letter-spacing:.25em; color:transparent; background:linear-gradient(135deg,#ff3000 0%,#f0cf6e 55%,#ff6600 100%); -webkit-background-clip:text; background-clip:text; animation:boss-txt-zoom .82s cubic-bezier(.2,0,.6,1) forwards; filter:drop-shadow(0 0 20px rgba(255,80,0,.7)); }
@keyframes boss-txt-zoom { 0%{opacity:0;transform:scale(1.8)} 15%{opacity:1;transform:scale(1)} 70%{opacity:1} 100%{opacity:0;transform:scale(.7)} }
.lowfx .boss-flash-ov { display:none; }
.lowfx .bi-sweep { display:none; }
/* #194/#A4 Boss绝境/二阶段高光弹字 */
.boss-phase-flash { position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; pointer-events:none;
  flex-direction:column; gap:10px; text-align:center;
  font-family:var(--brush-deco,'serif'); font-size:clamp(54px,14vw,110px); font-weight:900; letter-spacing:.3em;
  color:transparent; background:radial-gradient(circle at 50% 50%, rgba(120,0,0,.34), transparent 46%), linear-gradient(135deg,#900 0%,#ff5500 45%,#f0cf6e 80%);
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 0 18px rgba(200,30,0,.9));
  animation:bossPhaseFlash 1.4s ease-out forwards; }
.boss-phase-flash .bpf-title { line-height:.95; }
.boss-phase-flash .bpf-sub { font-family:var(--font-main,serif); font-size:clamp(15px,4vw,24px); letter-spacing:.08em; color:#f7dca0; background:none; -webkit-background-clip:initial; background-clip:initial; text-shadow:0 2px 6px #000,0 0 16px rgba(255,80,32,.9); max-width:min(82vw,680px); }
@keyframes bossPhaseFlash { 0%{opacity:0;transform:scale(1.6)} 10%{opacity:1;transform:scale(1)} 60%{opacity:1} 100%{opacity:0;transform:scale(.85)} }
.lowfx .boss-phase-flash { display:none; }
.bi-portrait img { width:100%; height:100%; object-fit:cover; }
.bi-name { font-family:var(--brush-deco); font-size:46px; color:#f5e2c0; margin:14px 0 6px;
  text-shadow:0 2px 4px #000,0 0 18px color-mix(in srgb, var(--boss-tint) 60%, transparent); letter-spacing:4px; }
.bi-taunt { font-size:15px; color:#d8c9a4; font-style:italic; line-height:1.6; max-width:420px; margin-bottom:22px; opacity:.92; }
.btn.bi-go { background:linear-gradient(180deg,#7a2420,#4a1410); border-color:var(--red-bright);
  font-size:18px; padding:10px 34px; letter-spacing:4px; }
.panel .hint { text-align:center; color:var(--paper-dim); font-size:13px; margin-bottom:16px; }
/* #541 padding-top 给突出牌顶 8px 的费用角标让位,别压到上方副标题;窄屏卡名略缩字号好塞进 2 行 */
.reward-cards { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:16px; padding-top:10px; }
.reward-cards .card .cc-name { font-size:clamp(12.5px,3.6vw,14px); }
.combat-coach, .reward-coach {
  position:absolute; z-index:86; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px 10px;
  border:1px solid rgba(240,207,110,.72); border-radius:8px; padding:9px 10px;
  background:linear-gradient(180deg,rgba(38,25,12,.94),rgba(16,10,6,.96)); color:#f7efd9;
  box-shadow:0 8px 24px rgba(0,0,0,.55),0 0 16px rgba(201,162,39,.22);
}
.combat-coach { left:10px; right:10px; top:74px; }
.reward-coach { left:12px; right:12px; bottom:14px; }
.combat-coach b, .reward-coach b { color:var(--gold-bright); white-space:nowrap; }
.combat-coach span, .reward-coach span { font-size:12px; line-height:1.35; color:var(--paper); }
.combat-coach .coach-skip, .reward-coach .coach-skip { grid-row:1 / 3; }
.combat-coach .coach-next, .reward-coach .coach-next { grid-column:3; grid-row:1 / 3; }
.combat-coach span, .reward-coach span { grid-column:2; }
.coach-skip { border:0; background:transparent; color:var(--paper-dim); padding:4px 2px; font:inherit; font-size:12px; }
.coach-skip:hover { color:#fff; }
.coach-focus { position:relative; z-index:84; outline:2px solid rgba(240,207,110,.94); outline-offset:3px; box-shadow:0 0 18px rgba(240,207,110,.58) !important; animation:coach-pulse 1.1s ease-in-out infinite alternate; }
@keyframes coach-pulse { from{filter:brightness(1)} to{filter:brightness(1.18)} }
.lowfx .coach-focus { animation:none; }
/* #16 升级差异高亮:锻造预览文案,变化数值标绿 */
.up-diff-text { max-width:320px; margin:0 auto 14px; text-align:center; font-size:13px; line-height:1.6; color:var(--ink-soft,#cbb994); }
.up-diff { color:#6fe08a; font-weight:bold; padding:0 2px; text-shadow:0 0 6px rgba(111,224,138,.5); }
/* 稀有掉落金光:战利屏的珍品脉冲发光(#87) */
.reward-cards .card.rar-rare { animation:rare-glow 1.5s ease-in-out infinite; }
.reward-cards .card.rar-uncommon { animation:uncommon-glow 1.8s ease-in-out infinite; }
@keyframes rare-glow {
  0%,100% { box-shadow:0 0 14px rgba(232,196,90,.6),0 6px 14px var(--shadow); }
  50% { box-shadow:0 0 26px rgba(243,213,116,.95),0 0 44px rgba(232,196,90,.5),0 6px 14px var(--shadow); }
}
@keyframes uncommon-glow {
  0%,100% { box-shadow:0 0 11px rgba(111,168,214,.5),0 6px 14px var(--shadow); }
  50% { box-shadow:0 0 20px rgba(143,192,230,.85),0 6px 14px var(--shadow); }
}
/* 战利屏稀有宝贝/药水的金光(精英/Boss 奖励) */
.reward-relic.r-rare, .reward-relic.r-boss { animation:rare-glow 1.5s ease-in-out infinite; }
/* #42 稀有牌动态光边框:在"翻看牌"语境(牌堆扇/牌库/图鉴)而非战斗手牌里给稀有金脉冲、罕见蓝脉冲,
   慢速(2.2s/2.6s)更柔和,不抢战斗注意力;战斗手牌仍只用静态金边(行 207),避免满屏脉冲噪声 */
.pile-fan .card.rar-rare, .pile-grid .card.rar-rare, .deck-grid .card.rar-rare, .codex-cards .card.rar-rare { animation:rare-glow 2.2s ease-in-out infinite; }
.pile-fan .card.rar-uncommon, .pile-grid .card.rar-uncommon, .deck-grid .card.rar-uncommon, .codex-cards .card.rar-uncommon { animation:uncommon-glow 2.6s ease-in-out infinite; }

/* —— 省电模式(特效:省电):关闭脉冲/发光/重投影,保留可读性(#89) —— */
.lowfx .reward-cards .card.rar-rare,
.lowfx .reward-cards .card.rar-uncommon,
.lowfx .reward-relic.r-rare, .lowfx .reward-relic.r-boss,
.lowfx .pile-fan .card.rar-rare, .lowfx .pile-fan .card.rar-uncommon,
.lowfx .pile-grid .card.rar-rare, .lowfx .pile-grid .card.rar-uncommon,
.lowfx .deck-grid .card.rar-rare, .lowfx .deck-grid .card.rar-uncommon,
.lowfx .codex-cards .card.rar-rare, .lowfx .codex-cards .card.rar-uncommon,
.lowfx .mnode.avail { animation:none !important; }
.lowfx .mnode.avail { box-shadow:0 0 8px rgba(240,207,110,.5); }
.lowfx .title { text-shadow:0 3px 8px #000; }
.lowfx .panel.scene-shop::before, .lowfx .panel.scene-shop::after, .lowfx .panel.scene-camp::before, .lowfx .panel.scene-camp::after { animation:none; }
.lowfx #boot-splash::before, .lowfx #boot-splash::after, .lowfx .boot-wash, .lowfx .boot-logo span, .lowfx .boot-seal, .lowfx .boot-rule { animation:none; opacity:1; filter:none; }
.lowfx .boot-wash { transform:translate(-50%,-50%) scaleX(1); }
.lowfx .boot-logo span { transform:none; }
.lowfx .boot-seal { transform:rotate(-8deg) scale(1); }
.lowfx .boot-rule { transform:translateX(-50%) scaleX(1); }
.lowfx .title-cloud, .lowfx .title-flag, .lowfx .title-flag::after, .lowfx .title-riders { animation:none !important; }
.lowfx .title-cloud { opacity:.24; transform:translateX(34vw); }
.lowfx .title-riders { transform:translateX(72vw); opacity:.28; }
.lowfx #bg { background:linear-gradient(180deg,#1a140e,#0e0b08); }
.lowfx .btn { transition:none; }
.lowfx .dmg-pop { animation-duration:.25s; }
.panel-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.deck-grid { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
/* #140 牌库类型过滤 tab */
.dv-filter-tabs { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin:6px 0 10px; }
.dv-tab { padding:4px 12px; border-radius:14px; border:1px solid rgba(201,162,39,.35); background:transparent; color:var(--paper-dim); font-size:12px; cursor:pointer; transition:background .15s, color .15s; }
.dv-tab:hover { background:rgba(201,162,39,.15); color:var(--gold-bright); }
.dv-tab.active { background:rgba(201,162,39,.25); color:var(--gold-bright); border-color:var(--gold-bright); }

/* ============ 美术资源整合 ============ */
/* 地图节点用 StS 图标 */
.mnode { background:none; border:none; width:52px; height:52px; }
/* 原创 SVG 节点图标:继承节点状态色,精英红调 */
.mnode-svg { width:80%; height:80%; display:block; color:var(--map-node,var(--gold-bright)); filter:drop-shadow(0 1px 2px #000); transition:transform .15s, filter .15s; }
.mnode.done .mnode-svg { color:rgba(180,140,60,.8); }
.mnode.cur .mnode-svg { color:var(--red-bright); filter:drop-shadow(0 0 7px var(--red-bright)); }
.mnode.avail .mnode-svg { filter:drop-shadow(0 0 6px var(--map-node,var(--gold-bright))); animation:nodePulse 1.5s ease-in-out infinite; }
.mnode.avail:hover .mnode-svg { transform:scale(1.14); }
.elite-node .mnode-svg, .boss-node .mnode-svg { color:var(--map-danger,#ff8466); }
.boss-node.avail .mnode-svg { filter:drop-shadow(0 0 9px var(--map-danger,#ff6a4a)); }
.mnode-img { width:100%; height:100%; object-fit:contain; transition:filter .15s, transform .15s; }
.mnode.avail .mnode-img { filter:drop-shadow(0 0 7px var(--gold-bright)) drop-shadow(0 0 3px var(--gold-bright)); }
.mnode.avail:hover .mnode-img { transform:scale(1.12); }
.mnode.done { opacity:.6; }
.mnode.cur .mnode-img { filter:drop-shadow(0 0 8px var(--red-bright)) drop-shadow(0 0 3px var(--red-bright)); }
/* 可选节点轻微脉动,提示下一步 */
.mnode.avail .mnode-img { animation:nodePulse 1.5s ease-in-out infinite; }
@keyframes nodePulse {
  0%,100% { filter:drop-shadow(0 0 6px var(--gold-bright)) drop-shadow(0 0 2px var(--gold-bright)); }
  50% { filter:drop-shadow(0 0 13px var(--gold-bright)) drop-shadow(0 0 5px var(--gold-bright)); transform:scale(1.06); }
}
.mnode.avail:hover .mnode-img { animation:none; transform:scale(1.12); }
.story-place { position:absolute; left:50%; top:32px; transform:translateX(-50%);
  width:max-content; max-width:86px; padding:1px 5px; border-radius:6px;
  background:rgba(24,16,10,.78); border:1px solid rgba(231,191,112,.36);
  color:var(--paper); font-size:9px; line-height:1.2; text-align:center; white-space:normal;
  box-shadow:0 1px 4px rgba(0,0,0,.35); pointer-events:none; z-index:2; }
.story-campaign-panel { background-image:url('../assets/bg/bg_overlay.png'); background-size:cover; background-position:center; }
.story-campaign-copy { max-width:520px; margin-left:auto; margin-right:auto; font-size:14px; line-height:1.72; }
/* 当前位置「你在此」标牌 */
.here-tag { position:absolute; left:50%; top:-16px; transform:translateX(-50%);
  background:var(--red-bright); color:#fff; font-size:10px; font-weight:bold; letter-spacing:1px;
  padding:2px 7px; border-radius:9px; white-space:nowrap; box-shadow:0 2px 6px rgba(0,0,0,.5);
  animation:hereBob 1.4s ease-in-out infinite; pointer-events:none; z-index:3; }
.here-tag::after { content:''; position:absolute; left:50%; bottom:-4px; transform:translateX(-50%);
  border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid var(--red-bright); }
/* 首领节点(地图顶端浮起)更醒目 */
.mnode.boss-node { width:64px; height:64px; }
.mnode.boss-node .mnode-img { filter:drop-shadow(0 0 16px var(--red-bright)) drop-shadow(0 0 6px var(--red-bright)); }
.mnode.boss-node .here-tag { background:var(--red-bright); animation:nodePulse 1.4s ease-in-out infinite; }
/* 未到 row14 时,Boss 节点灰显但仍可见(预告本幕目标) */
.mnode.boss-locked { opacity:.55; cursor:default; }
.mnode.boss-locked .mnode-img { filter:grayscale(.5) drop-shadow(0 0 6px rgba(232,85,74,.4)); animation:none; }
.mnode.boss-locked .here-tag { background:rgba(120,40,36,.85); animation:none; box-shadow:none; }
@keyframes hereBob { 0%,100% { top:-16px; } 50% { top:-20px; } }

/* 敌人立绘 */
.eportrait { padding:0; overflow:visible; }
.portrait-img { width:100%; height:100%; object-fit:cover; border-radius:9px; }
/* 意图图标 */
.intent { display:flex; align-items:center; gap:1px; }
.intent-ico { width:18px; height:18px; object-fit:contain; }
.intent-ico-svg { width:19px; height:19px; display:block; filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.7)); }
.intent-attack-tier-1 { color:#ffa58c; width:17px; height:17px; }
.intent-attack-tier-2 { color:#ff8f72; }
.intent-attack-tier-3 { color:#ff7a5a; width:20px; height:20px; }
.intent-attack-tier-4 { color:#ff694a; width:21px; height:21px; }
.intent-attack-tier-5 { color:#ff5638; width:22px; height:22px; }
.intent-attack-tier-6 { color:#ff3f2b; width:23px; height:23px; filter:drop-shadow(0 0 5px rgba(255,80,50,.75)); }
.intent-attack-tier-7 { color:#ff2a1d; width:25px; height:25px; filter:drop-shadow(0 0 7px rgba(255,42,29,.9)) drop-shadow(0 1px 2px #000); }
.intent span { font-size:13px; }

/* 卡面 art 图片 */
.cc-art { overflow:hidden; border-radius:4px; }
.cc-art-img { width:100%; height:100%; object-fit:cover; }

/* 卡牌放大预览 */
.card-zoom { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:rgba(8,5,2,.82); backdrop-filter:blur(3px); animation:zoomIn .14s ease; }
@keyframes zoomIn { from { opacity:0; } to { opacity:1; } }
.bigcard { width:264px; height:392px; border-radius:18px; position:relative; isolation:isolate;
  background:linear-gradient(180deg,#efe4c8,#d8c9a4); color:#2a2012; border:3px solid #b89a4a;
  box-shadow:0 0 0 4px rgba(212,175,90,.35),0 14px 40px #000;
  display:flex; flex-direction:column; padding:18px 16px 14px; }
.bigcard > * { position:relative; z-index:2; }
.bigcard .cc-cost { position:absolute; top:-14px; left:-14px; width:48px; height:48px; border-radius:50%;
  background:radial-gradient(circle,#3a2c5e,#1c1430); border:3px solid var(--gold-bright); color:var(--gold-bright);
  display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:bold; }
.bigcard .cc-name { font-family:var(--brush); font-size:30px; text-align:center; border-bottom:1px solid rgba(0,0,0,.18); padding-bottom:6px; }
.bigcard .cc-art { flex:1; overflow:hidden; border-radius:8px; margin:10px 0; }
.bigcard .cc-art img { width:100%; height:100%; object-fit:cover; }
.bigcard .cc-bigtext { font-size:16px; line-height:1.45; text-align:center; min-height:70px; padding:0 4px; }
.bigcard .cc-type { text-align:center; font-size:13px; color:#7a6740; letter-spacing:1px; }
.bigcard.upgraded .cc-name { color:#2e7d32; }

/* 能量球用 StS 图 */
.energy { background:none; border:none; }
.energy::before { content:''; position:absolute; inset:-4px; background-image:var(--energy-img, url('../assets/ui/energy_ironclad.png')); background-size:contain; background-repeat:no-repeat; background-position:center; z-index:-1; }
.energy { position:relative; }

/* 战斗背景 + 暗化遮罩 */
#s-battle { background-size:cover; background-position:center bottom; overflow:hidden; }
/* #526 暗化层用负 z-index 垫底:负值伪元素天然位于所有子元素之下、又在本元素背景图之上,
   子元素无需任何 position/z-index 帮衬。此前是 z-index:0 + 「#s-battle>* 强制 relative/z1」——
   那条 ID 特异性(1,0,0)规则会压过一切 class 级(0,1,0)的 position:absolute/fixed 声明:
   斩字(.slain-pop)/击杀白闪(.kill-flash)/地形横幅(.terrain-banner)/敌人开场横幅(.enemy-banner)/
   连击徽章/狂暴闪屏/预视浮层(.pile-fan-ov)全被打回 relative 挤进 flex 列——斩字出现的 0.7s 里
   整个手牌区被顶起 ~46px(即"出两张牌击杀后所有牌向上跳一下"),地形横幅整场占 35px 布局,
   白闪高度塌 0 从未真正闪过。battle-relics/potion-belt 早年就为此打过 #s-battle #id 补丁,
   这次连根拆掉该规则,后续往 #s-battle 里塞的浮层用普通 class 定位即可,不会再踩。 */
#s-battle::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,7,4,.55),rgba(10,7,4,.78)); z-index:-1; pointer-events:none; }
.battle-depth-bg { position:absolute; inset:0; z-index:-2; overflow:hidden; pointer-events:none; contain:layout paint; }
.bd-layer { position:absolute; background-image:var(--battle-bg); background-repeat:no-repeat; background-size:cover; pointer-events:none; will-change:transform; }
.bd-far { inset:-8%; background-position:center 18%; opacity:.78; filter:blur(2.6px) saturate(.82) brightness(.8); transform:scale(1.08); animation:bd-far-drift 18s ease-in-out infinite alternate; }
.bd-mid { inset:-4%; background-position:center bottom; opacity:.86; filter:saturate(1.04) contrast(1.02); transform:scale(1.035); animation:bd-mid-drift 14s ease-in-out infinite alternate; }
.bd-near { left:-10%; right:-10%; bottom:-4%; height:34%; opacity:.76; background-image:linear-gradient(180deg,transparent 0%,rgba(16,10,6,.3) 30%,rgba(5,4,3,.82) 100%),var(--battle-bg); background-size:100% 100%,118% auto; background-position:center bottom,center bottom; filter:contrast(1.08) saturate(1.08); transform:scale(1.02); animation:bd-near-drift 9s ease-in-out infinite alternate; }
.bd-weather, .bd-weather::before, .bd-weather::after { content:''; position:absolute; inset:-12%; pointer-events:none; }
.bd-weather { opacity:.72; mix-blend-mode:screen; }
.bd-weather::before, .bd-weather::after { background-repeat:repeat; will-change:transform; }
.battle-act-1 .bd-weather::before { background-image:radial-gradient(circle,rgba(218,184,112,.38) 0 1px,transparent 1.8px); background-size:42px 34px; animation:bd-sand-a 9s linear infinite; }
.battle-act-1 .bd-weather::after { background-image:radial-gradient(circle,rgba(170,116,54,.28) 0 1.2px,transparent 2px); background-size:68px 46px; animation:bd-sand-b 13s linear infinite; }
.battle-act-2 .bd-weather::before { background-image:radial-gradient(circle,rgba(255,169,72,.72) 0 1.2px,transparent 2.4px); background-size:56px 64px; animation:bd-ember-a 7s linear infinite; }
.battle-act-2 .bd-weather::after { background-image:radial-gradient(circle,rgba(255,73,36,.45) 0 1px,transparent 2px); background-size:92px 78px; animation:bd-ember-b 10s linear infinite; }
.battle-act-3 .bd-weather::before { background-image:radial-gradient(circle,rgba(230,245,255,.75) 0 1.4px,transparent 2.4px); background-size:48px 58px; animation:bd-snow-a 11s linear infinite; }
.battle-act-3 .bd-weather::after { background-image:radial-gradient(circle,rgba(190,220,235,.55) 0 1px,transparent 2px); background-size:74px 86px; animation:bd-snow-b 16s linear infinite; }
.battle-act-4 .bd-weather::before, .battle-act-5 .bd-weather::before { background-image:radial-gradient(circle,rgba(210,210,210,.3) 0 1px,transparent 2px); background-size:64px 52px; animation:bd-ash-a 12s linear infinite; }
.battle-act-4 .bd-weather::after, .battle-act-5 .bd-weather::after { background-image:radial-gradient(circle,rgba(255,115,54,.25) 0 1px,transparent 2px); background-size:88px 96px; animation:bd-ember-b 13s linear infinite; }
@keyframes bd-far-drift { from{ transform:scale(1.08) translate3d(-1.2%,0,0); } to{ transform:scale(1.1) translate3d(1.2%,.7%,0); } }
@keyframes bd-mid-drift { from{ transform:scale(1.035) translate3d(.8%,0,0); } to{ transform:scale(1.055) translate3d(-.8%,.5%,0); } }
@keyframes bd-near-drift { from{ transform:scale(1.02) translate3d(-1.6%,0,0); } to{ transform:scale(1.05) translate3d(1.6%,0,0); } }
@keyframes bd-sand-a { to{ transform:translate3d(84px,28px,0); } }
@keyframes bd-sand-b { to{ transform:translate3d(-68px,46px,0); } }
@keyframes bd-ember-a { to{ transform:translate3d(28px,-96px,0); } }
@keyframes bd-ember-b { to{ transform:translate3d(-36px,-130px,0); } }
@keyframes bd-snow-a { to{ transform:translate3d(42px,98px,0); } }
@keyframes bd-snow-b { to{ transform:translate3d(-52px,138px,0); } }
@keyframes bd-ash-a { to{ transform:translate3d(40px,80px,0); } }
.lowfx .battle-depth-bg { display:none; }

/* 标题 / 地图 三国背景 */
#s-title { background:linear-gradient(180deg,rgba(10,7,4,.32),rgba(10,7,4,.84)), url('../assets/bg/bg_title.png') center/cover no-repeat; }
body.seasonal-spring #s-title { background:
  radial-gradient(circle at 50% 24%, rgba(231,191,112,.18), transparent 28%),
  linear-gradient(180deg,rgba(52,14,12,.26),rgba(10,7,4,.84)),
  url('../assets/bg/bg_title.png') center/cover no-repeat; }
body.seasonal-mid #s-title { background:
  radial-gradient(circle at 50% 18%, rgba(236,226,186,.22), transparent 22%),
  linear-gradient(180deg,rgba(22,30,44,.24),rgba(10,7,4,.84)),
  url('../assets/bg/bg_title.png') center/cover no-repeat; }
#s-map { background-size:cover; background-position:center; }
#s-map::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg,var(--map-shade-a,rgba(10,7,4,.5)),var(--map-shade-b,rgba(10,7,4,.72))); z-index:0; pointer-events:none; }
#s-map .topbar { background:linear-gradient(180deg,var(--map-topbar,rgba(0,0,0,.5)),transparent); border-bottom:1px solid color-mix(in srgb,var(--map-node,#c9a227) 28%,transparent); }
#s-map .act-name { color:var(--map-label,var(--gold-bright)); text-shadow:0 2px 6px #000,0 0 12px color-mix(in srgb,var(--map-label,var(--gold-bright)) 42%,transparent); }
#s-map .stats .stat { border-color:color-mix(in srgb,var(--map-node,#c9a227) 42%,transparent); color:var(--map-label,var(--gold-bright)); }
#s-map .topbar, #s-map .map-wrap { position:relative; z-index:1; }
/* 浮层面板背景图 */
.panel.art { background-blend-mode:normal; background-size:cover; background-position:center; }

/* 我方主角立绘 —— #519 手机默认:居中的肖像;桌面(≥760)在下方 media query 里改到左侧、更大。
   #530 金框换成与敌人同款的古风描金雕花框(border-image),不再是纯色双线金边。
   定位/bottom 由 _syncHeroStagePos 动态设在 #hero-stage-wrap 上(随 control-bar+hand 高度让位);
   居中用 left:50% + margin-left 负值(不占 transform,给 FLIP 动画让路)。z-index:2 压过战报浮条。
   全局 box-sizing:border-box,width:132 已含 12px 边框,故居中 margin-left = -132/2 = -66。 */
/* #531 金框放在内层 <img#hero-stage> 上(不是外层 wrap):这样受击/突进的 transform 动画作用在 img 上时,
   金框跟着立绘一起动。外层 wrap 只管定位 + FLIP 让位(transform),两层各写各的 transform 互不打架。 */
#hero-stage-wrap { position:absolute; left:50%; margin-left:-66px; bottom:176px; width:132px; height:156px;
  z-index:2; pointer-events:none; overflow:visible; }
/* #533 slice 84(非 118):图已从 864px 压到 600px,slice 要按压缩后的实际边框像素量算,
   否则会把镂空的一圈也切进边框,画出来框比立绘大一圈 */
#hero-stage { display:block; width:100%; height:100%; object-fit:cover; object-position:center top; position:relative; z-index:2;
  /* #539 英雄框收薄到 12px(≤Boss 的 12px),净立绘随之变大;border-image-width=1 跟随 border-width */
  border:12px solid transparent; border-image:url('../assets/ui/frame_ornate.png?v=688') 84 fill / 1 / 0 stretch;
  filter:drop-shadow(0 9px 20px rgba(0,0,0,.7)); }
.hero-mech-fx { position:absolute; inset:-38px -50px -34px; z-index:1; pointer-events:none; --mech:#f0cf6e; --mech2:#e8554a; }
.hero-mech-fx::before { content:''; position:absolute; left:50%; bottom:20px; width:132px; height:34px; border-radius:50%;
  transform:translateX(-50%); opacity:.42; background:radial-gradient(ellipse at center,color-mix(in srgb,var(--mech) 54%,transparent),transparent 70%);
  filter:blur(2px); animation:mech-aura-pulse 1.8s ease-in-out infinite; }
.hero-mech-fx.mech-shou { --mech:#7fc7ff; --mech2:#426f9c; }
.hero-mech-fx.mech-gong { --mech:#e8554a; --mech2:#ff9a3a; }
.hero-mech-fx.mech-quanli { --mech:#f0cf6e; --mech2:#f8fff0; }
.mech-stance-core { position:absolute; left:50%; bottom:18px; min-width:30px; height:20px; padding:1px 7px; border-radius:999px;
  transform:translateX(-50%); display:flex; align-items:center; justify-content:center; font-size:10px; font-family:var(--brush);
  color:#fff7d5; border:1px solid color-mix(in srgb,var(--mech) 70%,#fff 18%); background:rgba(12,8,5,.62);
  box-shadow:0 0 13px color-mix(in srgb,var(--mech) 70%,transparent), inset 0 0 10px color-mix(in srgb,var(--mech) 24%,transparent);
  animation:mech-core-breathe 1.6s ease-in-out infinite; }
.mech-orb-ring { position:absolute; inset:0; animation:mech-orbit 8s linear infinite; }
.mech-orb { position:absolute; left:var(--x); top:var(--y); width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  transform:translate(-50%,-50%); font-size:11px; font-family:var(--brush); color:#fff; border:1px solid rgba(255,255,255,.55);
  box-shadow:0 0 10px rgba(255,255,255,.28),0 2px 8px rgba(0,0,0,.72); animation:mech-orb-counter 8s linear infinite, mech-orb-glow 1.7s ease-in-out infinite; }
.mech-orb.o-metal { background:radial-gradient(circle at 35% 30%,#fff0b8,#9a7d2a); color:#2c2208; text-shadow:none; }
.mech-orb.o-wood  { background:radial-gradient(circle at 35% 30%,#91e88e,#2e6b34); }
.mech-orb.o-water { background:radial-gradient(circle at 35% 30%,#8cd2ff,#235a8a); }
.mech-orb.o-fire  { background:radial-gradient(circle at 35% 30%,#ffae5e,#a83020); }
.mech-orb.o-earth { background:radial-gradient(circle at 35% 30%,#e1bf88,#7a5a30); }
.mech-osty-ghost { position:absolute; right:-8px; bottom:18px; width:58px; height:76px; border-radius:32px 32px 18px 18px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; opacity:.62;
  color:#e8d7ff; border:1px solid rgba(204,170,255,.38); background:radial-gradient(ellipse at 50% 34%,rgba(162,111,230,.42),rgba(62,40,92,.22) 58%,transparent 74%);
  filter:drop-shadow(0 0 12px rgba(170,110,255,.38)); animation:mech-osty-breathe 2.2s ease-in-out infinite; }
.mech-osty-ghost span { font-size:26px; line-height:1; text-shadow:0 0 10px rgba(210,180,255,.82),0 2px 4px #000; }
.mech-osty-ghost b { font-size:9px; font-family:var(--brush); font-weight:600; color:#f1e8ff; text-shadow:0 1px 3px #000; }
@keyframes mech-aura-pulse { 0%,100%{opacity:.28; transform:translateX(-50%) scale(.88)} 50%{opacity:.58; transform:translateX(-50%) scale(1.08)} }
@keyframes mech-core-breathe { 0%,100%{transform:translateX(-50%) scale(.96)} 50%{transform:translateX(-50%) scale(1.08)} }
@keyframes mech-orbit { to{transform:rotate(360deg)} }
@keyframes mech-orb-counter { to{transform:translate(-50%,-50%) rotate(-360deg)} }
@keyframes mech-orb-glow { 0%,100%{filter:brightness(.95)} 50%{filter:brightness(1.35)} }
@keyframes mech-osty-breathe { 0%,100%{transform:translateY(0) scale(.98)} 50%{transform:translateY(-5px) scale(1.03)} }
.lowfx .hero-mech-fx::before, .lowfx .mech-stance-core, .lowfx .mech-orb-ring, .lowfx .mech-orb, .lowfx .mech-osty-ghost { animation:none !important; }
/* bottom 由 _syncHeroStagePos() 每次渲染动态算(连携/格挡徽标忽隐忽现会让 control-bar 高度跳变);
   直接过渡 bottom 这种布局属性在部分渲染环境下会卡在过渡中途不收敛,改成 JS 端用 transform 做 FLIP 位移动画 */
.lowfx #hero-stage { transition:none !important; }

/* ============ 动效 ============ */
/* 受击晃动:加大幅度 + 轻微旋转/缩放,更有"晃一晃"的肉感 */
@keyframes hit-shake { 0%,100%{transform:translateX(0) rotate(0) scale(1)} 12%{transform:translateX(-12px) rotate(-3.5deg) scale(1.04)} 30%{transform:translateX(11px) rotate(3deg) scale(.97)} 50%{transform:translateX(-8px) rotate(-2deg)} 70%{transform:translateX(6px) rotate(1.2deg)} 86%{transform:translateX(-3px)} }
.efighter.hit { animation:hit-shake .42s cubic-bezier(.36,.07,.19,.97); }
.efighter.hit .portrait-img { animation:flash-red .42s; }
.lowfx .efighter.hit { animation-duration:.24s; }
/* #10 敌人受击三档震幅:轻(<10)/中(10-29,中幅+红闪)/重(≥30,大幅+强红闪) */
@keyframes hit-shake-light { 0%,100%{transform:translateX(0)} 30%{transform:translateX(-4px)} 70%{transform:translateX(4px)} }
@keyframes hit-shake-heavy { 0%,100%{transform:translateX(0) rotate(0) scale(1)} 10%{transform:translateX(-15px) rotate(-4.5deg) scale(1.06)} 27%{transform:translateX(14px) rotate(3.8deg) scale(.95)} 46%{transform:translateX(-11px) rotate(-2.4deg)} 66%{transform:translateX(8px) rotate(1.6deg)} 84%{transform:translateX(-4px)} }
@keyframes flash-red-hard { 0%,100%{filter:none} 30%{filter:brightness(2.1) saturate(2.8) drop-shadow(0 0 13px #ff2a1e)} }
.efighter.hit-light { animation:hit-shake-light .2s ease; }
.efighter.hit-mid { animation:hit-shake .42s cubic-bezier(.36,.07,.19,.97); }
.efighter.hit-mid .portrait-img { animation:flash-red .42s; }
.efighter.hit-heavy { animation:hit-shake-heavy .5s cubic-bezier(.36,.07,.19,.97); }
.efighter.hit-heavy .portrait-img { animation:flash-red-hard .5s; }
.lowfx .efighter.hit-light, .lowfx .efighter.hit-mid, .lowfx .efighter.hit-heavy { animation-duration:.2s; }
.efighter.boss.phase2 .eportrait { position:relative; box-shadow:0 0 0 2px #ffcf62,0 0 30px rgba(255,67,32,.72),inset 0 0 22px rgba(120,0,0,.35); animation:bossPhasePulse 1.8s ease-in-out infinite; }
.efighter.boss.phase2 .portrait-img { filter:saturate(1.35) contrast(1.08) drop-shadow(0 0 10px rgba(255,72,36,.55)); }
.efighter.boss.phase2 .eportrait::after { content:''; position:absolute; inset:-8px; border-radius:12px; pointer-events:none; background:radial-gradient(circle at 50% 18%, rgba(255,210,95,.5), transparent 26%), radial-gradient(circle at 50% 50%, transparent 50%, rgba(160,0,0,.38) 78%, transparent 80%); mix-blend-mode:screen; animation:bossPhaseAura 1.6s ease-in-out infinite; }
.phase-badge { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:18px; margin-left:6px; padding:0 5px; border-radius:999px; color:#2a0904; background:linear-gradient(135deg,#ffd66c,#ff6b3c); font-size:11px; line-height:1; box-shadow:0 0 10px rgba(255,95,45,.75); vertical-align:middle; }
@keyframes bossPhasePulse { 0%,100%{transform:scale(1); filter:none} 50%{transform:scale(1.035); filter:brightness(1.15)} }
@keyframes bossPhaseAura { 0%,100%{opacity:.45; transform:scale(.98)} 50%{opacity:.9; transform:scale(1.04)} }
.lowfx .efighter.boss.phase2 .eportrait, .lowfx .efighter.boss.phase2 .eportrait::after { animation:none; }
/* 屏幕震动:重击整屏抖动,带微缩放避免露出黑边 */
#app.shake { animation:scr-shake .28s ease-in-out; }
#app.shake-strong { animation:scr-shake-strong .44s cubic-bezier(.36,.07,.19,.97); }
@keyframes scr-shake { 0%,100%{transform:scale(1.018) translate(0,0)} 25%{transform:scale(1.018) translate(-6px,4px)} 55%{transform:scale(1.018) translate(5px,-4px)} 80%{transform:scale(1.018) translate(-3px,2px)} }
@keyframes scr-shake-strong { 0%,100%{transform:scale(1.03) translate(0,0)} 12%{transform:scale(1.03) translate(-13px,7px) rotate(-.6deg)} 28%{transform:scale(1.03) translate(12px,-8px) rotate(.6deg)} 46%{transform:scale(1.03) translate(-9px,5px)} 64%{transform:scale(1.03) translate(7px,-4px)} 82%{transform:scale(1.03) translate(-3px,2px)} }
.lowfx #app.shake, .lowfx #app.shake-strong { animation:none; }
/* #A6 打击帧:命中瞬间短暂停住当前动画;由 JS 用 setTimeout 移除,不会参与布局 */
#app.hit-stop, #app.hit-stop * { animation-play-state:paused !important; }
/* #A6 挥击拖影:固定定位刀光,按受击目标中心生成;不抢点击、不改排版 */
.hit-trail { position:fixed; left:0; top:0; width:var(--w,112px); height:36px; z-index:96; pointer-events:none;
  transform-origin:center; opacity:0; transform:translate(-50%,-50%) rotate(var(--rot,-16deg)) scaleX(var(--sx,1)) scale(.72);
  animation:hit-trail-swipe .28s cubic-bezier(.12,.8,.25,1) forwards; filter:drop-shadow(0 0 8px rgba(255,255,255,.75)); }
.hit-trail::before { content:''; position:absolute; left:4%; right:2%; top:50%; height:7px; border-radius:999px;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.1) 8%,#fff 34%,#ffd275 58%,rgba(255,83,34,.72) 86%,transparent 100%);
  box-shadow:0 0 12px rgba(255,220,150,.75),0 0 22px rgba(255,80,36,.45); transform:translateY(-50%) skewX(-18deg); }
.hit-trail::after { content:''; position:absolute; left:18%; right:20%; top:50%; height:20px; border-radius:999px;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.32),transparent 65%); transform:translateY(-50%); }
.hit-trail.mid { height:42px; filter:drop-shadow(0 0 10px rgba(255,210,117,.95)); }
.hit-trail.heavy { height:50px; filter:drop-shadow(0 0 13px rgba(255,210,117,1)) drop-shadow(0 0 18px rgba(255,80,36,.7)); }
.hit-trail.heavy::before { height:10px; box-shadow:0 0 16px rgba(255,224,160,.95),0 0 30px rgba(255,80,36,.75); }
.hit-trail.taken::before { background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.08) 8%,#fff 32%,#ff6960 62%,rgba(210,26,26,.75) 88%,transparent 100%); }
@keyframes hit-trail-swipe {
  0% { opacity:0; transform:translate(-50%,-50%) rotate(var(--rot,-16deg)) scaleX(var(--sx,1)) scale(.45); }
  24% { opacity:1; transform:translate(-50%,-50%) rotate(var(--rot,-16deg)) scaleX(var(--sx,1)) scale(1.12); }
  100% { opacity:0; transform:translate(-50%,-50%) rotate(var(--rot,-16deg)) scaleX(var(--sx,1)) scale(1.36); }
}
.lowfx #app.hit-stop, .lowfx #app.hit-stop * { animation-play-state:running !important; }
.lowfx .hit-trail { display:none; }
.fastplay .hit-trail { animation-duration:.16s; }
@keyframes flash-red { 0%,100%{filter:none} 35%{filter:brightness(1.7) saturate(2.2) drop-shadow(0 0 8px #ff3b2f)} }
#hero-stage.hit { animation:hit-shake .34s; }
.dmg-pop { position:absolute; top:-6px; left:50%; font-family:var(--brush); font-size:30px; font-weight:bold;
  color:#ff8a3a; text-shadow:0 2px 5px #000,0 0 10px #000; pointer-events:none; z-index:30; white-space:nowrap;
  isolation:isolate; --pop-rot:-3deg; --pop-sx:1; animation:dmg-float .82s ease-out forwards; }
.dmg-pop::before { content:''; position:absolute; left:50%; top:54%; width:58px; height:38px; border-radius:50%;
  transform:translate(-50%,-50%) rotate(var(--pop-rot)); opacity:0; z-index:-1; pointer-events:none; }
/* #2 受到伤害(自己挨打)血红警示色 + 红色辉光,与对敌输出的橙金区分 */
.dmg-pop.taken { color:#ff2e2e !important; text-shadow:0 0 10px rgba(255,20,20,.9),0 0 20px rgba(255,0,0,.45),0 2px 4px #000 !important; }
/* #2 持续伤害(dot)按类型上色:中毒紫/灼烧橙红/流血暗红 */
.dmg-pop.dot-poison { color:#c87dff !important; text-shadow:0 0 9px rgba(160,80,255,.85),0 0 18px rgba(120,40,200,.5),0 2px 4px #000 !important; }
/* #185 张角瘟疫: 毒雾粒子特效 — 敌人周围漂浮紫色粒子 */
@keyframes poison-particle { 0%{opacity:0;transform:translate(0,0) scale(.6)} 25%{opacity:.85} 80%{opacity:.4} 100%{opacity:0;transform:translate(var(--px),var(--py)) scale(.2)} }
.poison-fog::before,.poison-fog::after { content:''; position:absolute; border-radius:50%; pointer-events:none; z-index:25; background:rgba(160,60,220,.55); filter:blur(4px); animation:poison-particle .9s ease-out forwards; }
.poison-fog::before { width:22px; height:22px; top:30%; left:20%; --px:-18px; --py:-28px; }
.poison-fog::after  { width:16px; height:16px; top:50%; left:65%; --px:14px; --py:-22px; animation-delay:.12s; }
.dmg-pop.dot-burn { color:#ff7a26 !important; text-shadow:0 0 9px rgba(255,120,30,.85),0 2px 4px #000 !important; }
.dmg-pop.dot-bleed { color:#e8554a !important; text-shadow:0 0 8px rgba(180,30,30,.8),0 2px 4px #000 !important; }
@keyframes dmg-float { 0%{opacity:0; transform:translate(-50%,12px) scale(.5)} 22%{opacity:1; transform:translate(-50%,-8px) scale(1.2)} 100%{opacity:0; transform:translate(-50%,-52px) scale(1)} }
/* A14 伤害数字艺术化:复用 7 档凶险度,小伤墨点轻弹 / 中伤笔锋上扬 / 重伤朱砂砸落。 */
.dmg-pop.ink { font-size:24px; color:#f3dfbb; text-shadow:0 1px 4px #000,0 0 8px rgba(20,14,8,.85);
  animation:dmg-ink-pop .74s cubic-bezier(.2,.9,.25,1) forwards; }
.dmg-pop.ink::before { opacity:.66; background:radial-gradient(ellipse at center,rgba(10,8,6,.92) 0%,rgba(38,28,18,.62) 42%,transparent 72%);
  animation:dmg-ink-blot .74s ease-out forwards; }
.dmg-pop.tier-1 { font-size:21px; --pop-rot:-9deg; }
.dmg-pop.tier-2 { font-size:25px; --pop-rot:7deg; }
.dmg-pop.tier-3 { font-size:30px; --pop-rot:-4deg; }
.dmg-pop.stroke { color:#ff8b37; text-shadow:0 2px 5px #000,0 0 13px rgba(255,98,38,.55);
  animation:dmg-brush-rise .9s cubic-bezier(.16,.84,.28,1) forwards; }
.dmg-pop.stroke::before { width:74px; height:14px; border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(255,210,95,.2),rgba(238,68,38,.56),transparent);
  filter:blur(.5px); animation:dmg-brush-streak .9s ease-out forwards; }
.dmg-pop.mid { font-size:40px; }
.dmg-pop.tier-5 { font-size:46px; color:#ffb04a; }
.dmg-pop.seal { font-size:54px; color:#ffe1a0; -webkit-text-stroke:1px rgba(114,18,12,.55);
  text-shadow:0 3px 7px #000,0 0 18px #b91e16,0 0 30px rgba(255,62,30,.72);
  animation:dmg-seal-drop 1.04s cubic-bezier(.18,.76,.2,1) forwards; }
.dmg-pop.seal::before { width:86px; height:62px; border-radius:44% 52% 46% 58%;
  background:radial-gradient(ellipse at center,rgba(196,24,18,.76) 0%,rgba(126,16,14,.52) 46%,transparent 74%);
  box-shadow:0 0 18px rgba(255,36,20,.46); animation:dmg-seal-splash 1.04s ease-out forwards; }
.dmg-pop.tier-7 { font-size:66px; --pop-rot:5deg; }
.dmg-pop.tick { animation:dmg-tick-pop .78s ease-out forwards; }
@keyframes dmg-ink-pop { 0%{opacity:0; transform:translate(-50%,8px) scale(.42) rotate(var(--pop-rot))} 30%{opacity:1; transform:translate(-50%,-7px) scale(1.18) rotate(calc(var(--pop-rot) * -.35))} 100%{opacity:0; transform:translate(-50%,-39px) scale(.96) rotate(0deg)} }
@keyframes dmg-ink-blot { 0%{opacity:0; transform:translate(-50%,-50%) rotate(var(--pop-rot)) scale(.24)} 24%{opacity:.68; transform:translate(-50%,-50%) rotate(var(--pop-rot)) scale(1)} 100%{opacity:0; transform:translate(-50%,-50%) rotate(var(--pop-rot)) scale(1.28)} }
@keyframes dmg-brush-rise { 0%{opacity:0; transform:translate(-50%,14px) scale(.48) skewX(-8deg)} 18%{opacity:1; transform:translate(-50%,-8px) scale(1.34) skewX(-4deg)} 38%{transform:translate(-50%,-10px) scale(1.12) skewX(2deg)} 100%{opacity:0; transform:translate(-50%,-58px) scale(1.02) skewX(0)} }
@keyframes dmg-brush-streak { 0%{opacity:0; transform:translate(-58%,-50%) scaleX(.18) rotate(var(--pop-rot))} 22%{opacity:.9; transform:translate(-50%,-50%) scaleX(1.04) rotate(var(--pop-rot))} 100%{opacity:0; transform:translate(-42%,-50%) scaleX(1.42) rotate(var(--pop-rot))} }
@keyframes dmg-seal-drop { 0%{opacity:0; transform:translate(-50%,-44px) scale(1.75) rotate(-9deg)} 20%{opacity:1; transform:translate(-50%,2px) scale(.86) rotate(3deg)} 32%{transform:translate(-50%,-10px) scale(1.22) rotate(-2deg)} 58%{opacity:1; transform:translate(-50%,-12px) scale(1.08) rotate(1deg)} 100%{opacity:0; transform:translate(-50%,-70px) scale(1.18) rotate(0)} }
@keyframes dmg-seal-splash { 0%{opacity:0; transform:translate(-50%,-50%) scale(.18) rotate(var(--pop-rot))} 20%{opacity:.78; transform:translate(-50%,-50%) scale(1.05) rotate(var(--pop-rot))} 100%{opacity:0; transform:translate(-50%,-50%) scale(1.42) rotate(var(--pop-rot))} }
@keyframes dmg-tick-pop { 0%{opacity:0; transform:translate(-50%,9px) scale(.56)} 28%{opacity:1; transform:translate(-50%,-9px) scale(1.12)} 100%{opacity:0; transform:translate(-50%,-45px) scale(.94)} }
.lowfx .dmg-pop.ink, .lowfx .dmg-pop.stroke, .lowfx .dmg-pop.seal, .lowfx .dmg-pop.tick { animation:dmg-float .5s ease-out forwards; }
.lowfx .dmg-pop::before { display:none; }
.lowfx .dmg-pop.seal { font-size:44px; text-shadow:0 2px 5px #000; }
/* #83 出牌反馈:格挡/治疗/buff/能量 正向浮字(浮在玩家身上,与伤害字区分配色) */
.gain-pop { position:absolute; top:-4px; left:50%; font-family:var(--brush); font-size:22px; font-weight:bold;
  text-shadow:0 2px 4px #000,0 0 8px #000; pointer-events:none; z-index:29; white-space:nowrap;
  animation:gain-float .95s ease-out forwards; }
.gain-pop.fx-block { color:#7fc7ff; }
.gain-pop.fx-heal { color:#6fe08a; }
.gain-pop.fx-buff { color:#ffb45a; }
.gain-pop.fx-energy { color:#f0cf6e; }
.gain-pop.fx-str-burst { font-size:36px; color:#ff6020; text-shadow:0 0 12px rgba(255,100,20,.9),0 0 24px rgba(255,160,0,.6); animation-duration:.9s; }
@keyframes gain-float { 0%{opacity:0; transform:translate(-50%,8px) scale(.6)} 25%{opacity:1; transform:translate(-50%,-10px) scale(1.15)} 100%{opacity:0; transform:translate(-50%,-46px) scale(1)} }
.lowfx .gain-pop { animation-duration:.4s; }
/* #498 卡牌打出数值 pop — float-up 供 showPop 辅助函数使用 */
@keyframes float-up {
  0% { opacity:1; transform:translateY(0); }
  100% { opacity:0; transform:translateY(-40px); }
}
.block-pop { color:var(--gold-bright); font-size:18px; }
#hero-stage.lunge { animation:hero-lunge .36s ease-out; }
@keyframes hero-lunge { 0%,100%{transform:translateX(0) scale(1)} 42%{transform:translateX(46px) scale(1.05)} }
/* 敌人出手:攻击型向下扑(冲向玩家),其它招式轻弹 */
.efighter.elunge { animation:enemy-lunge .42s cubic-bezier(.3,.7,.5,1); z-index:6; }
@keyframes enemy-lunge { 0%,100%{transform:translateY(0) scale(1)} 38%{transform:translateY(40px) scale(1.08)} }
.efighter.eact { animation:enemy-act .4s ease-out; }
/* 标题记录墙 */
.title-record { display:flex; justify-content:center; gap:14px; padding:8px 0;
  font-size:12px; color:var(--gold); opacity:.85; }
.title-record b { color:var(--gold-bright); font-size:14px; margin-left:4px; }
.seasonal-badge { align-self:center; padding:3px 12px; border-radius:7px;
  border:1px solid rgba(231,191,112,.48); background:rgba(18,12,8,.58);
  color:var(--gold-bright); font-size:12px; letter-spacing:.12em; text-shadow:0 1px 4px #000; }
body.seasonal-spring .seasonal-badge { color:#ffd8a0; border-color:rgba(239,92,66,.5); box-shadow:0 0 12px rgba(214,55,42,.18); }
body.seasonal-mid .seasonal-badge { color:#eef0c7; border-color:rgba(222,214,162,.52); box-shadow:0 0 14px rgba(208,214,182,.16); }

.hero-card.locked { opacity:.4; cursor:not-allowed; filter:grayscale(.7); }
.hero-card.locked .hd { color:#c8857a; font-size:11px; }

/* 多敌战:当前出手敌人金色光环高亮 */
.efighter.acting .eportrait { box-shadow:0 0 0 3px var(--gold-bright),0 0 22px rgba(232,196,90,.85); border-radius:50%; }
.efighter.acting .ename { color:var(--gold-bright); text-shadow:0 0 8px rgba(232,196,90,.6); }
@keyframes enemy-act { 0%,100%{transform:translateY(0)} 40%{transform:translateY(-10px) scale(1.04)} }
.intent { animation:intent-pop .25s ease-out; }
@keyframes intent-pop { 0%{transform:translate(-50%,-3px) scale(.7); opacity:.4} 100%{transform:translate(-50%,0) scale(1); opacity:1} }

/* 敌人阵亡过场:闪白→灰化下坠旋转淡出 */
.efighter.dying { animation:enemy-die .72s cubic-bezier(.4,0,.7,1) forwards; transform-origin:center bottom; }
@keyframes enemy-die {
  0% { opacity:1; transform:translateY(0) scale(1) rotate(0); filter:none; }
  14% { filter:brightness(2.4) saturate(.3); transform:translateY(-4px) scale(1.04); }
  100% { opacity:0; transform:translateY(46px) scale(.7) rotate(-13deg); filter:grayscale(1) brightness(.5); }
}
/* #82 死亡演出差异化:精英橙焰、Boss 更重倒地 + 爆炸碎裂粒子 */
.efighter.dying.die-elite { animation:enemy-die .82s cubic-bezier(.4,0,.7,1) forwards; }
.efighter.dying.die-boss { animation:enemy-die-boss 1s cubic-bezier(.3,0,.55,1) forwards; }
@keyframes enemy-die-boss {
  0% { opacity:1; transform:translateY(0) scale(1) rotate(0); filter:none; }
  22% { filter:brightness(2.6) saturate(1.4); transform:translateY(-7px) scale(1.08) rotate(-2deg); }
  100% { opacity:0; transform:translateY(64px) scale(.66) rotate(11deg); filter:grayscale(.8) brightness(.45); }
}
.death-fx i { position:absolute; left:0; top:0; width:9px; height:9px; margin:-4.5px; border-radius:50%;
  transform:rotate(var(--ang)) translateX(0); animation:death-fly .85s ease-out forwards; }
@keyframes death-fly { 0%{opacity:0; transform:rotate(var(--ang)) translateX(4px) scale(.5)} 16%{opacity:1} 100%{opacity:0; transform:rotate(var(--ang)) translateX(72px) scale(1.1)} }
.death-fx.fx-elite i { background:radial-gradient(circle at 38% 32%, #ffd9a0, #ff7a3a 60%, #c0381a); box-shadow:0 0 9px rgba(255,106,42,.85); }
.death-fx.fx-boss i { width:11px; height:11px; background:radial-gradient(circle at 38% 32%, #fff0c0, #ff9a3a 55%, #b02818); box-shadow:0 0 13px rgba(255,90,32,.9); }
.lowfx .death-fx { display:none; }

/* 悬停说明浮窗 */
.hovertip { position:fixed; z-index:300; max-width:230px; pointer-events:none;
  background:linear-gradient(180deg,#2a1f12,#160f08); border:1px solid var(--gold-bright); border-radius:9px;
  padding:8px 11px; box-shadow:0 8px 24px rgba(0,0,0,.7); animation:tipIn .12s ease; }
@keyframes tipIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
.hovertip .ht-title { font-family:var(--brush); color:var(--gold-bright); font-size:16px; margin-bottom:3px; }
.hovertip .ht-body { font-size:12px; line-height:1.5; color:#e7dcc4; }
.hovertip .ci-tip { display:inline-block; margin-top:5px; color:var(--gold-bright,#f0cf6e); font-size:11.5px; line-height:1.5; } /* #81 精英克制要点 */
/* #135 升级对比 tooltip */
.ut-row { display:flex; gap:4px; align-items:baseline; font-size:11.5px; margin-top:4px; }
.ut-label { color:#a89070; font-size:11px; }
.ut-old { color:#a89070; text-decoration:line-through; }
.ut-new { color:#7de87d; font-weight:600; }
.ut-text { flex-direction:column; }
.ut-text .ut-new { color:#7de87d; font-weight:normal; font-size:11.5px; }

/* 轻量提示条(复制种子等) */
.toast { position:fixed; left:50%; bottom:42px; transform:translate(-50%,16px); z-index:320;
  background:linear-gradient(180deg,#2a1f12,#160f08); border:1px solid var(--gold-bright); border-radius:20px;
  padding:9px 20px; font-size:14px; color:var(--gold-bright); box-shadow:0 8px 24px rgba(0,0,0,.7);
  opacity:0; transition:opacity .28s, transform .28s; pointer-events:none; max-width:88vw; }
.toast.show { opacity:1; transform:translate(-50%,0); }

/* 右上角浮动按钮(静音 + 设置) */
.top-btns { position:fixed; top:8px; right:8px; z-index:120; display:flex; gap:6px; }
.mute-btn { width:34px; height:34px; border-radius:50%;
  background:linear-gradient(180deg,#34281a,#1a120a); border:1px solid rgba(201,162,39,.5);
  border-top-color:rgba(240,207,110,.5); color:#fff; font-size:16px;
  cursor:pointer; padding:0; line-height:34px; text-align:center; transition:.13s ease;
  box-shadow:
    inset 0 1px 0 rgba(255,236,180,.3),
    inset 0 -2px 3px rgba(0,0,0,.5),
    0 3px 6px rgba(0,0,0,.55); }
.mute-btn:hover { background:linear-gradient(180deg,#43331f,#241810); border-color:var(--gold-bright);
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,240,190,.4),0 6px 12px rgba(0,0,0,.55),0 0 10px rgba(201,162,39,.35); }
.mute-btn:active { transform:translateY(1px);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.6); }
/* 语言切换按钮:文字稍小以容纳 EN */
.lang-btn { font-family:var(--brush); font-size:13px; font-weight:700; letter-spacing:.5px; color:var(--gold-bright); }
/* 34px 圆钮里放 "Deck" 四个字母(13px+字距≈35px)会顶到圆边;中文「牌」是单字所以只有英文暴露。
   单独收字号/字距,让它在圆内留出呼吸位。 */
#btn-deck-top { font-size:11px; letter-spacing:0; }

/* 设置面板 */
.set-row { display:flex; align-items:center; gap:12px; margin:14px 4px; }
.set-label { font-family:var(--brush); font-size:18px; color:var(--gold-bright); width:64px; flex-shrink:0; }
.set-slider { flex:1; accent-color:var(--gold-bright); height:6px; cursor:pointer; }
.set-val { width:48px; text-align:right; color:#e7dcc4; font-size:14px; }
.set-btns { display:flex; gap:8px; }
.set-btns .btn.active { background:linear-gradient(180deg,#5a4418,#3a2c10); border-color:var(--gold-bright); color:var(--gold-bright); }
.set-divider { height:1px; background:rgba(201,162,39,.25); margin:16px 0 14px; }
.set-credit { font-size:10.5px; color:var(--paper-dim); opacity:.72; line-height:1.4; margin:10px 2px 0; text-align:center; }
.set-actions { display:flex; flex-direction:column; gap:10px; align-items:stretch; }
.set-actions .btn.danger { border-color:var(--red-bright); color:#e8857a; }
.set-actions .btn.danger.confirm { background:linear-gradient(180deg,#7a2420,#4a1410); color:#fff; }

/* 字体大小:大(lg)/小(sm) 调整主要可读文字;中(md)=默认不动 */
html.fs-lg .card .cc-text { font-size:12.5px; }
html.fs-lg .card .cc-name { font-size:18px; }
html.fs-lg .hint { font-size:16.5px; }
html.fs-lg .ename { font-size:17px; }
html.fs-lg #combat-log > div { font-size:14px; }
html.fs-lg .hovertip .ht-body { font-size:14px; }
html.fs-lg .cc-bigtext { font-size:18px; }
html.fs-lg .shop-good .good-name, html.fs-lg .merchant-say .m-line { font-size:18px; }
html.fs-sm .card .cc-text { font-size:9px; }
html.fs-sm .card .cc-name { font-size:14px; }
html.fs-sm .hint { font-size:12.5px; }
html.fs-sm .ename { font-size:13px; }
html.fs-sm #combat-log > div { font-size:11px; }

/* 宝贝行(地图) */
.relic-row { position:relative; z-index:1; display:flex; gap:6px; flex-wrap:wrap; padding:2px 14px 6px; }
.relic-wrap { position:relative; display:inline-flex; flex-shrink:0; }
.relic-trig-badge { position:absolute; bottom:-3px; right:-3px; background:#9a5e10; color:#ffe9a0; font-size:9px; font-weight:bold; line-height:1; padding:1px 3px; border-radius:3px; min-width:12px; text-align:center; z-index:3; pointer-events:none; box-shadow:0 1px 3px #000; }
/* 宝贝图标本身(A11 风格)就是一张「暖纸圆角卡片 + 器物」,外面再套一个圆圈 = 圆里套方角卡再套器物,
   三层嵌套且圆圈会把卡片四角裁掉。这里去掉圆圈和深色底:chip 直接就是那张卡片,
   稀有度只用同形状的圆角描边表达(信息不丢,但只剩一层框)。 */
.relic-chip { width:32px; height:32px; border-radius:7px;
  background:none;
  border:2px solid var(--gold-bright); display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 5px #000; cursor:default; overflow:hidden; flex-shrink:0; }
.relic-img { width:100%; height:100%; object-fit:cover; box-sizing:border-box;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.relic-letter { font-family:var(--brush); font-size:16px; font-weight:bold; color:var(--gold-bright); }
/* 稀有度描边配色 */
.relic-chip.r-common { border-color:#c9a227; }
.relic-chip.r-uncommon { border-color:#6fa8d6; box-shadow:0 0 6px rgba(111,168,214,.5),0 2px 5px #000; }
.relic-chip.r-rare { border-color:#e8c45a; box-shadow:0 0 7px rgba(232,196,90,.6),0 2px 5px #000; }
.relic-chip.r-boss { border-color:#d4503e; box-shadow:0 0 8px rgba(212,80,62,.6),0 2px 5px #000; }
.relic-chip.r-shop { border-color:#5fb98a; }
.relic-chip.r-event, .relic-chip.r-starter { border-color:#b89a4a; }
/* 战斗内宝贝条:左上角小图标(#s-battle>* 强制 relative/z1,需 ID 覆盖) */
#s-battle #battle-relics { position:absolute; top:6px; left:8px; z-index:5; padding:0; gap:4px; max-width:62%; }
#battle-relics .relic-chip { width:26px; height:26px; border-width:1px; }

/* 司马懿姿态标签 */
.stance-tag { font-size:11px; padding:1px 6px; border-radius:5px; border:1px solid; }
.stance-tag.s-shou { color:#7fb0d8; border-color:#7fb0d8; }
.stance-tag.s-gong { color:#e8554a; border-color:#e8554a; }
.stance-tag.s-quanli { color:#f0cf6e; border-color:#f0cf6e; background:rgba(240,207,110,.15); }

/* 集市 */
/* #447 初出茅庐折扣横幅 */
.shop-discount-banner { text-align:center; font-size:11px; color:var(--gold-bright); padding:4px 0 8px; letter-spacing:0.05em; }
.shop-filter-bar { display:flex; gap:6px; justify-content:center; margin-bottom:8px; flex-wrap:wrap; }
.shop-filter-btn { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:var(--text-dim); font-family:var(--brush); font-size:12px; padding:3px 10px; border-radius:12px; cursor:pointer; transition:.15s; }
.shop-filter-btn:hover { background:rgba(255,255,255,.15); color:var(--text); }
.shop-filter-btn.active { background:var(--gold); color:#1a0a00; border-color:var(--gold-bright); font-weight:bold; }
.shop-cards { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:12px; }
.shop-item { display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; transition:.12s; }
.shop-item:hover:not(.cant):not(.sold) { transform:translateY(-4px); }
/* 已售:卡牌彻底暗化 + 灰度 */
.shop-item.sold { opacity:.35; filter:grayscale(.85); cursor:default; }
/* 买不起:只是价格变红,卡面仍清晰,玩家一眼能区分"卖完了 vs 钱不够" */
.shop-item.cant { cursor:default; opacity:.82; }
.shop-item .price { font-family:var(--brush); color:var(--gold-bright); font-size:13px; }
.shop-item.cant .price { color:var(--red-bright); }
.shop-item.cant .price::before { content:'金不足 · '; opacity:.85; }
html[lang^="en"] .shop-item.cant .price::before { content:'Low gold · '; } /* B33 英文裸漏:CSS伪元素DOM翻译器够不着 */
/* 每店一张卡 5 折特惠:红色角标 + 原价划线 + 折后橙价 */
.shop-item.on-sale { position:relative; }
.shop-item .sale-tag { position:absolute; top:-7px; right:-9px; z-index:3; background:linear-gradient(180deg,#e8554a,#b5342b); color:#fff;
  font-family:var(--brush); font-size:11px; letter-spacing:1px; padding:2px 8px; border-radius:9px; transform:rotate(8deg); box-shadow:0 2px 6px rgba(0,0,0,.45); }
.shop-item .price.sale .price-was { color:var(--paper-dim); opacity:.65; font-size:11px; margin-right:3px; }
.shop-item .price.sale b { color:#ff8f43; }
.shop-item.on-sale:not(.sold) .card { box-shadow:0 0 12px rgba(232,85,74,.5),0 6px 14px var(--shadow); }
.shop-exotics { padding-top:2px; }
.shop-item.exotic .card { box-shadow:0 0 10px rgba(74,143,109,.38),0 6px 14px var(--shadow); }
/* #164 磨损折扣角标 */
.wear-disc { font-size:10px; color:#8fbe88; letter-spacing:.05em; text-align:center; margin-top:2px; opacity:.85; }
.shop-svc { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:12px; }
/* #180 当铺 pawn shop */
.pawn-sec { color: var(--accent-light) !important; }
.pawn-shelf { min-height:30px; }
.pawn-item { cursor:pointer; border:1px solid var(--accent-light); opacity:.9; }
.pawn-item:hover { opacity:1; border-color:var(--gold-bright); }
.pawn-item.sold { opacity:.4; cursor:default; }
.price.pawn-sell { color:#88d488; font-size:11px; }
.pawn-buy-row { display:flex; justify-content:center; margin:4px 0 8px; }
.pawn-empty { color:var(--text-dim); font-size:13px; padding:6px 12px; }

/* 通关/战败 战绩 */
/* #87 战后本局时间线:访问过的节点类型序列 */
.run-timeline { margin:6px auto 14px; max-width:470px; text-align:center; }
.rt-title { font-size:12px; letter-spacing:3px; color:var(--gold-bright); opacity:.82; margin-bottom:7px; }
.rt-track { display:flex; flex-wrap:wrap; gap:3px 4px; justify-content:center; align-items:center; }
.rt-node { width:19px; height:19px; display:flex; align-items:center; justify-content:center; opacity:.9; }
.rt-svg { width:100%; height:100%; }
.rt-node.t-M, .rt-node.t-T { color:var(--gold-bright,#f0cf6e); }
.rt-node.t-E { color:#ff8466; }
.rt-node.t-shop { color:#5fb98a; }
.rt-node.t-R { color:#f0cf6e; }
.rt-node.t-event { color:#cdb869; }
.rt-node.t-B { color:#ff6a4a; }
.rt-sep { color:var(--paper-dim); font-size:13px; margin:0 1px; opacity:.6; }
/* #58 本局奇遇列表 */
.run-events { margin:4px auto 14px; max-width:470px; text-align:center; }
.rev-list { display:flex; flex-wrap:wrap; gap:5px 6px; justify-content:center; }
.rev-item { font-size:11.5px; color:#e7dcc4; padding:2px 8px; border-radius:9px; background:rgba(201,162,39,.12); border:1px solid rgba(201,162,39,.25); }
/* #92 本局最佳一回合回放 */
.best-turn { margin:4px auto 14px; max-width:470px; text-align:center; }
.best-turn .bt-seq { display:flex; flex-wrap:wrap; gap:3px 4px; justify-content:center; align-items:center; }
.best-turn .bt-card { font-size:11.5px; color:#1a140e; padding:2px 9px; border-radius:9px; background:linear-gradient(180deg,#e8c45a,#c79a2e); border:1px solid #f0cf6e; font-family:var(--brush); }
.best-turn .bt-arrow { color:var(--gold-bright,#f0cf6e); opacity:.7; font-size:12px; }
/* #94 每日挑战本机榜 */
.dboard-wrap { max-width:300px; margin:10px auto 4px; padding:8px 12px; border-radius:10px; background:rgba(201,162,39,.08); border:1px solid rgba(201,162,39,.22); }
.dboard-title { font-size:12px; letter-spacing:2px; color:var(--gold-bright,#f0cf6e); text-align:center; margin-bottom:5px; }
.dboard-row { display:flex; align-items:center; gap:8px; font-size:12.5px; padding:2px 0; border-bottom:1px solid rgba(201,162,39,.12); }
.dboard-row:last-child { border-bottom:none; }
.dboard-rank { width:18px; text-align:center; color:var(--gold-bright,#f0cf6e); font-weight:bold; }
.dboard-date { flex:1; color:var(--paper-dim,#b8a98a); }
.dboard-score { color:#e7dcc4; font-weight:bold; }
.run-stats-box { display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; max-width:340px; margin:6px auto 16px; }
.run-stats-box > div { display:flex; justify-content:space-between; border-bottom:1px solid rgba(201,162,39,.2); padding:4px 2px; }
.run-stats-box span { color:var(--paper-dim); font-size:13px; }
.run-stats-box b { color:var(--gold-bright); font-size:14px; font-family:var(--brush); }

/* #195 本局数据折叠区 */
.run-detail-box { margin:4px auto 12px; max-width:400px; }
.rd-toggle { cursor:pointer; font-size:13px; color:var(--gold-bright); text-align:center; padding:4px 0; letter-spacing:.06em; }
.rd-toggle:hover { opacity:.85; }
.rd-body { padding:6px 8px; background:rgba(201,162,39,.06); border:1px solid rgba(201,162,39,.18); border-radius:7px; margin-top:4px; }
.rd-body.hidden { display:none; }
.rd-row { display:flex; justify-content:space-between; border-bottom:1px solid rgba(201,162,39,.12); padding:3px 2px; }
.rd-row span { color:var(--paper-dim); font-size:12.5px; }
.rd-row b { color:var(--gold-bright); font-size:13px; font-family:var(--brush); }
.rd-card-title { font-size:11.5px; color:var(--paper-dim); margin-top:7px; margin-bottom:2px; letter-spacing:.05em; opacity:.8; }

/* #138 战斗高光数据卡 */
.elite-defeat-badge { text-align:center; color:var(--gold-bright); font-size:13px; letter-spacing:.08em; margin:6px 0 2px; padding:4px 10px; background:rgba(201,162,39,.12); border:1px solid rgba(201,162,39,.35); border-radius:6px; font-family:var(--brush); }
.battle-highlights { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin:10px 0 2px; padding:8px 12px; background:rgba(201,162,39,.07); border:1px solid rgba(201,162,39,.2); border-radius:8px; }
.bh-item { display:flex; flex-direction:column; align-items:center; gap:2px; }
.bh-label { font-size:11px; color:var(--paper-dim); }
.bh-item b { color:var(--gold-bright); font-size:16px; font-family:var(--brush); }
.battle-report-actions { margin:8px 0 2px; }
.battle-report-panel { width:min(620px,94vw); }
.battle-report-summary { margin-top:6px; }
.battle-death-note { margin:8px auto; max-width:460px; text-align:center; color:#ffb6a8; font-size:12.5px; padding:6px 10px; border:1px solid rgba(232,85,74,.38); background:rgba(90,20,12,.22); border-radius:7px; }
.battle-turn-report { max-width:520px; margin:10px auto 12px; display:flex; flex-direction:column; gap:7px; }
.btr-row { padding:7px 8px; border:1px solid rgba(201,162,39,.18); background:rgba(201,162,39,.055); border-radius:7px; }
.btr-row.key-turn { border-color:rgba(240,207,110,.6); box-shadow:0 0 0 1px rgba(240,207,110,.12), inset 0 0 18px rgba(201,162,39,.08); }
.btr-head { display:flex; align-items:center; gap:8px; min-width:0; }
.btr-head b { flex:none; color:var(--gold-bright); font-family:var(--brush); font-size:13px; }
.btr-head span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--paper); font-size:12px; }
.btr-bars { position:relative; height:16px; margin:5px 0 3px; background:rgba(0,0,0,.3); border-radius:4px; overflow:hidden; border:1px solid rgba(201,162,39,.12); }
.btr-bars i { position:absolute; left:0; height:4px; min-width:1px; border-radius:3px; }
.btr-dealt { top:1px; background:#d6a63a; }
.btr-taken { top:6px; background:#d95a48; }
.btr-block { top:11px; background:#69a7c8; }
.btr-n { display:flex; justify-content:space-between; gap:8px; color:var(--paper-dim); font-size:11px; }
.battle-log-full { max-width:520px; margin:8px auto 12px; color:var(--paper-dim); font-size:12px; }
.battle-log-full summary { cursor:pointer; color:var(--gold-bright); text-align:center; padding:5px 0; }
.br-log { max-height:220px; overflow-y:auto; padding:8px 10px; border:1px solid rgba(201,162,39,.18); border-radius:7px; background:rgba(0,0,0,.18); line-height:1.55; }
.br-log .hot { color:var(--gold-bright); }

/* 强化预览 */
.up-arrow { align-self:center; font-size:30px; color:var(--gold-bright); text-shadow:0 0 8px rgba(240,207,110,.5); }
/* #139 营地升级悬停对比浮层 */
.card-cmp-tip { position:fixed; z-index:310; display:none; flex-direction:row; align-items:center; gap:8px;
  background:rgba(16,11,7,.92); border:1px solid rgba(201,162,39,.4); border-radius:10px; padding:10px 12px;
  pointer-events:none; box-shadow:0 8px 24px rgba(0,0,0,.7); }
.cmp-arrow { font-size:24px; color:var(--gold-bright); align-self:center; }
/* #157 护法投喂目标选择弹窗 */
.potion-target-pop { position:fixed; z-index:350; background:rgba(16,11,7,.95); border:1px solid rgba(201,162,39,.5); border-radius:10px; padding:10px 14px; display:flex; flex-direction:column; gap:8px; box-shadow:0 8px 24px rgba(0,0,0,.8); min-width:130px; }
.potion-target-pop .ptp-title { font-size:12px; color:var(--gold-dim); text-align:center; letter-spacing:.04em; }
.potion-target-pop .btn { font-size:13px; padding:6px 12px; }
.card.upgraded .cc-name { color:#2e7d32; }
.card.upgraded { box-shadow:0 6px 14px var(--shadow), inset 0 0 0 1px rgba(46,125,50,.5); }

/* 玩法说明 */
.tut-body { text-align:left; font-size:13.5px; line-height:1.7; color:var(--paper); padding:0 4px; }
.tut-body p { margin-bottom:9px; }
.tut-body b { color:var(--gold-bright); }

/* 张角黄天护法 Osty */
.osty-bar { margin-top:3px; font-size:12px; color:#c9b3e0; background:rgba(60,40,80,.55); border:1px solid #8a6aa8;
  border-radius:6px; padding:1px 8px; display:inline-block; box-shadow:0 1px 4px #000; }
/* #54 友军(亲兵/伏兵/器械) */
.ally-bar { margin-top:3px; margin-left:4px; font-size:12px; color:#d8c79a; background:rgba(80,64,30,.55); border:1px solid #b89a4a;
  border-radius:6px; padding:1px 8px; display:inline-block; box-shadow:0 1px 4px #000; }
/* 连携徽章:连打同类牌时跳出,数字越高越亮 */
.combo-badge { margin-top:3px; font-size:13px; font-weight:700; letter-spacing:.06em; color:#1a120a;
  background:linear-gradient(180deg,#f0cf6e,#c9a227); border:1px solid #f4e2a0; border-radius:11px;
  padding:1px 10px; display:inline-block; box-shadow:0 0 10px rgba(240,207,110,.6),0 1px 4px #000;
  text-shadow:0 1px 0 rgba(255,255,255,.3); animation:comboPop .22s ease; }
@keyframes comboPop { 0%{transform:scale(1.5);} 60%{transform:scale(.92);} 100%{transform:scale(1);} }

/* 关羽「义」出牌积累进度条 */
.yi-bar { position:relative; margin-top:4px; height:14px; background:rgba(60,30,10,.5); border:1px solid #a0500a; border-radius:7px; overflow:hidden; width:100%; max-width:120px; }
.yi-fill { position:absolute; top:0; left:0; height:100%; background:linear-gradient(90deg,#c04000,#ff8c00); border-radius:7px; transition:width .25s; }
.yi-label { position:relative; font-size:10px; font-weight:700; color:#fff; text-shadow:0 0 3px #000; padding:0 5px; line-height:14px; white-space:nowrap; }
.yi-bar.yi-ready { border-color:#ffd060; box-shadow:0 0 8px rgba(255,180,0,.7); animation:yiFlash .6s infinite alternate; }
@keyframes yiFlash { 0%{box-shadow:0 0 4px rgba(255,140,0,.6);} 100%{box-shadow:0 0 14px rgba(255,220,0,1);} }

/* 诸葛亮五行术球 */
.orb-row { display:flex; gap:3px; margin-top:3px; flex-wrap:wrap; }
.orb { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-family:var(--brush); color:#fff; border:1px solid rgba(255,255,255,.45); text-shadow:0 1px 2px #000; box-shadow:0 1px 4px #000; }
.orb.o-metal { background:radial-gradient(circle at 35% 30%,#f0e0a0,#9a7d2a); color:#3a2e0a; text-shadow:none; }
.orb.o-wood  { background:radial-gradient(circle at 35% 30%,#7fcf83,#2e6b34); }
.orb.o-water { background:radial-gradient(circle at 35% 30%,#6ab4f0,#235a8a); }
.orb.o-fire  { background:radial-gradient(circle at 35% 30%,#f08a5a,#a83020); }
.orb.o-earth { background:radial-gradient(circle at 35% 30%,#d0b080,#7a5a30); }

/* 进阶选择 */
.asc-row { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin:4px 0 12px; border-radius:10px; }
.asc-lab { font-family:var(--brush); color:var(--gold-bright); font-size:17px; min-width:74px; text-align:center; }
.asc-desc { width:100%; text-align:center; font-size:12px; color:var(--paper-dim); }
.asc-desc .ad-head { color:var(--gold-bright); font-size:12.5px; margin-bottom:2px; }
.asc-desc .ad-sub { color:var(--paper-dim); opacity:.8; font-size:11px; margin-bottom:3px; }
.asc-desc .ad-list { list-style:none; margin:0 auto; padding:0; max-width:320px; max-height:132px; overflow-y:auto; text-align:left; }
.asc-desc .ad-list li { font-size:11px; color:var(--paper-dim); padding:2px 8px; border-left:2px solid rgba(201,162,39,.25); margin:2px 0; line-height:1.35; }
.asc-desc .ad-list li.ad-cur { color:var(--gold-bright); border-left-color:var(--gold-bright); background:rgba(201,162,39,.10); }
/* #17 进阶±:数字跳动 + 升档整行金边一闪 */
.asc-lab.asc-bump { display:inline-block; animation:asc-bump .42s cubic-bezier(.2,.9,.3,1.5); }
@keyframes asc-bump { 0%{transform:scale(1)} 38%{transform:scale(1.42); text-shadow:0 0 14px rgba(240,207,110,.9)} 100%{transform:scale(1)} }
.asc-row.asc-flash { animation:asc-flash .5s ease-out; }
@keyframes asc-flash { 0%{box-shadow:0 0 0 0 rgba(240,207,110,0)} 30%{box-shadow:0 0 0 2px var(--gold-bright),0 0 20px rgba(240,207,110,.55)} 100%{box-shadow:0 0 0 0 rgba(240,207,110,0)} }
.lowfx .asc-lab.asc-bump, .lowfx .asc-row.asc-flash { animation:none; }

/* 沙盒/测试模式 */
.sandbox-row { display:flex; align-items:center; gap:10px; margin:6px 0; flex-wrap:wrap; }
.sb-label { font-family:var(--brush); color:var(--gold-bright); font-size:16px; min-width:60px; }
.sb-btns { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.sb-btns .btn.active { background:linear-gradient(180deg,#c9a227,#7a5a14); color:#000; border-color:#ffd860; box-shadow:0 0 8px rgba(201,162,39,.6); }
.sb-asc { font-family:var(--brush); color:var(--gold-bright); font-size:17px; min-width:48px; text-align:center; }
.sandbox-body { display:flex; flex-direction:column; gap:10px; max-height:55vh; overflow-y:auto; margin-top:8px; padding-right:4px; }
.sandbox-sec { background:rgba(0,0,0,.25); border:1px solid rgba(201,162,39,.25); border-radius:8px; padding:8px 10px; }
.sb-sec-title { font-family:var(--brush); color:var(--gold-bright); font-size:15px; margin-bottom:6px; border-bottom:1px solid rgba(201,162,39,.2); padding-bottom:4px; }
.sandbox-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:6px; }
.sb-enemy { font-size:12px !important; padding:6px 8px !important; white-space:normal !important; line-height:1.35; min-height:34px; }
.draft-hero-row { justify-content:center; }
.draft-seed-row { margin-top:8px; }
.draft-counter { text-align:center; font-family:var(--brush); color:var(--gold-bright); font-size:22px; margin:2px 0 10px; }
.draft-cards { margin-top:8px; }
.class-challenge-panel { max-width:min(760px, calc(100vw - 22px)); }
.cc-summary { text-align:center; color:var(--gold-bright); font-family:var(--brush); font-size:22px; margin:-4px 0 8px; }
.cc-seed-row { margin:4px auto 10px; }
.cc-groups { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px; max-height:min(58vh, 520px); overflow:auto; padding:2px 4px 8px; }
.cc-group h3 { margin:4px 0 6px; font-size:15px; color:var(--gold-bright); text-align:center; }
.cc-list { display:flex; flex-direction:column; gap:7px; }
.cc-item { position:relative; display:flex; flex-direction:column; gap:3px; min-height:92px; padding:10px 10px 9px; border:1px solid rgba(201,162,39,.32); border-radius:8px; background:rgba(20,14,9,.74); color:var(--paper); text-align:left; cursor:pointer; }
.cc-item b { color:var(--gold-bright); font-size:15px; line-height:1.15; }
.cc-item small { color:var(--paper-dim); font-size:12px; line-height:1.25; }
.cc-item em { color:#8fbe88; font-size:11px; font-style:normal; line-height:1.2; }
.cc-state { align-self:flex-start; padding:1px 6px; border-radius:999px; border:1px solid rgba(201,162,39,.32); color:var(--paper-dim); font-size:10px; line-height:1.35; }
.cc-item.cleared { border-color:rgba(143,190,136,.62); background:linear-gradient(180deg, rgba(31,51,30,.68), rgba(20,14,9,.82)); }
.cc-item.cleared .cc-state { color:#bff0b7; border-color:rgba(143,190,136,.65); }
.class-challenge-result { max-width:min(520px, calc(100vw - 22px)); text-align:center; }
.cc-result-head { color:var(--gold-bright); margin:-2px 0 8px; }
.cc-reward-banner, .cc-fail-banner { margin:8px auto 12px; padding:10px 12px; border-radius:8px; border:1px solid rgba(143,190,136,.5); background:rgba(28,52,31,.45); color:#d9ffd4; }
.cc-fail-banner { border-color:rgba(232,85,74,.5); background:rgba(74,24,18,.42); color:#ffc7bd; }
.cc-result-stats { max-width:360px; }
.cc-progress { display:flex; flex-direction:column; gap:10px; }
.cc-progress-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:8px; }
.cc-progress-item { min-height:84px; padding:9px 10px; border:1px solid rgba(201,162,39,.28); border-radius:8px; background:rgba(0,0,0,.24); display:flex; flex-direction:column; gap:3px; }
.cc-progress-item span { color:var(--paper-dim); font-size:11px; }
.cc-progress-item b { color:var(--paper); font-size:14px; line-height:1.2; }
.cc-progress-item small { color:var(--paper-dim); font-size:11px; line-height:1.2; }
.cc-progress-item em { margin-top:auto; color:#b99745; font-style:normal; font-size:11px; }
.cc-progress-item.cleared { border-color:rgba(143,190,136,.55); }
.cc-progress-item.cleared em { color:#9fdd96; }
.cc-cosmetic-count { text-align:center; color:var(--paper-dim); font-size:12px; }
/* 沙盒地图悬浮条:跳大关 */
#sandbox-bar { position:fixed; bottom:8px; left:50%; transform:translateX(-50%); z-index:130;
  display:flex; gap:5px; align-items:center; padding:5px 9px; border-radius:10px;
  background:linear-gradient(180deg,rgba(40,28,14,.94),rgba(20,14,8,.94)); border:1px solid rgba(201,162,39,.5);
  box-shadow:inset 0 1px 0 rgba(255,236,180,.2),0 4px 12px rgba(0,0,0,.6); }
#sandbox-bar .sb-bar-lab { font-family:var(--brush); color:var(--gold-bright); font-size:13px; margin-right:3px; }
#sandbox-bar .btn.sm { padding:4px 9px; font-size:12px; }
#sandbox-bar .btn.sm.active { background:linear-gradient(180deg,#c9a227,#7a5a14); color:#000; border-color:#ffd860; }

/* 势力选择 */
.faction-pick { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin:4px 0 10px; }
.fac-label { font-family:var(--brush); color:var(--gold-bright); font-size:16px; }
.fac-btns { display:flex; gap:6px; }
.fac-btn { min-width:38px; font-size:16px !important; font-family:var(--brush-deco); border-width:2px !important; }
.fac-btn.active { background:linear-gradient(180deg,#5a4418,#3a2c10); color:var(--gold-bright); box-shadow:inset 0 1px 0 rgba(255,236,180,.3),0 0 10px rgba(201,162,39,.4); }
.fac-desc { width:100%; text-align:center; font-size:12.5px; margin-top:2px; }

/* 点将 */
.hero-pick { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:8px; }
.hero-card { width:210px; max-width:42vw; background:rgba(0,0,0,.35); border:1px solid rgba(201,162,39,.4); border-radius:12px;
  overflow:hidden; cursor:pointer; transition:.15s; padding-bottom:10px; }
.hero-card:hover { border-color:var(--gold-bright); transform:translateY(-3px); box-shadow:0 8px 20px #000,0 0 14px rgba(201,162,39,.3); }
.hero-card.share-target { border-color:var(--gold-bright); box-shadow:0 0 0 2px rgba(240,207,110,.28),0 8px 22px #000; }
.hero-card img { width:100%; height:170px; object-fit:cover; object-position:top center; display:block; transition:filter .18s; }
/* #20 选将屏:悬停时立绘发对应职业色光晕(非锁定) */
.hero-card:not(.locked):hover img { filter:drop-shadow(0 0 10px var(--hero-glow,#f0cf6e)) saturate(1.1); }
.hero-card:not(.locked):hover { box-shadow:0 8px 22px #000, 0 0 18px var(--hero-glow,rgba(201,162,39,.4)); border-color:var(--hero-glow,var(--gold-bright)); }
.hero-guanyu    { --hero-glow:#3fd6a0; } /* 关羽 青绿 */
.hero-zhouyu    { --hero-glow:#ff8a3a; } /* 周瑜 橙火 */
.hero-sima      { --hero-glow:#7fc7ff; } /* 司马 冰蓝 */
.hero-zhuge     { --hero-glow:#e8ecf2; } /* 诸葛 羽白 */
.hero-caocao    { --hero-glow:#ff6a4a; } /* 曹操 赤金 */
.hero-zhangjiao { --hero-glow:#cfe04a; } /* 张角 黄绿 */
.hero-card .hn { font-family:var(--brush-deco); font-size:22px; color:var(--gold-bright); text-align:center; margin:6px 0 4px; }
.hero-card .hd { font-size:12px; color:var(--paper-dim); padding:0 10px; line-height:1.5; min-height:54px; }
.hero-card .hhp { text-align:center; color:var(--red-bright); font-size:13px; margin-top:4px; }
/* #288 选将屏·起始牌组预览:悬停时在底部显示起始牌组 */
.hero-card:not(.locked)::after {
  content: attr(data-starter-deck);
  display:block; font-size:10px; color:var(--paper-dim); text-align:center;
  padding:4px 8px 0; line-height:1.4; opacity:0; transition:opacity .18s;
  border-top:1px solid rgba(201,162,39,.2); margin:4px 8px 0; min-height:0;
}
.hero-card:not(.locked):hover::after { opacity:1; }

/* 药水带 */
/* #s-battle>* 强制 relative,需 ID 覆盖才能定位;上方遗物行圆形图标视觉相近,加个托盘底+多留间距,避免两排圆图标糊成一坨分不清 */
#s-battle #potion-belt { position:absolute; top:58px; left:6px; right:auto; display:flex; flex-direction:column; gap:6px; z-index:6;
  padding:6px 5px; border-radius:16px; background:rgba(10,7,4,.4); border:1px solid rgba(201,162,39,.22); box-shadow:0 2px 8px rgba(0,0,0,.35); }
.potion-belt { display:flex; flex-direction:column; gap:6px; }
.potion { width:40px; height:40px; border-radius:50%; background:radial-gradient(circle at 35% 28%,#3a2c14,#140d04); border:2px solid var(--gold);
  display:flex; align-items:center; justify-content:center; font-size:13px; cursor:pointer; color:#f0e6cf; font-family:var(--brush); box-shadow:0 2px 7px #000; transition:.12s; overflow:hidden; }
.potion:hover:not(.empty) { border-color:var(--gold-bright); transform:scale(1.12); box-shadow:0 0 12px rgba(201,162,39,.5); }
.potion-img { width:100%; height:100%; object-fit:contain; padding:3px; box-sizing:border-box; }
.potion-letter { font-family:var(--brush); font-size:16px; color:var(--gold-bright); }
.potion.empty { background:radial-gradient(circle at 50% 50%,rgba(40,30,16,.45),rgba(10,7,4,.4)); border:2px dashed rgba(201,162,39,.4);
  color:rgba(201,162,39,.5); cursor:default; font-size:18px; box-shadow:none; }
.potion-brew-list { display:flex; flex-direction:column; gap:8px; margin:10px 0; }
.potion-brew-row { width:100%; min-height:58px; display:grid; grid-template-columns:38px 16px 38px 24px minmax(52px,72px) 1fr; align-items:center; gap:6px;
  border:1px solid rgba(201,162,39,.45); border-radius:8px; background:rgba(22,14,8,.72); color:var(--fg); cursor:pointer; padding:7px 9px;
  box-shadow:0 2px 8px rgba(0,0,0,.35); text-align:left; }
.potion-brew-row:hover { border-color:var(--gold-bright); transform:translateY(-1px); }
.brew-pot { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 35% 28%,#3a2c14,#140d04); border:2px solid var(--gold); }
.brew-pot img { width:100%; height:100%; object-fit:contain; padding:3px; box-sizing:border-box; }
.brew-plus, .brew-arrow { color:var(--gold-bright); text-align:center; font-weight:bold; }
.brew-result { justify-self:start; border:1px solid rgba(201,162,39,.45); border-radius:4px; padding:2px 5px; font-size:11px; color:#e7dcc4; background:rgba(0,0,0,.25); white-space:nowrap; }
.brew-result.r-uncommon { border-color:#6fa8d6; color:#bfe0ff; }
.brew-result.r-rare { border-color:#e8c45a; color:#ffe58b; box-shadow:0 0 7px rgba(232,196,90,.35); }
.brew-name { min-width:0; font-size:12px; line-height:1.25; color:var(--paper); overflow-wrap:anywhere; }

/* 商店货架(宝贝/药水图标商品) */
.shop-sec { text-align:center; font-family:var(--brush); color:var(--gold-bright); font-size:17px; letter-spacing:3px; margin:6px 0 6px; opacity:.9; }
.shop-shelf { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:10px; }
.shop-good { width:92px; display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; transition:.12s;
  background:rgba(20,14,8,.5); border:1px solid rgba(201,162,39,.3); border-radius:10px; padding:8px 6px; }
.shop-good:hover:not(.cant):not(.sold) { transform:translateY(-4px); border-color:var(--gold-bright); box-shadow:0 4px 14px rgba(0,0,0,.5); }
.shop-good.cant, .shop-good.sold { opacity:.45; cursor:default; }
.shop-good .good-ico { width:52px; height:52px; border-radius:9px; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 35% 28%,#3a2c14,#140d04); border:2px solid var(--gold); }
.shop-good.r-uncommon .good-ico { border-color:#6fa8d6; }
.shop-good.r-rare .good-ico { border-color:#e8c45a; box-shadow:0 0 8px rgba(232,196,90,.5); }
.shop-good .good-ico img { width:100%; height:100%; object-fit:cover; box-sizing:border-box; }
.shop-good .good-name { font-family:var(--brush); font-size:13px; color:#e7dcc4; text-align:center; line-height:1.15; }
.shop-good .price { font-family:var(--brush); color:var(--gold-bright); font-size:13px; }
.shop-good.cant .price { color:var(--red-bright); }
/* #487 今日特价遗物 */
.shop-special-relic { display:flex; align-items:center; gap:10px; border:1px solid var(--gold-bright); border-radius:8px; padding:8px 12px; margin:10px 0; background:rgba(201,162,39,0.08); cursor:pointer; transition:.12s; }
.shop-special-relic:hover:not(.cant):not(.sold) { background:rgba(201,162,39,0.16); transform:translateY(-2px); box-shadow:0 4px 14px rgba(0,0,0,.4); }
.shop-special-relic.sold, .shop-special-relic.cant { opacity:.5; cursor:default; }
.shop-special-relic .good-ico { width:44px; height:44px; flex-shrink:0; border-radius:8px; background:none; border:2px solid var(--gold-bright); display:flex; align-items:center; justify-content:center; }
.shop-special-relic .good-ico img { width:100%; height:100%; object-fit:cover; box-sizing:border-box; }
.shop-special-relic .special-info { display:flex; flex-direction:column; gap:2px; }
.special-label { font-size:10px; color:var(--gold-bright); letter-spacing:.08em; }
.special-name { font-family:var(--brush); font-size:14px; color:var(--paper); }
.special-price { font-size:11px; color:var(--paper-dim); }

/* 行商场景 banner + 招呼语 */
.merchant { margin:4px 0 12px; }
.merchant-scene { position:relative; width:100%; max-width:440px; margin:0 auto; border-radius:12px; overflow:hidden;
  border:1px solid rgba(201,162,39,.4); box-shadow:0 4px 16px rgba(0,0,0,.55); line-height:0; }
.merchant-scene img { width:100%; height:auto; max-height:200px; object-fit:cover; display:block; }
.merchant-say { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; align-items:flex-end;
  gap:8px; padding:18px 12px 8px; line-height:1.3;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(8,5,2,.85)); }
.merchant-talk { min-width:0; display:flex; flex-direction:column; gap:2px; }
.merchant-say .m-name { font-size:11px; color:var(--gold-bright); text-shadow:0 1px 3px #000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.merchant-say .m-line { font-family:var(--brush); font-size:16px; color:#f0e6cf; text-shadow:0 1px 3px #000; }
.merchant-say .m-gold { font-size:13px; color:#e7dcc4; white-space:nowrap; text-shadow:0 1px 3px #000; }
.merchant-say .m-gold b { color:var(--gold-bright); font-size:16px; }

/* 奇遇选项:label 在上,奖励预览在下方 */
.btn.ev-choice { display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 14px; }
.btn.ev-choice .ec-label { font-size:15px; }
.btn.ev-choice .ec-preview { font-size:11.5px; color:var(--gold-bright); opacity:.85; letter-spacing:1px; }

/* 奇遇插画 */
.event-illo { width:100%; max-width:420px; margin:2px auto 12px; border-radius:12px; overflow:hidden;
  border:1px solid rgba(201,162,39,.35); box-shadow:0 4px 16px rgba(0,0,0,.55); line-height:0;
  min-height:80px; background:linear-gradient(160deg,rgba(40,35,28,.95) 0%,rgba(25,20,15,.98) 100%); display:flex; align-items:center; justify-content:center; }
.event-illo img { width:100%; height:auto; max-height:220px; object-fit:cover; display:block; }

/* 账号切换面板 */
.profile-grid { display:flex; flex-direction:column; gap:10px; margin:12px 0; }
.profile-card { display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:14px 18px; border-radius:10px; cursor:pointer; transition:.12s;
  background:rgba(20,14,8,.55); border:1.5px solid rgba(201,162,39,.35); }
.profile-card:hover { transform:translateY(-2px); border-color:var(--gold-bright); box-shadow:0 4px 14px rgba(0,0,0,.5); }
.profile-card.empty .pf-stat { color:#9a8a52; font-style:italic; }
.profile-card.active { border-color:var(--gold-bright); background:rgba(60,42,16,.6); box-shadow:0 0 12px rgba(232,196,90,.4); }
.profile-card .pf-slot { font-family:var(--brush); color:var(--gold-bright); font-size:18px; letter-spacing:2px; }
.profile-card .pf-stat { color:#e7dcc4; font-size:13px; flex:1; text-align:center; }
.profile-card .pf-cur { color:var(--gold-bright); font-size:12px; }
.profile-transfer { margin:10px 0 14px; padding:10px; border-radius:8px; border:1px solid rgba(201,162,39,.28);
  background:rgba(14,10,7,.5); display:flex; flex-direction:column; gap:8px; }
.pt-title { font-family:var(--brush); color:var(--gold-bright); font-size:16px; letter-spacing:.08em; text-align:center; }
.pt-code { width:100%; min-height:68px; resize:vertical; box-sizing:border-box; border-radius:7px; border:1px solid rgba(201,162,39,.45);
  background:rgba(10,7,5,.72); color:#eadfca; padding:8px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; line-height:1.35; }
.pt-info { min-height:16px; color:#a99458; font-size:12px; text-align:center; overflow-wrap:anywhere; }
.pt-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; }

/* 存档槽位 */
.save-slots-panel { width:min(620px,94vw); }
.save-slot-grid { display:flex; flex-direction:column; gap:10px; margin:12px 0 14px; }
.save-slot-card { display:grid; grid-template-columns:58px minmax(0,1fr) auto; align-items:center; gap:10px;
  padding:10px; border-radius:8px; background:rgba(20,14,8,.58); border:1.5px solid rgba(201,162,39,.34); }
.save-slot-card.empty { border-style:dashed; background:rgba(15,11,8,.48); }
.slot-thumb { width:58px; height:58px; border-radius:8px; overflow:hidden; display:flex; align-items:center; justify-content:center;
  color:#6b5520; font-family:var(--brush); font-size:24px; background:radial-gradient(circle at 35% 24%,#3a2c14,#120c05); border:1px solid rgba(232,196,90,.34); }
.slot-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.slot-info { min-width:0; display:flex; flex-direction:column; gap:2px; }
.slot-kicker { font-size:11px; color:var(--gold-bright); letter-spacing:.08em; text-transform:uppercase; }
.slot-title { color:#f1e6cf; font-family:var(--brush); font-size:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.slot-sub, .slot-small, .slot-time { color:var(--paper-dim); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.slot-time { color:#a99458; }
.slot-actions { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; max-width:150px; }
.slot-actions .btn.sm { min-width:56px; padding-left:8px; padding-right:8px; }
@media (max-width:460px) {
  .save-slot-card { grid-template-columns:48px minmax(0,1fr); }
  .slot-thumb { width:48px; height:48px; }
  .slot-actions { grid-column:1 / -1; justify-content:flex-start; max-width:none; }
}

/* 标题次级按钮行 */
.title-links { display:flex; flex-wrap:wrap; gap:8px 10px; justify-content:center; max-width:420px; margin:0 auto; }
/* #B21 标题屏子菜单:默认收起,点开才铺开对应一组按钮,避免手机屏一次堆 13 个按钮 */
.title-menu-wrap { display:flex; flex-direction:column; align-items:center; gap:8px; max-width:420px; margin:0 auto; }
.menu-toggle { opacity:.82; }
.menu-toggle:hover { opacity:1; }
.menu-arrow { display:inline-block; width:.9em; }
.title-submenu { margin-top:2px; }

/* 图鉴 */
.codex-tabs { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:6px 0 10px; }
.codex-tabs .codex-tab { display:inline-flex; align-items:center; gap:6px; min-height:30px; }
.codex-tabs .btn.active { background:linear-gradient(180deg,#5a4418,#3a2c10); border-color:var(--gold-bright); color:var(--gold-bright); }
.panel.codex-panel { overflow:hidden; }
.codex-ring { width:22px; height:22px; flex:0 0 22px; border-radius:50%; position:relative;
  background:conic-gradient(var(--gold-bright) var(--pct), rgba(201,162,39,.16) 0);
  box-shadow:inset 0 0 0 1px rgba(240,207,110,.28),0 0 8px rgba(201,162,39,.16); }
.codex-ring::after { content:attr(data-pct); position:absolute; inset:4px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:#20160d; color:#f3df9b; font-size:8px; line-height:1; font-family:var(--font-body); }
.codex-body { max-height:62vh; overflow-y:auto; overflow-x:hidden; padding:2px; transform-origin:left center; }
.panel.codex-panel .codex-body { max-height:min(52vh,460px); }
.codex-body.codex-page-turn { animation:codex-page-turn .28s cubic-bezier(.2,.8,.25,1); }
@keyframes codex-page-turn { 0%{opacity:.25; transform:perspective(720px) rotateY(-10deg) translateX(10px)} 100%{opacity:1; transform:none} }
.codex-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); gap:10px 8px; }
.codex-item { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; }
/* 图鉴条目同样去掉外层圆圈(图标本身即圆角卡片) */
.codex-item .ci-ico { width:48px; height:48px; border-radius:9px; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:none; border:2px solid var(--gold); }
.codex-item.r-uncommon .ci-ico { border-color:#6fa8d6; }
.codex-item.r-rare .ci-ico { border-color:#e8c45a; box-shadow:0 0 7px rgba(232,196,90,.5); }
.codex-item.r-boss .ci-ico { border-color:#d4503e; box-shadow:0 0 7px rgba(212,80,62,.5); }
.codex-item.r-shop .ci-ico { border-color:#5fb98a; }
.codex-item.r-event .ci-ico { border-color:#b89a4a; }
.codex-item .ci-ico img { width:100%; height:100%; object-fit:contain; padding:4px; box-sizing:border-box; }
.codex-item .ci-name { font-family:var(--brush); font-size:12px; color:#e7dcc4; text-align:center; line-height:1.15; }
.codex-new { --codex-glow:rgba(240,207,110,.95); }
.codex-collected { --codex-glow:rgba(201,162,39,.42); }
.codex-item.codex-new .ci-ico, .codex-ach-item.codex-new, .hero-lore.codex-new, .lore-entry.codex-new,
.card.codex-new { border-color:var(--gold-bright) !important; box-shadow:0 0 0 2px rgba(240,207,110,.64),0 0 18px var(--codex-glow),inset 0 0 12px rgba(240,207,110,.16) !important; animation:codex-new-glow 1.8s ease-in-out infinite; }
.codex-item.codex-collected .ci-ico, .codex-ach-item.codex-collected, .hero-lore.codex-collected, .lore-entry.codex-collected,
.card.codex-collected { box-shadow:0 0 0 1px rgba(201,162,39,.35),0 0 10px var(--codex-glow); }
.codex-item.codex-new::after, .card.codex-new::after, .codex-ach-item.codex-new::after, .hero-lore.codex-new::after, .lore-entry.codex-new::after {
  content:''; position:absolute; inset:-5px; border:1px solid rgba(240,207,110,.72); border-radius:8px; pointer-events:none; animation:codex-new-ring 1.2s ease-out infinite; }
@keyframes codex-new-glow { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.22)} }
@keyframes codex-new-ring { from{opacity:.8; transform:scale(.98)} to{opacity:0; transform:scale(1.08)} }
.lowfx .codex-body.codex-page-turn, .lowfx .codex-item.codex-new .ci-ico, .lowfx .codex-ach-item.codex-new,
.lowfx .hero-lore.codex-new, .lowfx .lore-entry.codex-new, .lowfx .card.codex-new, .lowfx .codex-item.codex-new::after,
.lowfx .card.codex-new::after, .lowfx .codex-ach-item.codex-new::after, .lowfx .hero-lore.codex-new::after, .lowfx .lore-entry.codex-new::after { animation:none; }
.codex-class { font-family:var(--brush); font-size:18px; color:var(--gold-bright); letter-spacing:3px; margin:10px 0 6px; border-bottom:1px solid rgba(201,162,39,.25); padding-bottom:3px; }
.codex-cards .deck-grid { gap:8px; overflow:hidden; }
.codex-cards .deck-grid .card { margin:0; }
/* #486 图鉴费用排序按钮 */
.codex-cost-btn { font-size:11px; padding:3px 8px; background:rgba(255,255,255,.08); border:1px solid rgba(201,162,39,.4); border-radius:4px; color:var(--paper-dim); cursor:pointer; margin-bottom:6px; font-family:var(--brush); transition:.12s; }
.codex-cost-btn:hover { background:rgba(201,162,39,.18); color:var(--gold-bright); border-color:var(--gold-bright); }
/* 武将列传(#62) */
.codex-heroes { display:flex; flex-direction:column; gap:12px; }
.hero-lore { position:relative; display:flex; gap:12px; background:rgba(0,0,0,.3); border:1px solid rgba(201,162,39,.3);
  border-top-color:rgba(240,207,110,.3); border-radius:10px; padding:10px;
  box-shadow:inset 0 1px 0 rgba(255,236,180,.12),0 2px 6px rgba(0,0,0,.4); }
.hl-portrait { flex-shrink:0; width:84px; height:104px; border-radius:8px; overflow:hidden; border:1px solid rgba(201,162,39,.4); background:#161009; }
.hl-portrait img { width:100%; height:100%; object-fit:cover; object-position:top center; }
.hl-body { flex:1; min-width:0; }
.hl-name { font-family:var(--brush-deco); font-size:22px; color:var(--gold-bright); }
.hl-title { font-family:var(--brush); font-size:12px; color:var(--paper-dim); margin-left:8px; letter-spacing:1px; }
.hl-desc { font-size:12px; color:var(--jade); margin:3px 0 5px; letter-spacing:.5px; }
.hl-lore { font-size:13px; color:var(--paper); line-height:1.7; }
.lore-codex { display:flex; flex-direction:column; gap:10px; padding:2px 4px 6px; }
.lore-entry { position:relative; border:1px solid rgba(201,162,39,.32); border-top-color:rgba(240,207,110,.34); border-radius:8px; background:rgba(16,10,5,.62); padding:10px; box-shadow:inset 0 1px 0 rgba(255,236,180,.08),0 2px 8px rgba(0,0,0,.28); }
.lore-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin-bottom:7px; min-width:0; }
.lore-head b { font-family:var(--brush-deco); font-size:20px; color:var(--gold-bright); line-height:1.15; overflow-wrap:anywhere; }
.lore-head span { font-size:11px; color:var(--jade); letter-spacing:.04em; overflow-wrap:anywhere; }
.lore-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.lore-block { min-width:0; background:rgba(255,255,255,.035); border:1px solid rgba(201,162,39,.14); border-radius:6px; padding:8px; }
.lore-label { font-family:var(--brush); font-size:13px; color:#f0cf6e; letter-spacing:.08em; margin-bottom:4px; }
.lore-block p, .lore-lock-hint { margin:0; color:#e7dcc4; font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
.lore-entry.lore-locked { filter:grayscale(.5) brightness(.72); opacity:.75; }
.lore-lock-hint { color:var(--paper-dim); }
.letter-codex .codex-bestiary-stat { margin-top:8px; }
.letter-entry .lore-head span { color:#f0cf6e; }
.letter-complete-hint { text-align:center; padding:4px 8px 2px; }
@media (max-width:520px) { .lore-columns { grid-template-columns:1fr; } .lore-head b { font-size:18px; } }
.arch-codex { display:flex; flex-direction:column; gap:12px; padding:2px 4px 8px; }
.arch-section { display:flex; flex-direction:column; gap:8px; }
.arch-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; }
.arch-card { min-width:0; border:1px solid rgba(201,162,39,.3); border-top-color:rgba(240,207,110,.35); border-radius:8px; background:linear-gradient(180deg,rgba(38,25,12,.72),rgba(16,10,5,.72)); padding:10px; box-shadow:inset 0 1px 0 rgba(255,236,180,.08),0 2px 8px rgba(0,0,0,.25); }
.arch-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; min-width:0; }
.arch-head b { font-family:var(--brush-deco); font-size:20px; color:var(--gold-bright); line-height:1.15; overflow-wrap:anywhere; }
.arch-head span { flex:0 0 auto; font-size:10px; color:var(--jade); letter-spacing:.08em; opacity:.85; }
.arch-card p { margin:7px 0; color:#e7dcc4; font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
.arch-tags, .arch-pills, .arch-relics { display:flex; flex-wrap:wrap; gap:5px; min-width:0; }
.arch-tags span, .arch-pill { border:1px solid rgba(201,162,39,.24); border-radius:4px; background:rgba(255,255,255,.045); color:var(--paper-dim); font-size:10px; line-height:1.2; padding:3px 5px; overflow-wrap:anywhere; }
.arch-sub { margin-top:7px; margin-bottom:4px; font-family:var(--brush); font-size:12px; color:#f0cf6e; letter-spacing:.06em; }
.arch-relic { display:inline-flex; align-items:center; max-width:100%; gap:4px; border:1px solid rgba(201,162,39,.22); border-radius:4px; background:rgba(0,0,0,.22); color:#e7dcc4; font-size:10px; padding:2px 5px 2px 2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.arch-relic img { width:22px; height:22px; flex:0 0 22px; object-fit:contain; }
@media (max-width:520px) { .arch-grid { grid-template-columns:1fr; } .arch-head b { font-size:18px; } }

/* 战绩 / 成就 / 统计 */
.prog-stats .ps-row { display:flex; justify-content:space-between; padding:6px 10px; border-bottom:1px solid rgba(201,162,39,.12); font-size:14px; color:#e7dcc4; }
.prog-stats .ps-row b { color:var(--gold-bright); }
.prog-hint { font-size:11px; color:var(--paper-dim); opacity:.8; line-height:1.5; margin:8px 2px 2px; padding:7px 10px; border-left:2px solid rgba(201,162,39,.4); background:rgba(201,162,39,.06); border-radius:0 8px 8px 0; }
/* 营地选项图标 */
.btn.camp-opt { display:flex; align-items:center; justify-content:center; gap:9px; }
.btn.camp-opt .co-ico { font-size:19px; line-height:1; filter:drop-shadow(0 1px 2px #000); }
.prog-class { margin-top:12px; }
.prog-class .pc-head { font-family:var(--brush); color:var(--gold-bright); font-size:16px; letter-spacing:2px; margin-bottom:4px; }
.prog-class .pc-row { display:flex; justify-content:space-between; padding:5px 10px; font-size:13px; color:#d8c9a4; border-bottom:1px solid rgba(201,162,39,.1); }
.prog-class .pc-row span:first-child { font-family:var(--brush); color:#e7dcc4; min-width:52px; }
/* #93 战绩按职业筛选:芯片 + 选中高亮 + 非选中行淡出 */
.prog-class .pc-filter { display:flex; flex-wrap:wrap; gap:5px; margin:2px 0 8px; }
.prog-class .pc-chip { font-family:var(--brush); font-size:12px; padding:3px 10px; border-radius:12px; cursor:pointer;
  background:rgba(0,0,0,.28); color:#d8c9a4; border:1px solid rgba(201,162,39,.28); transition:background .12s, color .12s, border-color .12s; }
.prog-class .pc-chip:hover { border-color:rgba(201,162,39,.6); color:#e7dcc4; }
.prog-class .pc-chip.active { background:linear-gradient(180deg,#caa227,#9c7a18); color:#1a140e; border-color:#e8c45a; }
.prog-class .pc-row { transition:opacity .15s; }
.prog-class .pc-row.pc-dim { opacity:.28; }
.ach-grid { display:flex; flex-direction:column; gap:8px; }
.ach-item { display:flex; gap:10px; align-items:center; padding:8px 10px; border-radius:8px; background:rgba(20,14,8,.4); border:1px solid rgba(201,162,39,.18); opacity:.5; }
.ach-item.got { opacity:1; border-color:rgba(232,196,90,.5); background:rgba(40,30,14,.45); }
.ach-item .ach-ico { font-size:22px; color:#5a4a28; width:26px; text-align:center; }
.ach-item.got .ach-ico { color:var(--gold-bright); text-shadow:0 0 8px rgba(232,196,90,.6); }
.ach-item .ach-name { font-family:var(--brush); font-size:15px; color:#e7dcc4; }
.ach-item.got .ach-name { color:var(--gold-bright); }
.ach-item .ach-desc { font-size:12px; color:#b9a571; }
.prog-hist .hist-row { display:flex; gap:8px; align-items:center; padding:6px 8px; font-size:13px; border-bottom:1px solid rgba(201,162,39,.1); }
.prog-hist .hr-cls { font-family:var(--brush); color:#e7dcc4; min-width:48px; }
.prog-hist .hr-asc { color:#b9a571; min-width:32px; }
.prog-hist .hist-row.win .hr-res { color:var(--gold-bright); }
.prog-hist .hist-row.lose .hr-res { color:#c8857a; }
.prog-hist .hr-res { flex:1; }
.prog-hist .hr-seed { color:#7a6740; font-size:11px; }
.prog-hist .hr-faction, .prog-hist .hr-mut { color:#b9a571; font-size:11px; padding:1px 5px; border:1px solid rgba(201,162,39,.22); border-radius:6px; white-space:nowrap; }
.hist-share { min-width:48px; padding:3px 8px; font-size:11px; }
@media (max-width:480px) {
  .prog-hist .hist-row { flex-wrap:wrap; gap:5px; }
  .prog-hist .hr-res { flex-basis:120px; }
  .hist-share { margin-left:auto; }
}
.unlock-tree { display:flex; flex-direction:column; gap:10px; }
.unlock-head { padding:10px 12px; border-radius:8px; background:rgba(0,0,0,.28); border:1px solid rgba(201,162,39,.22); }
.unlock-head > div:first-child { display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--gold-bright); font-size:15px; }
.unlock-head p { margin:8px 0 0; color:var(--paper); font-size:12px; }
.unlock-list { display:flex; flex-direction:column; gap:8px; }
.unlock-row { display:grid; grid-template-columns:46px 1fr; gap:9px; padding:9px; border-radius:8px; border:1px solid rgba(201,162,39,.18); background:rgba(20,14,8,.42); }
.unlock-row.done { border-color:rgba(232,196,90,.52); background:rgba(40,30,14,.48); }
.unlock-row.locked { opacity:.86; }
.ur-icon { width:42px; height:42px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.32); border:1px solid rgba(201,162,39,.28); color:var(--gold-bright); font-size:11px; font-weight:bold; }
.ur-icon img { width:100%; height:100%; object-fit:contain; padding:3px; box-sizing:border-box; }
.ur-main { min-width:0; }
.ur-top { display:flex; align-items:center; gap:6px; justify-content:space-between; }
.ur-top b { min-width:0; color:var(--gold-bright); font-family:var(--brush); font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ur-top em { flex-shrink:0; font-style:normal; font-size:10px; color:var(--paper-dim); border:1px solid rgba(201,162,39,.25); border-radius:4px; padding:1px 5px; }
.ur-desc { color:#d8c9a4; font-size:11px; line-height:1.3; margin-top:3px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ur-route { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:6px; color:var(--paper); font-size:12px; }
.ur-route strong { color:var(--gold-bright); }
.ur-note { color:var(--text-dim); font-size:10px; margin-top:4px; }
.unlock-subhead { font-family:var(--brush); color:var(--gold-bright); font-size:16px; letter-spacing:2px; margin-top:4px; }
.unlock-ach-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:8px; }
.unlock-ach { padding:8px; border-radius:8px; background:rgba(0,0,0,.24); border:1px solid rgba(201,162,39,.14); }
.unlock-ach b { display:block; color:#e7dcc4; font-size:12px; margin-bottom:3px; }
.unlock-ach span { display:block; color:var(--text-dim); font-size:10px; line-height:1.3; }
@media (max-width:430px) {
  .unlock-row { grid-template-columns:40px 1fr; gap:7px; padding:8px; }
  .ur-icon { width:36px; height:36px; }
  .ur-top b { font-size:13px; }
  .ur-desc { font-size:10px; }
}

/* —— 桌面适配:卡牌略大 —— */
@media (min-width:760px){ .card{ width:118px; height:168px; } .hand{ min-height:180px; } }

/* #519 战斗布局改成"对阵"式:原布局敌人吊在顶部、主角缩在左下角、中间整条被战斗记录
   (flex:1)占着但其实大片留白。现在所有尺寸下战场带都归 .enemies(flex:1),战斗记录改成
   顶部居中的半透明"战报"浮条;手机竖屏=敌人带内居中与左下主角斜向对峙,
   宽屏(≥760px)=主角立左、敌人立右同踩一条地线,中央空当留给出牌飞行/攻击突进动画。 */
/* 战报浮条(基础=手机):用 #id 而非 .class 是为了压过 #s-battle>* 的 position:relative */
#combat-log { position:absolute; flex:none; top:calc(max(6px,env(safe-area-inset-top)) + 36px);
  left:50%; transform:translateX(-50%); width:min(340px,72vw); max-height:88px; z-index:3; padding:4px 12px;
  background:rgba(10,7,4,.42); border:1px solid rgba(201,162,39,.2); border-radius:10px;
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
@media (min-width:760px){
  /* 战场带:敌人靠右、底对齐站在地线上(多敌换行时也从底部往上排) */
  .enemies { justify-content:flex-end; align-items:flex-end; align-content:flex-end;
    gap:clamp(20px,3vw,44px); padding:64px clamp(24px,7vw,110px) 6px 0; }
  /* 敌人立绘放大,与更大的主角立绘对称(血条/卡片宽度同步);Boss 再大一圈,压场 */
  .efighter { width:150px; }
  /* #532 桌面立绘更大:普通敌人保持简约细框(不加粗);精英/Boss 的豪华框才加粗让雕花更清晰 */
  .eportrait { width:132px; height:132px; font-size:52px; }
  /* #539 桌面同套递进:边框 3<13<15,净画面 126<130<158 */
  .efighter.elite { width:160px; }
  .efighter.elite .eportrait { width:156px; height:156px; font-size:58px; border-width:13px; }
  .efighter.elite .hpbar { width:156px; }
  .efighter .hpbar { width:132px; }
  .efighter.boss { width:196px; }
  .efighter.boss .eportrait { width:204px; height:204px; font-size:72px; border-width:10px; }
  .efighter.boss .hpbar { width:204px; height:18px; }
  .efighter.boss .ename { font-size:19px; }
  /* #530 主角:桌面沿用手机版古风描金雕花框,与右侧敌人的框对称呼应;左侧站位、更大尺寸、边框加粗,
     bottom 仍由 _syncHeroStagePos 动态设置 */
  #hero-stage-wrap { left:clamp(30px,11vw,170px); margin-left:0; width:clamp(150px,15vw,200px); height:clamp(185px,30vh,255px); }
  #hero-stage { border-width:15px; } /* #539 ≤Boss 桌面 15px */
  /* 战报浮条:宽屏加大(顶端 42px 让开宝贝行) */
  #combat-log { top:42px; width:min(460px,44vw); max-height:118px; padding:6px 14px; }
}
@media (min-width:960px) and (min-height:620px){
  /* P20 桌面对阵布局 v2:一条可读战线,左主右敌,中场留给飞牌和突进。 */
  #s-battle::after {
    content:''; position:absolute; z-index:0; pointer-events:none;
    left:clamp(120px,14vw,240px); right:clamp(110px,10vw,220px);
    bottom:var(--battle-ground-bottom,260px); height:92px;
    background:
      radial-gradient(ellipse at 14% 48%, rgba(0,0,0,.46), transparent 28%),
      radial-gradient(ellipse at 76% 50%, rgba(0,0,0,.42), transparent 32%),
      linear-gradient(90deg, transparent, rgba(240,207,110,.16) 18%, rgba(240,207,110,.22) 50%, rgba(240,207,110,.13) 82%, transparent);
    filter:blur(.2px); opacity:.8; transform:perspective(560px) rotateX(58deg); transform-origin:center bottom;
  }
  .enemies {
    position:relative; z-index:1; flex-wrap:nowrap;
    justify-content:flex-end; align-items:flex-end; align-content:flex-end;
    padding:72px clamp(56px,8vw,150px) 32px clamp(280px,32vw,450px);
    gap:clamp(28px,3.8vw,64px);
  }
  .efighter { --lane-y:0px; transform:translateY(var(--lane-y)); }
  .efighter:nth-child(2n) { --lane-y:-16px; }
  .efighter:nth-child(3n) { --lane-y:10px; }
  .efighter.boss { --lane-y:-24px; }
  .efighter::after, #hero-stage-wrap::after {
    content:''; position:absolute; left:50%; bottom:-14px; width:112%; height:30px;
    transform:translateX(-50%); z-index:-1; pointer-events:none;
    background:radial-gradient(ellipse at center, rgba(0,0,0,.52), rgba(0,0,0,.22) 45%, transparent 72%);
    filter:blur(2px);
  }
  .efighter.boss::after { width:128%; height:38px; bottom:-18px; }
  #hero-stage-wrap { z-index:2; }
  #hero-stage-wrap::after { width:118%; height:36px; bottom:-18px; }
  #hero-stage.lunge { animation:hero-lunge-desktop .34s cubic-bezier(.2,.75,.32,1); }
  .efighter.elunge { animation:enemy-lunge-desktop .4s cubic-bezier(.3,.7,.5,1); z-index:6; }
  @keyframes hero-lunge-desktop {
    0%,100% { transform:translateX(0) scale(1); }
    42% { transform:translateX(76px) scale(1.055); }
  }
  @keyframes enemy-lunge-desktop {
    0%,100% { transform:translateY(var(--lane-y)) translateX(0) scale(1); }
    38% { transform:translateY(var(--lane-y)) translateX(-54px) scale(1.075); }
  }
}
/* 羁绊提示(点将屏副将说明里) */
.bond-hint { color:#e8554a; font-size:12px; font-weight:600; }
/* #518 副将玩法收起为进阶选项:默认只显示一行可点开关的按钮 */
.comp-wrap { margin:8px 0; }
.comp-toggle { width:100%; text-align:left; opacity:.85; }
.comp-toggle:hover { opacity:1; }
.comp-pick { margin-top:8px; }
.comp-hint { font-size:12px; opacity:.75; margin:2px 0 6px; }
.comp-warn { color:#e8a24a; font-size:12px; font-weight:600; }
/* #64 结局分支文本框 */
.ending-box { margin:10px auto 4px; max-width:440px; padding:12px 16px; border-radius:10px;
  background:rgba(0,0,0,.32); border:1px solid rgba(201,162,39,.35);
  border-top-color:rgba(240,207,110,.4); box-shadow:inset 0 1px 0 rgba(255,236,180,.12); }
.ending-box .ending-title { font-family:var(--brush-deco); font-size:18px; color:var(--gold-bright);
  letter-spacing:.06em; margin-bottom:6px; text-shadow:0 1px 4px #000; }
.ending-box .ending-text { font-size:13.5px; line-height:1.7; color:var(--paper); opacity:.92; }
/* N15 结局横卷轴收藏 */
.ending-scroll-art { position:relative; width:min(520px,100%); aspect-ratio:16/7; margin:10px auto 8px; overflow:hidden; border-radius:8px;
  border:1px solid rgba(222,184,82,.48); background:#21140b; box-shadow:inset 0 0 22px rgba(0,0,0,.4),0 8px 18px rgba(0,0,0,.38); }
.ending-scroll-art::before, .ending-scroll-art::after { content:''; position:absolute; z-index:3; top:-5px; bottom:-5px; width:16px; border-radius:8px;
  background:linear-gradient(90deg,#38210f,#b98b45 45%,#2b1a0f); box-shadow:0 2px 8px rgba(0,0,0,.55); }
.ending-scroll-art::before { left:-6px; }
.ending-scroll-art::after { right:-6px; }
.ending-scroll-art .scroll-img, .ending-scroll-art .scroll-img img { width:100%; height:100%; }
.ending-scroll-art .scroll-img img { display:block; object-fit:cover; filter:saturate(.95) contrast(1.04); }
.ending-scroll-art.locked .scroll-img img { filter:grayscale(1) brightness(.38); }
.scroll-shade { position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(8,5,3,.02) 28%,rgba(8,5,3,.74)),linear-gradient(90deg,rgba(255,236,170,.2),transparent 18%,transparent 82%,rgba(42,21,8,.44)); }
.scroll-caption { position:absolute; left:24px; right:24px; bottom:10px; z-index:2; display:grid; gap:2px; text-align:left; }
.scroll-caption span { color:#e7c26a; font-size:10px; letter-spacing:.14em; text-transform:uppercase; text-shadow:0 1px 3px #000; }
.scroll-caption b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#fff0ba; font-family:var(--brush-deco); font-size:18px; letter-spacing:.04em; text-shadow:0 2px 6px #000; }
.scroll-caption em { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#e9ddc1; font-style:normal; font-size:11px; opacity:.86; text-shadow:0 1px 3px #000; }
.ending-scroll-art.compact { width:100%; aspect-ratio:16/8.2; margin:0; box-shadow:inset 0 0 18px rgba(0,0,0,.38); }
.ending-scroll-art.compact .scroll-caption { left:18px; right:18px; bottom:8px; }
.ending-scroll-art.compact .scroll-caption b { font-size:14px; }
.ending-scroll-gallery { display:grid; gap:10px; }
.scroll-gallery-head { display:grid; grid-template-columns:1fr auto; gap:6px 10px; align-items:center; color:var(--gold-bright); }
.scroll-gallery-head b { font-family:var(--brush-deco); font-size:18px; letter-spacing:.08em; }
.scroll-gallery-head span { color:var(--paper-dim); font-size:12px; }
.scroll-gallery-head .cmp-bar { grid-column:1/-1; }
.scroll-gallery-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:8px; }
.scroll-card { display:block; width:100%; min-width:0; padding:0; border:0; border-radius:8px; background:transparent; color:inherit; cursor:pointer; }
.scroll-card:disabled { cursor:default; }
.scroll-card.unlocked:focus-visible .ending-scroll-art, .scroll-card.unlocked:hover .ending-scroll-art { border-color:var(--gold-bright); transform:translateY(-1px); }
.scroll-detail { display:grid; gap:9px; }
.scroll-story { margin-top:0; }
.scroll-meta { text-align:center; color:var(--paper-dim); font-size:12px; }
@media (max-width:430px) {
  .ending-scroll-art { aspect-ratio:16/8.4; }
  .scroll-caption b { font-size:15px; }
  .scroll-gallery-grid { grid-template-columns:1fr 1fr; gap:7px; }
  .ending-scroll-art.compact .scroll-caption { left:16px; right:16px; bottom:7px; }
  .ending-scroll-art.compact .scroll-caption b { font-size:12px; }
}
.memorial-shrine { margin:10px auto 4px; max-width:460px; }
.memorial-title { font-family:var(--brush-deco); color:#d9bd72; font-size:16px; letter-spacing:.12em; text-align:center; margin-bottom:6px; text-shadow:0 1px 4px #000; }
.memorial-list { display:flex; flex-direction:column; gap:8px; }
.memorial-card { padding:9px 11px; border-radius:8px; border:1px solid rgba(201,162,39,.32);
  background:linear-gradient(180deg,rgba(40,20,14,.7),rgba(12,9,7,.82)); box-shadow:inset 0 1px 0 rgba(255,236,180,.08),0 3px 10px rgba(0,0,0,.35); }
.memorial-head { display:flex; justify-content:space-between; gap:8px; align-items:baseline; color:var(--gold-bright); }
.memorial-head b { font-family:var(--brush-deco); font-size:17px; }
.memorial-head span, .memorial-meta { color:var(--paper-dim); font-size:11px; }
.memorial-cause { margin-top:3px; color:#efc0a2; font-size:12px; }
.memorial-couplet { margin-top:6px; color:var(--paper); font-size:12.5px; line-height:1.55; }
@media (max-width:430px) { .memorial-head { flex-direction:column; gap:1px; } }
/* N5 幕间史书过场 */
.chronicle-panel { background-image:url('../assets/bg/bg_overlay.png'); background-size:cover; }
.chronicle-page { position:relative; padding:18px 16px 16px; border-radius:8px; background:linear-gradient(180deg,rgba(53,36,19,.96),rgba(25,16,8,.96));
  border:1px solid rgba(232,196,90,.48); box-shadow:inset 0 0 28px rgba(0,0,0,.28),0 10px 24px rgba(0,0,0,.55); animation:chronicle-turn .34s ease-out; overflow:hidden; }
.chronicle-page::before { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(255,242,184,.08),transparent 18%,transparent 82%,rgba(0,0,0,.18)); }
.chronicle-seal { position:absolute; right:12px; top:10px; width:52px; height:52px; border:2px solid rgba(210,66,48,.72); border-radius:7px; display:flex; align-items:center; justify-content:center;
  color:#e07058; font-family:var(--brush); font-size:11px; line-height:1.15; text-align:center; transform:rotate(4deg); opacity:.82; }
.chronicle-page h2 { margin:2px 58px 4px 0; font-size:24px; }
.chronicle-era { color:var(--gold-bright); font-size:12px; letter-spacing:.12em; margin-bottom:10px; }
.chronicle-page p { margin:0; color:#eadbbc; font-size:14px; line-height:1.75; text-align:left; }
.chronicle-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:14px 0 12px; }
.chronicle-stats span { background:rgba(0,0,0,.25); border:1px solid rgba(201,162,39,.2); border-radius:6px; padding:5px 3px; text-align:center; font-size:11px; color:var(--paper-dim); }
.chronicle-stats b { display:block; color:var(--gold-bright); font-size:15px; margin-top:1px; }
.chronicle-go { width:100%; }
@keyframes chronicle-turn { 0%{opacity:0; transform:perspective(600px) rotateY(-9deg) translateY(6px)} 100%{opacity:1; transform:none} }
.lowfx .chronicle-page { animation:none; }
@media (max-width:430px) {
  .chronicle-page { padding:16px 12px 12px; }
  .chronicle-page h2 { font-size:21px; }
  .chronicle-page p { font-size:13px; }
}
/* N3 职业开场卷轴 */
.campaign-story-panel { background-image:url('../assets/bg/bg_overlay.png'); background-size:cover; }
.campaign-story-page { display:grid; grid-template-columns:minmax(112px,34%) 1fr; gap:14px; align-items:stretch; max-width:560px; margin:0 auto; }
.cs-art { position:relative; min-height:270px; border-radius:8px; overflow:hidden;
  background:linear-gradient(180deg,rgba(62,38,18,.72),rgba(10,7,4,.92));
  border:1px solid rgba(201,162,39,.34); box-shadow:inset 0 0 24px rgba(0,0,0,.38),0 8px 18px rgba(0,0,0,.45); }
.cs-art::after { content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(7,5,3,.72)),radial-gradient(circle at 50% 18%,rgba(240,207,110,.14),transparent 48%); }
.cs-art img { width:100%; height:100%; object-fit:cover; object-position:50% 18%; display:block; filter:saturate(.96) contrast(1.04); }
.cs-scroll { position:relative; min-height:270px; padding:16px 14px 12px; border-radius:8px; overflow:hidden;
  background:linear-gradient(180deg,rgba(58,39,20,.96),rgba(24,16,9,.97));
  border:1px solid rgba(232,196,90,.48); box-shadow:inset 0 0 30px rgba(0,0,0,.28),0 10px 24px rgba(0,0,0,.52);
  animation:chronicle-turn .34s ease-out; }
.cs-scroll::before { content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,rgba(255,242,184,.08),transparent 16%,transparent 84%,rgba(0,0,0,.18)); }
.cs-scroll > * { position:relative; z-index:1; }
.cs-seal { position:absolute; right:12px; top:10px; width:48px; height:48px; border:2px solid rgba(210,66,48,.72); border-radius:7px;
  display:flex; align-items:center; justify-content:center; color:#e07058; font-family:var(--brush); font-size:11px; line-height:1.1; transform:rotate(4deg); opacity:.82; }
.cs-kicker { margin-right:54px; color:var(--paper-dim); font-size:12px; letter-spacing:.08em; }
.cs-scroll h2 { margin:3px 54px 4px 0; font-family:var(--brush-deco); font-size:25px; color:var(--gold-bright); letter-spacing:.06em; }
.cs-caption { color:var(--gold); font-size:13px; letter-spacing:.12em; margin-bottom:9px; }
.cs-scroll p { min-height:108px; color:#eadbbc; font-size:14px; line-height:1.75; text-align:left; }
.cs-foot { display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:center; margin-top:12px; }
.cs-foot span { color:var(--paper-dim); font-size:12px; }
.cs-foot .btn { min-width:76px; }
.campaign-coda { border-color:rgba(120,190,160,.38); }
.companion-dialogue-panel { max-width:560px; }
.companion-dialogue { position:relative; padding:16px 14px 12px; border-radius:8px; overflow:hidden; text-align:left;
  background:linear-gradient(180deg,rgba(54,34,22,.96),rgba(17,16,13,.98));
  border:1px solid rgba(232,196,90,.46); box-shadow:inset 0 0 28px rgba(0,0,0,.28),0 10px 24px rgba(0,0,0,.48); }
.companion-dialogue::before { content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,rgba(255,242,184,.08),transparent 18%,transparent 82%,rgba(0,0,0,.2)); }
.companion-dialogue > * { position:relative; z-index:1; }
.cd-lines { display:grid; gap:8px; margin:12px 0 2px; }
.cd-line { padding:9px 10px; border-radius:7px; background:rgba(0,0,0,.24); border:1px solid rgba(201,162,39,.22); }
.cd-line b { display:block; color:var(--gold-bright); font-size:13px; margin-bottom:4px; }
.cd-line span { display:block; color:#eadbbc; font-size:14px; line-height:1.58; }
.ending-matrix-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:8px; margin:12px 0; max-height:min(58vh,520px); overflow:auto; padding-right:4px; }
.ending-matrix-item { padding:9px 10px; border-radius:7px; background:rgba(0,0,0,.28); border:1px solid rgba(201,162,39,.26); }
.ending-matrix-item b { display:block; color:var(--gold-bright); font-size:13px; margin-bottom:3px; }
.ending-matrix-item span { display:block; color:#eadbbc; font-size:12px; margin-bottom:4px; }
.ending-matrix-item p { color:var(--paper-dim); font-size:11.5px; line-height:1.5; margin:0; text-align:left; }
.lowfx .cs-scroll { animation:none; }
@media (max-width:430px) {
  .campaign-story-page { grid-template-columns:1fr; gap:9px; max-width:100%; }
  .cs-art { min-height:156px; max-height:168px; }
  .cs-art img { object-position:50% 12%; }
  .cs-scroll { min-height:0; padding:13px 12px 11px; }
  .cs-seal { width:42px; height:42px; font-size:10px; }
  .cs-kicker { font-size:11px; margin-right:46px; }
  .cs-scroll h2 { font-size:21px; margin-right:46px; }
  .cs-caption { font-size:12px; margin-bottom:7px; }
  .cs-scroll p { min-height:0; font-size:13px; line-height:1.62; }
  .cs-foot { margin-top:10px; grid-template-columns:1fr auto auto; gap:6px; }
  .cs-foot .btn { min-width:66px; padding-left:10px; padding-right:10px; }
  .companion-dialogue { padding:13px 12px 11px; }
  .cd-lines { gap:7px; margin-top:10px; }
  .cd-line { padding:8px 9px; }
  .cd-line span { font-size:13px; line-height:1.5; }
  .ending-matrix-list { grid-template-columns:1fr; max-height:46vh; margin-bottom:14px; }
}
/* #65 Boss 登场小传 */
.bi-lore { margin:8px auto 4px; max-width:420px; font-size:12.5px; line-height:1.65;
  color:var(--paper-dim); font-style:italic; text-shadow:0 1px 3px #000; }
/* #46 任务进度徽章 */
.quest-chip { display:inline-flex; align-items:center; font-size:12px; font-weight:600; letter-spacing:.03em;
  color:#1a120a; background:linear-gradient(180deg,#e8b04a,#c98a27); border:1px solid #f4d68a;
  border-radius:11px; padding:2px 10px; margin-left:6px; box-shadow:0 1px 4px #000,inset 0 1px 0 rgba(255,255,255,.3); }
/* #58 附魔标记 */
.card.enchanted { box-shadow:0 0 0 1px rgba(240,207,110,.5), 0 0 14px rgba(240,207,110,.35); }
.cc-ench { position:absolute; top:2px; right:4px; z-index:4; font-size:13px; color:#f0cf6e;
  text-shadow:0 0 6px rgba(240,207,110,.9),0 1px 2px #000; pointer-events:none; }
.cc-exhaust { position:absolute; bottom:2px; right:3px; z-index:4; font-size:8px; font-weight:bold;
  letter-spacing:.4px; padding:1px 3px; border-radius:3px; background:rgba(220,100,30,.82);
  color:#fff; text-shadow:0 1px 2px #000; pointer-events:none; }
.cc-upgraded-badge { position:absolute; bottom:2px; left:3px; z-index:4; font-size:9px; font-weight:bold;
  padding:0 3px 1px; border-radius:3px; background:linear-gradient(180deg,#f3d574,#c9a227);
  color:#1a0a00; text-shadow:none; pointer-events:none; line-height:14px; }
/* #179 消耗时触发副行 */
.cc-exhaust-on { font-size:9px; line-height:1.25; text-align:center; padding:2px 4px 1px;
  margin-top:2px; border-top:1px solid rgba(200,155,40,.3);
  color:#c89840; font-style:italic; pointer-events:none; }
/* #84 斩杀演出:白光闪 + 居中巨字 */
.kill-flash { position:absolute; inset:0; z-index:40; pointer-events:none;
  background:radial-gradient(circle at 50% 42%, rgba(255,255,255,.55), rgba(255,240,200,.18) 38%, transparent 62%);
  animation:kill-flash-fade .38s ease-out forwards; }
@keyframes kill-flash-fade { 0%{opacity:0} 18%{opacity:1} 100%{opacity:0} }
.slain-pop { position:absolute; top:34%; left:50%; transform:translate(-50%,-50%); z-index:41; pointer-events:none;
  font-family:var(--brush-deco); font-size:88px; font-weight:bold; letter-spacing:.1em;
  color:#ffd24a; text-shadow:0 0 18px #ff5a2a,0 0 36px rgba(255,90,42,.7),0 4px 10px #000;
  animation:slain-pop-anim .72s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes slain-pop-anim { 0%{opacity:0; transform:translate(-50%,-50%) scale(.3) rotate(-8deg)} 22%{opacity:1; transform:translate(-50%,-50%) scale(1.25) rotate(4deg)} 40%{transform:translate(-50%,-50%) scale(1.05) rotate(-2deg)} 100%{opacity:0; transform:translate(-50%,-58%) scale(1)} }
.lowfx .kill-flash, .lowfx .slain-pop { animation-duration:.3s; }
/* #90 统一转场:切屏淡入上浮(省电模式关闭) */
.screen.screen-in { animation:screen-fade .26s ease-out; }
@keyframes screen-fade { 0%{opacity:0; transform:translateY(7px) scale(.992)} 100%{opacity:1; transform:none} }
.lowfx .screen.screen-in { animation:none; }
/* #86 胜负屏史诗化:卷轴框 + 砸入大字 + 金/残光晕 */
.endscreen { border-width:2px; position:relative; overflow:hidden; }
.endscreen > :not(.end-ritual) { position:relative; z-index:1; }
.endscreen.end-win { border-color:var(--gold-bright);
  box-shadow:inset 0 1px 0 rgba(255,240,190,.3), 0 0 40px rgba(201,162,39,.4), 0 12px 40px rgba(0,0,0,.6); }
.endscreen.end-lose { border-color:#7a3a34;
  box-shadow:inset 0 1px 0 rgba(120,60,50,.25), 0 0 32px rgba(120,30,24,.35), 0 12px 40px rgba(0,0,0,.7); }
.end-ritual { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.end-scroll-paper { position:absolute; left:50%; top:12px; width:min(440px,86%); height:112px; transform:translateX(-50%) scaleX(.08); transform-origin:center;
  border:1px solid rgba(240,207,110,.48); border-radius:8px;
  background:linear-gradient(90deg,rgba(92,56,18,.18),rgba(236,208,139,.2) 15%,rgba(248,226,157,.28) 50%,rgba(236,208,139,.2) 85%,rgba(92,56,18,.18));
  box-shadow:inset 0 0 30px rgba(240,207,110,.18),0 0 24px rgba(201,162,39,.18);
  animation:end-scroll-unfurl .78s cubic-bezier(.18,.82,.22,1) .08s forwards; }
.end-scroll-paper::before, .end-scroll-paper::after { content:''; position:absolute; top:-7px; bottom:-7px; width:18px; border-radius:10px;
  background:linear-gradient(90deg,#422713,#b48945 45%,#2b1a0f); box-shadow:0 2px 8px rgba(0,0,0,.45); }
.end-scroll-paper::before { left:-9px; }
.end-scroll-paper::after { right:-9px; }
.end-scroll-paper i { position:absolute; inset:12px 34px; opacity:.34;
  background:repeating-linear-gradient(0deg,rgba(70,42,19,.18) 0 1px,transparent 1px 12px); }
.end-scroll-paper span { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--brush-deco);
  color:rgba(240,207,110,.24); font-size:42px; letter-spacing:.18em; }
.end-stamp { position:absolute; right:13%; top:62px; width:58px; height:58px; display:flex; align-items:center; justify-content:center;
  font-family:var(--brush-deco); font-size:18px; line-height:1.05; color:#f6d5c8; border:3px solid rgba(185,45,32,.86); border-radius:8px;
  background:rgba(145,23,18,.38); box-shadow:0 0 18px rgba(200,40,30,.38),inset 0 0 16px rgba(90,0,0,.4);
  opacity:0; transform:rotate(-10deg) scale(1.9); animation:end-stamp-drop .48s cubic-bezier(.2,1.4,.3,1) .78s forwards; }
.end-ruin-ritual { opacity:.9; }
.end-broken-halberd { position:absolute; left:50%; top:22%; width:300px; height:138px; transform:translateX(-50%) rotate(-13deg); opacity:.7;
  animation:end-halberd-fall .62s cubic-bezier(.2,.9,.28,1) both; }
.end-broken-halberd::before, .end-broken-halberd i { content:''; position:absolute; height:8px; border-radius:6px;
  background:linear-gradient(180deg,#7a6251,#241812); box-shadow:0 2px 8px rgba(0,0,0,.7); }
.end-broken-halberd::before { left:18px; top:66px; width:128px; transform:rotate(7deg); }
.end-broken-halberd i { right:24px; top:58px; width:112px; transform:rotate(-9deg); }
.end-broken-halberd b { position:absolute; right:2px; top:30px; width:70px; height:58px; clip-path:polygon(0 42%,58% 0,100% 20%,70% 54%,100% 82%,58% 100%);
  background:linear-gradient(135deg,#908a82,#30241c 70%); filter:drop-shadow(0 4px 6px rgba(0,0,0,.65)); }
.end-sand { position:absolute; left:50%; bottom:0; width:120%; height:46%; transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 100%,rgba(150,102,66,.24),transparent 62%),
    repeating-radial-gradient(circle at 50% 100%,rgba(170,118,76,.18) 0 1px,transparent 1px 12px);
  animation:end-sand-drift 1.4s ease-out both; }
.end-ink-fracture { position:absolute; inset:0; opacity:.42; mix-blend-mode:multiply;
  background:linear-gradient(32deg,transparent 0 42%,rgba(10,6,5,.7) 43%,transparent 45%),
    linear-gradient(147deg,transparent 0 50%,rgba(10,6,5,.62) 51%,transparent 53%),
    radial-gradient(circle at 58% 38%,rgba(10,6,5,.45),transparent 16%);
  animation:end-fracture-in .5s ease-out .18s both; }
@keyframes end-scroll-unfurl { to{ transform:translateX(-50%) scaleX(1); } }
@keyframes end-stamp-drop { 0%{opacity:0; transform:translateY(-18px) rotate(-10deg) scale(1.9)} 65%{opacity:1; transform:translateY(3px) rotate(-7deg) scale(.92)} 100%{opacity:.92; transform:translateY(0) rotate(-7deg) scale(1)} }
@keyframes end-halberd-fall { 0%{opacity:0; transform:translate(-50%,-28px) rotate(8deg) scale(1.18)} 100%{opacity:.72; transform:translateX(-50%) rotate(-13deg) scale(1)} }
@keyframes end-sand-drift { from{opacity:0; transform:translate(-50%,20px)} to{opacity:1; transform:translate(-50%,0)} }
@keyframes end-fracture-in { from{opacity:0; filter:blur(8px)} to{opacity:.42; filter:none} }
.end-banner { position:relative; animation:end-slam .5s cubic-bezier(.2,.9,.3,1); }
.end-win .end-banner { color:var(--gold-bright); text-shadow:0 0 18px rgba(240,207,110,.7),0 0 40px rgba(201,162,39,.5),0 4px 10px #000; }
.end-lose .end-banner { color:#d98a82; text-shadow:0 0 16px rgba(180,60,50,.6),0 4px 10px #000; }
@keyframes end-slam { 0%{opacity:0; transform:scale(2.2) translateY(-8px); letter-spacing:.5em} 55%{opacity:1; transform:scale(.92); letter-spacing:.06em} 100%{transform:scale(1)} }
.end-win .end-banner::after { content:''; position:absolute; left:50%; top:50%; width:160%; height:160%;
  transform:translate(-50%,-50%); pointer-events:none; z-index:-1;
  background:radial-gradient(ellipse at center, rgba(240,207,110,.28), transparent 60%); animation:end-glow 2.4s ease-in-out infinite; }
@keyframes end-glow { 0%,100%{opacity:.5} 50%{opacity:1} }
.endscreen .ending-box { animation:screen-fade .5s ease-out .25s both; }
.lowfx .end-banner, .lowfx .endscreen .ending-box, .lowfx .end-scroll-paper, .lowfx .end-stamp, .lowfx .end-broken-halberd, .lowfx .end-sand, .lowfx .end-ink-fracture { animation:none; }
/* #4 通关淡金大印「卧龙吟」(衬于横幅后) */
.end-seal { position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); pointer-events:none; z-index:0;
  font-family:var(--brush-deco); font-size:78px; letter-spacing:.12em; color:rgba(240,207,110,.10);
  text-shadow:0 0 24px rgba(201,162,39,.16); white-space:nowrap; animation:end-seal-in 1.4s ease-out .2s both; }
@keyframes end-seal-in { 0%{opacity:0; transform:translate(-50%,-50%) scale(1.3)} 100%{opacity:1; transform:translate(-50%,-50%) scale(1)} }
/* #4 武将语录字幕 */
.end-quote { max-width:440px; margin:6px auto 10px; text-align:center; font-size:14px; line-height:1.7; letter-spacing:.03em;
  font-style:italic; animation:end-quote-in .8s ease-out .55s both; position:relative; z-index:1; }
.end-win .end-quote { color:#f3e2b0; text-shadow:0 1px 6px rgba(0,0,0,.6); }
.end-lose .end-quote { color:#cbb0aa; text-shadow:0 1px 6px rgba(0,0,0,.7); }
@keyframes end-quote-in { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }
.lowfx .end-seal, .lowfx .end-quote { animation:none; }
/* #4 通关金雨庆典 */
.end-gold-fx { position:fixed; inset:0; z-index:90; pointer-events:none; overflow:hidden; }
.end-gold-fx i { position:absolute; top:-24px; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #fff6cf, #f0cf6e 58%, #c9a227); box-shadow:0 0 9px rgba(232,196,90,.8);
  animation-name:end-gold-fall; animation-timing-function:linear; animation-fill-mode:forwards; }
@keyframes end-gold-fall { 0%{opacity:0; transform:translateY(0) rotate(0)} 10%{opacity:1} 90%{opacity:1} 100%{opacity:0; transform:translateY(106vh) rotate(240deg)} }
.lowfx .end-gold-fx { display:none; }
/* #4 阵殁缓降暗幕(哀) */
.end-lose-veil { position:fixed; inset:0; z-index:49; pointer-events:none; background:rgba(10,7,6,0);
  animation:end-veil-in 1.4s ease forwards; }
@keyframes end-veil-in { from{background:rgba(10,7,6,0); box-shadow:none} to{background:rgba(10,7,6,.18); box-shadow:inset 0 0 220px 60px rgba(0,0,0,.7)} }
.lowfx .end-lose-veil { animation:none; }
/* #59 跨战负面:宝贝行里的顽疾标记(暗红描边+病气脉冲) */
.relic-chip.affliction { border-color:#8a3530 !important; box-shadow:0 0 8px rgba(150,40,32,.55),inset 0 0 6px rgba(120,20,16,.4); filter:saturate(.7); }
.relic-chip.affliction .relic-letter { color:#d98a82; }
/* #17 图鉴条目:稀有度·来源小字 */
.codex-item .ci-meta { font-size:10px; color:var(--paper-dim); letter-spacing:.02em; margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.85; }
/* #66 章节间水墨过场:墨晕扩散覆盖再散开 */
.ink-wipe { position:absolute; inset:0; z-index:55; pointer-events:none;
  background:radial-gradient(circle at 50% 54%, #0a0705 0%, #0a0705 32%, rgba(10,7,5,.85) 50%, transparent 74%);
  animation:ink-wipe-anim .92s ease-in-out forwards; }
@keyframes ink-wipe-anim { 0%{opacity:0; transform:scale(.15)} 28%{opacity:.97; transform:scale(1.35)} 68%{opacity:.97; transform:scale(1.5)} 100%{opacity:0; transform:scale(1.75)} }
.lowfx .ink-wipe { animation-duration:.4s; }
/* A8 水墨转场:地图/战斗/事件硬切统一改为 0.3s 墨晕开合;lowfx 退化为纯淡入淡出。 */
.ink-wipe.screen-wipe { position:fixed; z-index:8500;
  background:
    radial-gradient(circle at 42% 50%, #070503 0 18%, rgba(7,5,3,.96) 31%, rgba(7,5,3,.72) 44%, transparent 66%),
    radial-gradient(circle at 61% 47%, rgba(7,5,3,.94) 0 14%, rgba(7,5,3,.58) 34%, transparent 58%),
    radial-gradient(circle at 52% 58%, rgba(120,25,18,.34) 0 3%, transparent 18%);
  filter:blur(.2px);
  animation:screen-ink-wipe .3s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes screen-ink-wipe {
  0%{opacity:0; transform:scale(.22) rotate(-5deg)}
  42%{opacity:.98; transform:scale(1.24) rotate(1deg)}
  60%{opacity:.92; transform:scale(1.34) rotate(0)}
  100%{opacity:0; transform:scale(1.78) rotate(4deg)}
}
.lowfx .ink-wipe.screen-wipe { background:#080604; filter:none; animation:screen-fade-wipe .3s ease-out forwards; }
@keyframes screen-fade-wipe { 0%{opacity:0} 44%{opacity:.62} 100%{opacity:0} }
/* #48 精英节点:红色危险脉冲,提示高风险高回报(可绕路) */
.mnode.elite-node { border-color:#b5483e; }
.mnode.elite-node::after { content:''; position:absolute; inset:-3px; border-radius:50%; pointer-events:none;
  box-shadow:0 0 10px rgba(200,60,48,.6); animation:elite-pulse 1.7s ease-in-out infinite; }
@keyframes elite-pulse { 0%,100%{box-shadow:0 0 6px rgba(200,60,48,.4)} 50%{box-shadow:0 0 16px rgba(232,80,64,.85)} }
.lowfx .mnode.elite-node::after { animation:none; }
/* #85 新得宝贝仪式:翻入放大 + 金环爆开 */
.relic-chip.relic-new { animation:relic-reveal .7s cubic-bezier(.2,.9,.3,1); z-index:5; }
.relic-chip.relic-new::before { content:''; position:absolute; inset:-6px; border-radius:11px; pointer-events:none;
  border:2px solid var(--ring-col,rgba(240,207,110,.9)); animation:relic-ring .7s ease-out forwards; }
@keyframes relic-reveal { 0%{transform:scale(.2) rotateY(90deg); opacity:0; filter:brightness(2.4)} 45%{transform:scale(1.35) rotateY(0); opacity:1; filter:brightness(1.8)} 70%{transform:scale(.95)} 100%{transform:scale(1); filter:none} }
@keyframes relic-ring { 0%{transform:scale(.5); opacity:.9} 100%{transform:scale(1.9); opacity:0} }
/* #11 获得脉冲按稀有度配色:uncommon蓝 / rare金(默认) / boss紫金双环大演出 */
.relic-chip.r-uncommon.relic-new::before { --ring-col:rgba(143,192,230,.92); }
.relic-chip.r-rare.relic-new::before { --ring-col:rgba(243,213,116,.95); }
.relic-chip.r-boss.relic-new { animation:relic-reveal-boss .85s cubic-bezier(.2,.9,.3,1); }
.relic-chip.r-boss.relic-new::before { --ring-col:rgba(210,120,235,.95); inset:-8px; border-width:2.5px; }
.relic-chip.r-boss.relic-new::after { content:''; position:absolute; inset:-8px; border-radius:13px; pointer-events:none;
  border:2px solid rgba(255,180,90,.85); animation:relic-ring .85s ease-out .12s forwards; }
@keyframes relic-reveal-boss { 0%{transform:scale(.2) rotateY(120deg); opacity:0; filter:brightness(3) drop-shadow(0 0 10px #c878e6)} 45%{transform:scale(1.5) rotateY(0); opacity:1; filter:brightness(2) drop-shadow(0 0 14px #c878e6)} 70%{transform:scale(.92)} 100%{transform:scale(1); filter:none} }
.lowfx .relic-chip.relic-new { animation:none; }
.lowfx .relic-chip.relic-new::before, .lowfx .relic-chip.r-boss.relic-new::after { display:none; }
/* #97 高价值宝贝战中触发:格子轻弹 + 金环一闪(短促,与"新得"大演出区分) */
.relic-chip.relic-proc { animation:relic-proc-pop .6s ease-out; z-index:6; }
.relic-chip.relic-proc::after { content:''; position:absolute; inset:-5px; border-radius:10px; pointer-events:none;
  border:2px solid rgba(243,213,116,.92); animation:relic-proc-ring .6s ease-out forwards; }
.relic-chip.r-boss.relic-proc::after { border-color:rgba(210,120,235,.92); }
@keyframes relic-proc-pop { 0%{transform:scale(1)} 35%{transform:scale(1.22); filter:brightness(1.6)} 100%{transform:scale(1); filter:none} }
@keyframes relic-proc-ring { 0%{transform:scale(.7); opacity:.95} 100%{transform:scale(1.6); opacity:0} }
.lowfx .relic-chip.relic-proc { animation:none; }
.lowfx .relic-chip.relic-proc::after { display:none; }
/* #39 阵营地图皮肤:势力色氛围光(顶部淡晕),不抢底图 */
#s-map::before { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:1;
  background:
    radial-gradient(130% 72% at 50% -8%, color-mix(in srgb,var(--fac-tint,#c9a227) 35%,transparent), transparent 58%),
    radial-gradient(90% 72% at 50% 28%, color-mix(in srgb,var(--map-eco-tint,#c9a227) 22%,transparent), transparent 62%),
    linear-gradient(180deg,var(--map-shade-a,rgba(10,7,4,.50)),var(--map-shade-b,rgba(10,7,4,.72))); }
#s-map::after { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.2;
  background:linear-gradient(120deg,transparent 0 44%,color-mix(in srgb,var(--map-eco-tint,#c9a227) 16%,transparent) 50%,transparent 58%); }
#s-map > * { position:relative; z-index:1; }
/* #82 出牌落点粒子:9 颗向外飞溅,按类型配色 */
.card-fx i { position:absolute; left:0; top:0; width:7px; height:7px; margin:-3.5px; border-radius:50%;
  transform:rotate(var(--ang)) translateX(0); animation:card-fx-fly .6s ease-out forwards; }
@keyframes card-fx-fly { 0%{opacity:0; transform:rotate(var(--ang)) translateX(2px) scale(.4)} 25%{opacity:1} 100%{opacity:0; transform:rotate(var(--ang)) translateX(46px) scale(.9)} }
.card-fx.fx-slash i { background:#fff; box-shadow:0 0 6px #fff; }
.card-fx.fx-poison i { background:#6fe08a; box-shadow:0 0 8px #4ad06a; }
.card-fx.fx-fire i { background:#ff9a3a; box-shadow:0 0 9px #ff5a20; width:8px; height:8px; }
.card-fx.fx-array i { background:#7fc7ff; box-shadow:0 0 8px #3e8eff; }
.card-fx.fx-gold i { background:#f0cf6e; box-shadow:0 0 8px #c9a227; }
/* #143 消耗牌橙红爆炸粒子 */
.card-fx.fx-exhaust i { background:#ff5a1a; box-shadow:0 0 10px #ff3300; width:9px; height:9px; }
.card-fx.fx-exhaust i:nth-child(even) { background:#ff9330; box-shadow:0 0 8px #ff6600; }
.card-fx.fx-exhaust i { animation-duration:.78s; animation-timing-function:cubic-bezier(.2,0,.8,1); }
@keyframes exhaust-flash { 0%{opacity:0;transform:scale(.5)} 15%{opacity:1;transform:scale(1.15)} 60%{opacity:.7} 100%{opacity:0;transform:scale(.9)} }
.lowfx .card-fx { display:none; }
/* #12 喝药粒子:从药水槽向上喷出对应色粒子 */
.potion-fx i { position:absolute; left:0; top:0; width:8px; height:8px; margin:-4px; border-radius:50%;
  background:var(--pc,#cfe0ff); box-shadow:0 0 9px var(--pc,#cfe0ff);
  animation:potion-fx-fly .62s cubic-bezier(.25,.6,.4,1) forwards; }
@keyframes potion-fx-fly { 0%{opacity:0; transform:translate(0,0) scale(.5)} 18%{opacity:1} 100%{opacity:0; transform:translate(var(--dx),var(--dy)) scale(1)} }
.lowfx .potion-fx { display:none; }
/* #13 牌堆扇形展开预览 */
.pile { cursor:pointer; }
.pile-fan-ov { position:fixed; inset:0; z-index:150; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 46%,rgba(12,9,6,.80),rgba(6,4,3,.94)); animation:pf-fade .18s ease-out; }
@keyframes pf-fade { from{opacity:0} to{opacity:1} }
.pile-fan-head { color:var(--gold-bright,#f0cf6e); font-size:20px; letter-spacing:4px; margin-bottom:22px; text-shadow:0 2px 7px #000; }
.pile-fan { position:relative; display:flex; align-items:flex-end; justify-content:center; flex-wrap:nowrap; max-width:94vw; }
.pile-fan .card { margin:0 -26px; transform-origin:bottom center; transition:transform .14s ease, margin .14s ease; cursor:pointer; flex:0 0 auto; }
.pile-fan .card:hover { transform:translateY(-30px) scale(1.1) !important; z-index:999 !important; margin:0 4px; }
.pile-fan-tip { color:#b8a98a; font-size:12px; margin-top:24px; letter-spacing:1px; }
/* #159 弃牌堆/消耗堆可滚动网格 */
.pile-tools { width:min(92vw,720px); display:grid; grid-template-columns:repeat(3,minmax(92px,1fr)) minmax(120px,1.4fr); gap:6px; margin:-10px 0 12px; }
.pile-filter, .pile-search { min-width:0; height:32px; border:1px solid rgba(240,207,110,.34); border-radius:6px; background:rgba(24,18,12,.82); color:var(--paper,#eadfca); padding:0 8px; font-size:12px; }
.pile-search::placeholder { color:rgba(234,223,202,.55); }
.pile-filter:focus-visible, .pile-search:focus-visible { outline:2px solid var(--gold-bright,#f0cf6e); outline-offset:1px; }
.pile-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; max-width:92vw; max-height:62vh; overflow-y:auto; padding:4px 8px 8px; }
.pile-grid .card { cursor:pointer; flex:0 0 auto; }
.pile-grid .card:hover { transform:scale(1.08); z-index:10; }
.pile-card-hov { animation:chp-in .1s ease-out; }
.pile-close-btn { margin-top:14px; }
.lowfx .pile-fan-ov { animation:none; }
@media (max-width:480px) {
  .pile-tools { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pile-search { grid-column:1 / -1; }
}
/* #1 手牌悬停大预览:大卡 + 升级后对比 + 关键词高亮 */
.card-hover-preview { position:fixed; z-index:130; pointer-events:none; display:flex; gap:10px; align-items:flex-start; animation:chp-in .12s ease-out; }
@keyframes chp-in { from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:translateY(0)} }
.card-hover-preview .bigcard { box-shadow:0 12px 36px rgba(0,0,0,.72); }
.chp-upgrade { background:rgba(16,12,8,.97); border:1px solid rgba(111,224,138,.5); border-radius:10px; padding:10px 13px; max-width:210px; box-shadow:0 10px 28px rgba(0,0,0,.6); }
.chp-up-head { color:#6fe08a; font-size:13px; font-weight:bold; letter-spacing:2px; margin-bottom:7px; }
.chp-up-text { color:var(--ink-soft,#cbb994); font-size:13px; line-height:1.55; }
.kw-hl { border-bottom:1px dotted var(--gold-bright,#f0cf6e); color:var(--gold-bright,#f0cf6e); cursor:help; touch-action:manipulation; }
/* 关键字高亮的金色是按**深色 tooltip** 调的;但卡面/大卡是浅褐纸底(#efe4c8→#d8c9a4),
   金字打上去几乎看不见(玩家反馈「黄字根本看不清是什么」)。卡面语境改用深赭红:
   在浅底上对比足够、又不和正文的深褐(#2a2012)混淆,仍能一眼看出是关键字。 */
.card .kw-hl, .bigcard .kw-hl { color:#8c3a17; border-bottom-color:rgba(140,58,23,.55); }
.kw-hl:focus-visible { outline:1px solid rgba(240,207,110,.75); outline-offset:2px; border-radius:3px; }
.lowfx .card-hover-preview { animation:none; }
/* #22 成就达成弹窗:图标 + 金边一闪 */
.ach-toast { position:fixed; left:50%; top:84px; transform:translate(-50%,-18px); z-index:160; display:flex; align-items:center; gap:12px;
  padding:11px 20px 11px 14px; border-radius:12px; background:linear-gradient(180deg,#2a1f12,#1a1209); border:1.5px solid var(--gold-bright,#f0cf6e);
  box-shadow:0 8px 30px rgba(0,0,0,.6),0 0 22px rgba(232,196,90,.4); opacity:0; transition:opacity .3s, transform .3s; pointer-events:none; }
.ach-toast.show { opacity:1; transform:translate(-50%,0); }
.ach-toast-ico { font-size:30px; line-height:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.ach-toast-body { display:flex; flex-direction:column; gap:2px; }
.ach-toast-tag { font-size:11px; letter-spacing:2px; color:var(--gold-bright,#f0cf6e); }
.ach-toast-name { font-family:var(--brush-deco); font-size:17px; color:#f3e2b0; }
.ach-flash { position:fixed; inset:0; z-index:159; pointer-events:none; border:2px solid var(--gold-bright,#f0cf6e); border-radius:2px;
  box-shadow:inset 0 0 28px rgba(232,196,90,.45); animation:ach-flash-fade .55s ease-out forwards; }
@keyframes ach-flash-fade { 0%{opacity:0} 25%{opacity:1} 100%{opacity:0} }
.lowfx .ach-flash { display:none; }
@keyframes m-line-pop { from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:translateY(0)} }
/* #15 行商立绘摇晃 */
.merchant-img.swaying { animation:merchant-sway .9s ease-in-out; transform-origin:bottom center; }
@keyframes merchant-sway { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-2.4deg)} 60%{transform:rotate(1.8deg)} 85%{transform:rotate(-.8deg)} }
.lowfx .merchant-img.swaying { animation:none; }
/* #18 收藏完成度总览 */
.prog-collect { margin-bottom:12px; padding:10px 12px; border-radius:9px; background:rgba(0,0,0,.28);
  border:1px solid rgba(201,162,39,.3); }
.prog-collect .cmp-head { font-size:15px; color:var(--gold-bright); letter-spacing:.04em; margin-bottom:8px; }
.prog-collect .cmp-head b { float:right; }
.prog-collect .cmp-row { display:flex; align-items:center; gap:8px; font-size:12px; margin:5px 0; color:var(--paper); }
.prog-collect .cmp-row span { width:64px; flex-shrink:0; }
.prog-collect .cmp-row em { font-style:normal; color:var(--paper-dim); width:54px; text-align:right; flex-shrink:0; }
.progress-dashboard { margin:8px 0 14px; display:grid; grid-template-columns:1fr; gap:9px; }
.pd-title { text-align:center; color:var(--gold-bright); font-family:var(--brush); font-size:16px; letter-spacing:.12em; }
.pd-section { padding:8px 10px; border:1px solid rgba(201,162,39,.2); border-radius:7px; background:rgba(0,0,0,.2); }
.pd-subtitle { color:var(--paper); font-size:12px; letter-spacing:.08em; margin-bottom:6px; opacity:.92; }
.pd-rate-row, .pd-card-row { display:grid; grid-template-columns:minmax(58px,86px) 1fr 38px 44px; align-items:center; gap:7px; margin:4px 0; font-size:11.5px; color:var(--paper-dim); }
.pd-card-row { grid-template-columns:minmax(90px,130px) 1fr 34px; }
.pd-rate-row span, .pd-card-row span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--paper); }
.pd-rate-row b, .pd-card-row b { text-align:right; color:var(--gold-bright); font-family:var(--brush); font-size:12px; }
.pd-rate-row em { text-align:right; font-style:normal; color:var(--paper-dim); font-size:11px; }
.pd-rate-bar, .pd-card-bar { height:8px; border:1px solid rgba(201,162,39,.18); border-radius:4px; overflow:hidden; background:rgba(0,0,0,.34); }
.pd-rate-bar i, .pd-card-bar i { display:block; height:100%; min-width:1px; background:linear-gradient(90deg,#9fbf68,#e0bb48); }
.pd-card-bar i { background:linear-gradient(90deg,#6aa5c8,#d6a63a); }
.pd-dots { display:flex; align-items:flex-end; gap:3px; min-height:38px; padding:4px 1px; border-bottom:1px solid rgba(201,162,39,.16); }
.pd-dots span { flex:1; min-width:4px; max-width:11px; border-radius:4px 4px 1px 1px; background:#a34a3f; opacity:.82; }
.pd-dots span.win { background:#d6a63a; box-shadow:0 0 6px rgba(214,166,58,.25); }
.pd-trend-note { text-align:center; color:var(--paper-dim); font-size:11px; margin-top:5px; }
.pd-deaths { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pd-deaths .pd-subtitle { grid-column:1/-1; margin-bottom:0; }
.pd-rank-title { color:var(--gold-bright); font-size:11px; margin-bottom:3px; }
.pd-rank-row { display:flex; justify-content:space-between; gap:8px; font-size:11.5px; color:var(--paper-dim); padding:2px 0; border-bottom:1px solid rgba(201,162,39,.08); }
.pd-rank-row span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pd-rank-row b { color:var(--paper); }
@media (min-width:760px){
  .progress-dashboard { grid-template-columns:1fr 1fr; }
  .pd-title { grid-column:1/-1; }
}
.cmp-bar { flex:1; height:8px; border-radius:4px; background:rgba(0,0,0,.45); overflow:hidden; border:1px solid rgba(201,162,39,.25); }
.cmp-bar i { display:block; height:100%; background:linear-gradient(90deg,#c9a227,#f0cf6e); border-radius:4px; transition:width .4s; }
/* #9 自定义挑战:突变多选 */
.cm-muts { display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin:10px 0; }
.cm-mut.active { border-color:var(--gold-bright); background:linear-gradient(180deg,#54402b,#332112);
  box-shadow:inset 0 1px 0 rgba(255,240,190,.4),0 0 12px rgba(201,162,39,.4); color:var(--gold-bright); }
.cm-desc { min-height:1.2em; text-align:left; max-width:380px; margin:0 auto 6px; font-size:12.5px; }
/* #186 自定义挑战:难度旋钮 */
.cm-knobs { display:flex; flex-direction:column; gap:6px; margin:8px 0; }
.cm-knob-row { display:flex; align-items:center; gap:6px; }
.cm-knob-label { font-size:12px; color:var(--gold-dim); min-width:60px; text-align:right; }
.cm-knob-opt { flex:1; font-size:11px; padding:3px 6px; }
.cm-knob-opt.active { border-color:#7bc8ff; background:linear-gradient(180deg,#1a3550,#0d2035);
  color:#7bc8ff; box-shadow:0 0 8px rgba(80,160,255,.4); }
.cm-sep { border-top:1px solid rgba(201,162,39,.2); margin:8px 0 4px; }
/* #3 每职业进阶徽章(点将屏武将卡) */
.hero-card .hero-asc { margin-top:2px; font-size:11px; color:var(--gold-bright); letter-spacing:.04em;
  background:rgba(201,162,39,.18); border:1px solid rgba(201,162,39,.4); border-radius:9px; padding:0 7px; display:inline-block; }
/* #38 阵营声望:点将屏势力描述下的声望/特典行 */
.fac-rep { display:inline-block; margin-top:3px; font-size:11px; color:var(--gold-bright); letter-spacing:.03em; opacity:.92; }
/* #93 关键字词条 */
.kw-list { display:flex; flex-direction:column; gap:5px; margin-bottom:8px; }
.kw-item { border-left:3px solid rgba(201,162,39,.4); padding:3px 0 3px 9px; }
.kw-item .kw-name { font-family:var(--brush-deco); font-size:15px; color:var(--gold-bright); letter-spacing:.04em; }
.kw-item .kw-desc { font-size:12px; color:var(--paper-dim); line-height:1.5; }
.kw-item.kw-debuff { border-left-color:rgba(232,85,74,.55); } .kw-item.kw-debuff .kw-name { color:#ff8a7a; }
.kw-item.kw-engine { border-left-color:rgba(120,180,232,.5); } .kw-item.kw-engine .kw-name { color:#8ec5ff; }
.kw-item.kw-boss { border-left-color:rgba(180,120,232,.5); } .kw-item.kw-boss .kw-name { color:#c79cff; }
/* #62 武将列传:分章列传 */
.hl-progress { display:inline-flex; align-items:center; margin-top:6px; padding:2px 8px; border-radius:6px;
  border:1px solid rgba(201,162,39,.28); background:rgba(0,0,0,.22); color:var(--paper-dim); font-size:11px; }
.hl-chapters { margin-top:6px; display:flex; flex-direction:column; gap:7px; }
.hl-chap { border-left:2px solid rgba(201,162,39,.45); padding:1px 0 1px 9px; }
.hl-chap-t { font-family:var(--brush-deco); font-size:14px; color:var(--gold-bright); letter-spacing:.06em; margin-bottom:1px; }
.hl-chap-x { font-size:12px; color:var(--paper-dim); line-height:1.55; }
.hl-chap.locked { border-left-color:rgba(120,106,74,.5); opacity:.72; }
.hl-chap.locked .hl-chap-t { color:#9c8a5c; }
.hl-chap-locked { font-style:italic; color:#8a7a5a; }
/* #87 珍品现世:战利含稀有牌时的一次性金光迸发 */
.rare-reveal-burst { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:40; pointer-events:none;
  background:radial-gradient(circle at 50% 42%, rgba(232,196,90,.32), transparent 60%); animation:rrb-fade 1.4s ease-out forwards; }
.rare-reveal-burst .rrb-text { font-family:var(--brush-deco); font-size:34px; color:var(--gold-bright); letter-spacing:.14em;
  text-shadow:0 0 18px rgba(232,196,90,.9),0 2px 6px #000; animation:rrb-pop 1.4s cubic-bezier(.2,.9,.3,1) forwards; }
@keyframes rrb-fade { 0%{opacity:0;} 12%{opacity:1;} 70%{opacity:1;} 100%{opacity:0;} }
@keyframes rrb-pop { 0%{transform:scale(.4) translateY(8px);opacity:0;} 22%{transform:scale(1.15);opacity:1;} 40%{transform:scale(1);} 80%{transform:scale(1);opacity:1;} 100%{transform:scale(1.04) translateY(-10px);opacity:0;} }
.lowfx .rare-reveal-burst { display:none; }
/* #16 敌人图鉴:遭遇/击杀解锁式呈现 */
.codex-bestiary-stat { text-align:center; color:var(--gold-bright); font-size:13px; letter-spacing:.06em; margin:2px 0 8px; opacity:.9; }
.codex-item.bestiary-unseen { filter:grayscale(1) brightness(.55); opacity:.7; }
.bestiary-mystery { display:flex; align-items:center; justify-content:center; font-family:var(--brush-deco); font-size:34px; color:#7a6a4a; }
.bestiary-filter-bar { display:flex; gap:4px; flex-wrap:wrap; margin:4px 0 8px; justify-content:center; }
.bestiary-filter.active { background:var(--gold); color:#1a0a00; }
.act-badge { display:inline-block; font-size:10px; background:rgba(255,255,255,.12); color:var(--fg-muted); border-radius:3px; padding:0 3px; margin-right:3px; vertical-align:middle; letter-spacing:.02em; }
.slain-tag { font-size:10px; color:var(--red-bright); letter-spacing:.04em; white-space:nowrap; }
/* #60 目标指示:瞄准镜 + 伤害预览 */
.efighter .target-reticle { position:absolute; top:46%; left:50%; transform:translate(-50%,-50%) scale(.8); z-index:6;
  font-size:40px; color:var(--red-bright); opacity:0; transition:opacity .12s, transform .12s; pointer-events:none;
  text-shadow:0 0 10px rgba(232,85,74,.9),0 1px 3px #000; }
.efighter.targetable:hover .target-reticle { opacity:.95; transform:translate(-50%,-50%) scale(1.05); animation:reticle-spin 3s linear infinite; }
.efighter.targetable:hover .eportrait { box-shadow:0 0 0 3px var(--red-bright),0 0 22px rgba(232,85,74,.85); }
@keyframes reticle-spin { from { transform:translate(-50%,-50%) rotate(0deg) scale(1.05); } to { transform:translate(-50%,-50%) rotate(360deg) scale(1.05); } }
.efighter .dmg-preview { position:absolute; top:-8px; right:4px; z-index:7; max-width:148px; text-align:right; pointer-events:none;
  color:#ffd24a; text-shadow:0 0 8px rgba(232,85,74,.9),0 2px 3px #000; }
.efighter .dmg-total { font-family:var(--brush-deco); font-weight:bold; font-size:19px; line-height:1; }
.efighter .dmg-formula { margin-top:2px; padding:2px 4px; border:1px solid rgba(255,210,74,.45); border-radius:4px;
  background:rgba(34,12,8,.82); color:#fff1b8; font-family:var(--font-body); font-size:10px; line-height:1.2;
  white-space:normal; overflow-wrap:anywhere; box-shadow:0 2px 8px rgba(0,0,0,.45); }
.efighter.targetable:hover .dmg-preview { color:#ff5436; transform:scale(1.08); transform-origin:top right; }
/* #11 解锁系统:图鉴未解锁内容灰显 + 🔒 角标 */
/* #150 图鉴:卡牌出牌次数角标 */
.codex-plays { position:absolute; bottom:2px; right:2px; background:rgba(0,0,0,.72); color:var(--gold-bright); font-size:9px; line-height:1; padding:1px 3px; border-radius:3px; pointer-events:none; z-index:5; }
/* #189 卡牌注释 */
.card-note-dot { position:absolute; top:2px; left:2px; background:rgba(80,140,240,.85); color:#fff; font-size:9px; line-height:1; padding:1px 3px; border-radius:3px; pointer-events:none; z-index:5; cursor:default; }
.card-note-editor { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:9999; background:var(--panel-bg); border:1px solid var(--gold-dim); border-radius:10px; padding:14px 16px; min-width:240px; max-width:320px; box-shadow:0 8px 30px rgba(0,0,0,.7); }
.cne-title { font-weight:bold; font-size:13px; color:var(--gold-bright); margin-bottom:8px; }
.cne-input { width:100%; box-sizing:border-box; background:rgba(0,0,0,.4); border:1px solid rgba(201,162,39,.3); border-radius:6px; color:var(--paper); padding:6px 8px; font-size:12px; resize:vertical; min-height:60px; margin-bottom:8px; }
.cne-row { display:flex; gap:6px; justify-content:flex-end; }
.codex-locked { position:relative; filter:grayscale(1) brightness(.5) contrast(.85); opacity:.8; }
.codex-locked::after { content:'🔒'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:22px; filter:none; opacity:1; text-shadow:0 1px 4px #000; z-index:4; pointer-events:none; }
/* #158 淬火·再升级 */
.card.upgraded2 { box-shadow: 0 0 0 2px #f0cf6e, 0 0 8px 2px rgba(240,207,110,.5); }
.smith-divider { text-align:center; font-size:12px; color:var(--gold-bright); letter-spacing:.1em; margin:12px 0 6px; opacity:.85; }
/* #154 速通计时赛 */
.speedrun-result { margin:8px auto 14px; max-width:320px; text-align:center; padding:10px 16px; border-radius:10px; background:rgba(0,0,0,.3); border:1px solid rgba(201,162,39,.3); }
.sr-label { font-size:12px; color:var(--paper-dim); letter-spacing:.08em; margin-bottom:4px; }
.sr-time-big { font-family:var(--brush-deco); font-size:36px; color:var(--gold-bright); line-height:1.1; }
.sr-pr-tag { margin-top:6px; font-size:13px; color:var(--paper-dim); }
.sr-pr-tag.sr-new-best { color:var(--gold-bright); font-weight:bold; }
.sr-best-line { text-align:center; font-size:13px; color:var(--paper-dim); margin:6px 0 4px; min-height:1.4em; }
/* D8 计分系统 */
.run-score-box, .score-summary, .score-section { margin:8px auto; max-width:420px; width:100%; }
.run-score-box { padding:10px 12px; border:1px solid rgba(201,162,39,.35); border-radius:8px; background:rgba(0,0,0,.28); }
.rs-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; color:var(--paper-dim); }
.rs-head b { font-family:var(--brush-deco); font-size:34px; color:var(--gold-bright); line-height:1; }
.rs-parts { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.rs-parts span { flex:1 1 92px; min-width:0; display:flex; justify-content:space-between; gap:6px; padding:4px 6px; border:1px solid rgba(201,162,39,.18); border-radius:4px; color:var(--paper-dim); font-size:11px; background:rgba(0,0,0,.22); }
.rs-parts b { color:var(--paper); }
.score-board { display:flex; flex-direction:column; gap:8px; }
.score-summary { text-align:center; color:var(--gold-bright); font-family:var(--brush-deco); font-size:22px; letter-spacing:.06em; }
.score-section { padding:8px; border:1px solid rgba(201,162,39,.22); border-radius:8px; background:rgba(0,0,0,.22); }
.score-row { display:grid; grid-template-columns:34px minmax(58px,1fr) minmax(92px,1.2fr) minmax(54px,.8fr) minmax(45px,.7fr); align-items:center; gap:6px; padding:6px 0; border-top:1px solid rgba(201,162,39,.12); font-size:12px; }
.score-row:first-of-type { border-top:0; }
.score-rank { color:var(--gold-bright); font-family:var(--brush-deco); }
.score-hero, .score-meta { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.score-row b { color:var(--paper); text-align:right; }
.score-row em { color:var(--paper-dim); font-style:normal; text-align:right; }
.score-row.win .score-meta { color:#d9c07a; }
.score-row.lose .score-meta { color:#bcae94; }
.hr-score { color:var(--gold-bright); font-weight:bold; min-width:42px; text-align:right; }
/* #187 名将录 */
.hof-title { color:var(--gold-bright); margin-bottom:10px; }
.hof-list { display:flex; flex-direction:column; gap:7px; max-height:55vh; overflow-y:auto; padding:2px 0; width:100%; }
.hof-row { display:flex; align-items:flex-start; gap:10px; padding:8px 10px; background:rgba(0,0,0,.25); border:1px solid rgba(201,162,39,.2); border-radius:6px; }
.hof-rank { font-family:var(--brush-deco); font-size:18px; color:var(--paper-dim); min-width:28px; text-align:center; margin-top:2px; }
.hof-rank.hof-gold { color:var(--gold-bright); text-shadow:0 0 8px rgba(255,200,50,.5); }
.hof-info { flex:1; min-width:0; }
.hof-hero { font-weight:bold; font-size:14px; color:var(--paper); margin-bottom:2px; }
.hof-details { font-size:11.5px; color:var(--paper-dim); margin-bottom:2px; }
.hof-relics { font-size:11px; color:var(--gold-dim); margin-bottom:2px; }
.hof-seed { font-size:10.5px; }
.hof-empty { text-align:center; padding:20px 0; }
/* N19 开发者博物馆 */
.dev-museum-panel { max-width:min(760px,96vw); }
.museum-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; width:100%; max-height:56vh; overflow-y:auto; padding:2px 2px 6px; }
.museum-section { min-width:0; display:flex; flex-direction:column; gap:7px; }
.museum-section-title { color:var(--gold-bright); font-family:var(--brush-deco); font-size:16px; letter-spacing:.08em; text-align:center; padding-bottom:4px; border-bottom:1px solid rgba(201,162,39,.28); }
.museum-card { padding:8px 9px; border:1px solid rgba(201,162,39,.22); border-radius:7px; background:rgba(0,0,0,.24); }
.museum-card-head { display:flex; align-items:center; gap:6px; margin-bottom:4px; color:var(--paper); font-size:12px; line-height:1.25; }
.museum-card-head b { color:var(--gold-bright); font-family:var(--brush-deco); font-size:15px; flex:0 0 auto; }
.museum-card-head span { min-width:0; overflow-wrap:anywhere; }
.museum-card p { margin:0; color:var(--paper-dim); font-size:11.5px; line-height:1.45; overflow-wrap:anywhere; }
@media (max-width:640px) {
  .museum-grid { grid-template-columns:1fr; max-height:60vh; }
}
/* #53 精英狂暴:持续红化 + 浮字 */
.efighter.enraged { filter:drop-shadow(0 0 8px rgba(220,60,40,.85)) saturate(1.25); }
.efighter.enraged .ename { color:#ff6a4d; text-shadow:0 0 8px rgba(220,40,30,.8); }
.enrage-pop { position:absolute; top:-6px; left:50%; transform:translateX(-50%); z-index:25;
  font-family:var(--brush-deco); font-size:24px; color:#ff5436; letter-spacing:.12em; white-space:nowrap;
  text-shadow:0 0 10px rgba(255,60,30,.9),0 2px 4px #000; pointer-events:none; animation:enrage-pop 1.1s ease-out forwards; }
@keyframes enrage-pop { 0%{opacity:0;transform:translateX(-50%) scale(.5);} 22%{opacity:1;transform:translateX(-50%) scale(1.18);}
  40%{transform:translateX(-50%) scale(1);} 100%{opacity:0;transform:translateX(-50%) translateY(-26px) scale(1);} }
/* #79 起始宝贝 3 选 1 */
.starter-relic-pick { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:14px 0 10px; }
/* 加了左侧图标后 44vw 太窄:名字折行、说明挤成一条。放宽到窄屏一行一张(94vw),桌面仍是三张并排。 */
.starter-relic-card { width:264px; max-width:min(94vw,300px); min-height:96px; text-align:left; padding:12px 14px; display:flex; flex-direction:column; gap:7px;
  background:rgba(0,0,0,.32); border:1px solid rgba(201,162,39,.42); border-radius:12px; white-space:normal; line-height:1.45; transition:transform .12s, box-shadow .12s, border-color .12s; }
.starter-relic-card:hover { border-color:var(--gold-bright); transform:translateY(-3px); box-shadow:0 8px 20px #000,0 0 14px rgba(201,162,39,.3); }
.starter-relic-card .srn { font-family:var(--brush-deco); font-size:19px; color:var(--gold-bright); }
.starter-relic-card .srt { font-size:12px; color:var(--paper-dim); }
/* 起始宝贝卡:左图右文(此前只有个 ◈ 符号,选的时候看不到宝贝长什么样) */
.starter-relic-card { flex-direction:row !important; align-items:center; gap:12px !important; }
/* 和 .relic-chip 同理:图标本身就是圆角卡片,外面别再套圆圈(否则圆裁方角、双层框) */
.starter-relic-card .sr-ico { flex:none; width:52px; height:52px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background:none; border:2px solid rgba(201,162,39,.75); overflow:hidden; }
.starter-relic-card .sr-ico img { width:100%; height:100%; object-fit:cover; }
.starter-relic-card .sr-body { display:flex; flex-direction:column; gap:5px; min-width:0; }
/* #57 战场地形横幅 */
.terrain-banner { position:absolute; top:8px; left:50%; transform:translateX(-50%); z-index:30;
  display:flex; align-items:center; gap:8px; max-width:90vw; padding:7px 16px;
  background:linear-gradient(rgba(30,22,12,.92),rgba(18,12,6,.92)); border:1px solid var(--gold-bright); border-radius:20px;
  box-shadow:0 4px 16px #000,0 0 14px rgba(201,162,39,.3); animation:terrain-in .5s cubic-bezier(.2,.9,.3,1);
  transition:opacity .8s, transform .8s; pointer-events:none; }
.terrain-banner.fade { opacity:0; transform:translateX(-50%) translateY(-8px); }
.terrain-banner .tb-icon { font-size:18px; }
.terrain-banner .tb-name { font-family:var(--brush-deco); font-size:17px; color:var(--gold-bright); }
.terrain-banner .tb-desc { font-size:12px; color:var(--paper-dim); }
@keyframes terrain-in { from { opacity:0; transform:translateX(-50%) translateY(-14px) scale(.96); } to { opacity:1; transform:translateX(-50%) translateY(0) scale(1); } }
@media (max-width:600px){ .terrain-banner .tb-desc { display:none; } }
/* #70 通关史诗演出:天下归一卷轴徐徐展开 */
.victory-scroll { background:radial-gradient(circle at 50% 40%, rgba(60,40,16,.6), rgba(10,7,4,.96)) !important; border-color:var(--gold-bright) !important; box-shadow:0 0 60px rgba(201,162,39,.5) !important; }
.vs-scroll { text-align:center; padding:8px 6px; animation:vs-unfurl .9s cubic-bezier(.2,.8,.3,1); transform-origin:center top; overflow:hidden; }
@keyframes vs-unfurl { 0%{transform:scaleY(.02); opacity:0} 35%{transform:scaleY(1.02); opacity:1} 100%{transform:scaleY(1)} }
.vs-seal { font-family:var(--brush-deco); font-size:26px; color:#e8554a; border:2px solid #b5483e; border-radius:8px; width:64px; height:64px; line-height:60px; margin:0 auto 14px; box-shadow:0 0 16px rgba(200,60,48,.5); animation:vs-fade .6s ease-out .5s both; }
.vs-title { font-family:var(--brush-deco); font-size:clamp(34px,8vw,56px); letter-spacing:.14em; color:var(--gold-bright); text-shadow:0 0 24px rgba(240,207,110,.6),0 4px 12px #000; animation:vs-fade .7s ease-out .6s both; }
.vs-sub { font-family:var(--brush-deco); font-size:19px; letter-spacing:.2em; color:var(--gold); margin-top:8px; animation:vs-fade .7s ease-out .9s both; }
.vs-stamp { width:58px; height:58px; margin:12px auto 0; border:3px solid rgba(190,48,34,.86); border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-family:var(--brush-deco); font-size:17px; color:#ffd8ca; background:rgba(150,28,20,.38); box-shadow:0 0 18px rgba(200,50,36,.4),inset 0 0 14px rgba(80,0,0,.35);
  transform:rotate(-8deg) scale(1.7); opacity:0; animation:vs-stamp-drop .5s cubic-bezier(.25,1.35,.35,1) 1.05s forwards; }
.vs-line { max-width:440px; margin:16px auto 22px; font-size:14px; line-height:1.8; color:var(--paper); opacity:.92; animation:vs-fade .8s ease-out 1.2s both; }
.vs-go { animation:vs-fade .6s ease-out 1.6s both; }
@keyframes vs-fade { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
@keyframes vs-stamp-drop { 0%{opacity:0; transform:translateY(-16px) rotate(-10deg) scale(1.7)} 70%{opacity:1; transform:translateY(2px) rotate(-8deg) scale(.92)} 100%{opacity:1; transform:translateY(0) rotate(-8deg) scale(1)} }
.lowfx .vs-scroll, .lowfx .vs-seal, .lowfx .vs-title, .lowfx .vs-sub, .lowfx .vs-stamp, .lowfx .vs-line, .lowfx .vs-go { animation:none; opacity:1; transform:none; }

/* ============================================================
   视觉打磨补丁 v250  (追加区,勿手动乱序)
   ============================================================ */

/* ── P0: 状态效果颜色标识 ── */
/* 力量(红) */
.pw[class*='buff']:not(.pw-neg) { color:var(--gold-bright); }
.pw.pw-strength  { color:#ff7a6a !important; border-color:rgba(255,90,74,.45) !important; }
.pw.pw-dexterity { color:#7fc7ff !important; border-color:rgba(127,199,255,.40) !important; }
.pw.pw-poison    { color:#6fe08a !important; border-color:rgba(111,224,138,.40) !important; }
.pw.pw-burn      { color:#ff9a3a !important; border-color:rgba(255,154,58,.40) !important; }
.pw.pw-vulnerable{ color:#c87ad6 !important; border-color:rgba(200,122,214,.40) !important; }
.pw.pw-weak      { color:#d0c04a !important; border-color:rgba(208,192,74,.40) !important; }
.pw.pw-thorns    { color:#6fe08a !important; border-color:rgba(111,224,138,.40) !important; }
/* #6 状态色环:补全其余常见状态配色 */
.pw.pw-frail     { color:#9fb4c4 !important; border-color:rgba(159,180,196,.40) !important; }
.pw.pw-disarm    { color:#9a9a9a !important; border-color:rgba(154,154,154,.40) !important; }
.pw.pw-focus     { color:#7fc7ff !important; border-color:rgba(127,199,255,.40) !important; }
.pw.pw-artifact  { color:#f0cf6e !important; border-color:rgba(240,207,110,.45) !important; }
.pw.pw-bleed     { color:#e8554a !important; border-color:rgba(232,85,74,.45) !important; }
.pw.pw-stun      { color:#cbb994 !important; border-color:rgba(203,185,148,.40) !important; }
/* #6 层数≥5:状态图标脉冲提示(高叠层视觉强调) */
.pw.pw-strong { animation:pw-pulse 1.1s ease-in-out infinite; }
@keyframes pw-pulse { 0%,100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); } 50%{ box-shadow:0 0 7px 1px rgba(255,255,255,.35); transform:scale(1.08); } }
/* power 层数 > 0 绿 / < 0 红 — 靠 JS 写 data-val,纯 CSS 兜底用 .buff/.debuff 已有 */
.pw.buff  { color:var(--gold-bright); }
.pw.debuff{ color:#ff7a6a; }

/* P11 色弱安全色板:避免用红/绿作唯一信息通道 */
.cb-safe {
  --red-bright:#ffb84a;
  --azure:#8fc7ff;
}
.cb-safe .hpbar { background:#111a2a; border-color:rgba(143,199,255,.38); }
.cb-safe .hpfill { background:linear-gradient(90deg,#2f6fbd,#5ab7ff); }
.cb-safe .hpbar.danger .hpfill,
.cb-safe .hpbar:has(.hpfill[style*="width: 2"]) .hpfill,
.cb-safe .hpbar:has(.hpfill[style*="width: 1"]) .hpfill {
  background:linear-gradient(90deg,#7651c8,#ffbd4a);
  animation:hp-danger .9s ease-in-out infinite;
}
.cb-safe .hpbar.danger .hptext,
.cb-safe .hpbar:has(.hpfill[style*="width: 2"]) .hptext,
.cb-safe .hpbar:has(.hpfill[style*="width: 1"]) .hptext { color:#fff2b0; }
.cb-safe .intent.atk,
.cb-safe .intent-badge-attack { color:#ffbd4a; border-color:rgba(255,189,74,.58); }
.cb-safe .intent.buff,
.cb-safe .intent-badge-buff { color:#f0cf6e; border-color:rgba(240,207,110,.55); }
.cb-safe .intent.debuff,
.cb-safe .intent-badge-debuff { color:#d7a7ff; border-color:rgba(215,167,255,.56); }
.cb-safe .intent-badge-defend,
.cb-safe .block-badge { color:#bfe6ff; border-color:rgba(111,183,255,.62); background:#19324c; }
.cb-safe .intent-attack-tier-1 { color:#ffe0a3; }
.cb-safe .intent-attack-tier-2 { color:#ffd17a; }
.cb-safe .intent-attack-tier-3 { color:#ffbf58; }
.cb-safe .intent-attack-tier-4 { color:#ffad42; }
.cb-safe .intent-attack-tier-5 { color:#ff9d36; }
.cb-safe .intent-attack-tier-6 { color:#ff8f2e; filter:drop-shadow(0 0 5px rgba(255,160,60,.75)); }
.cb-safe .intent-attack-tier-7 { color:#ff7f25; filter:drop-shadow(0 0 7px rgba(255,145,42,.9)) drop-shadow(0 1px 2px #000); }
.cb-safe .pw.pw-strength  { color:#ffbd4a !important; border-color:rgba(255,189,74,.50) !important; }
.cb-safe .pw.pw-dexterity { color:#8fc7ff !important; border-color:rgba(143,199,255,.48) !important; }
.cb-safe .pw.pw-poison    { color:#66d9e8 !important; border-color:rgba(102,217,232,.48) !important; }
.cb-safe .pw.pw-burn      { color:#ffad42 !important; border-color:rgba(255,173,66,.50) !important; }
.cb-safe .pw.pw-bleed     { color:#d7a7ff !important; border-color:rgba(215,167,255,.50) !important; }
.cb-safe .pw.pw-vulnerable{ color:#d7a7ff !important; border-color:rgba(215,167,255,.48) !important; }
.cb-safe .pw.pw-weak      { color:#f0cf6e !important; border-color:rgba(240,207,110,.48) !important; }
.cb-safe .pw.pw-thorns    { color:#66d9e8 !important; border-color:rgba(102,217,232,.48) !important; }
.cb-safe .pw.debuff { color:#d7a7ff; border-color:rgba(215,167,255,.42); }
.cb-safe .dmg-pop.taken { color:#ffbd4a !important; text-shadow:0 0 10px rgba(255,189,74,.88),0 2px 4px #000 !important; }
.cb-safe .dmg-pop.dot-poison { color:#66d9e8 !important; text-shadow:0 0 9px rgba(102,217,232,.82),0 2px 4px #000 !important; }
.cb-safe .dmg-pop.dot-burn { color:#ffad42 !important; text-shadow:0 0 9px rgba(255,173,66,.82),0 2px 4px #000 !important; }
.cb-safe .dmg-pop.dot-bleed { color:#d7a7ff !important; text-shadow:0 0 9px rgba(180,125,255,.82),0 2px 4px #000 !important; }
.cb-safe .poison-fog::before,
.cb-safe .poison-fog::after { background:rgba(78,202,220,.55); }
.cb-safe .gain-pop.fx-heal { color:#66d9e8; }
.cb-safe .gain-pop.fx-block { color:#8fc7ff; }
.cb-safe .gain-pop.fx-buff { color:#ffbd4a; }
.cb-safe .gain-pop.fx-str-burst { color:#ffad42; text-shadow:0 0 12px rgba(255,173,66,.9),0 0 24px rgba(120,90,210,.55); }
.cb-safe .card-fx.fx-poison i { background:#66d9e8; box-shadow:0 0 8px #66d9e8; }

/* ── P1: 卡牌悬停体验 ── */
/* 更明显的浮起 + 阴影(覆盖原 translateY(-22px) scale(1.06)) */
/* 注意:margin 已挪到 .hand 作用域(见文件上方 .card 处的说明)。这条是通用 .card:hover,
   在牌库/移除/图鉴这些 flex-wrap 网格里也生效——一旦在这里改 margin 就会触发重排、
   鼠标扫过时整行重新折行,牌上下乱跳。此处只保留 transform/阴影这类不影响布局的属性。 */
.card:hover {
  transform:translateY(-28px) scale(1.08);
  z-index:60; /* #18 悬停卡确保盖过所有相邻手牌(原 10 可能被相邻 selected/装饰遮挡) */
  box-shadow:0 12px 28px rgba(0,0,0,.75), 0 0 0 2px rgba(201,162,39,.55), 0 0 16px rgba(201,162,39,.25);
  transition:transform .14s cubic-bezier(.2,.8,.3,1), margin .14s, box-shadow .14s;
}
.hand .card:hover { margin:0 8px; }
/* 选中牌:金光脉冲边框 */
.card.selected {
  transform:translateY(-28px) scale(1.10);
  z-index:40; /* #18 选中牌抬升(高于普通手牌、低于悬停 60),避免被相邻牌压住 */
  box-shadow:0 0 0 3px var(--gold-bright), 0 0 18px rgba(240,207,110,.65), 0 10px 24px #000;
  animation:selected-pulse .7s ease-in-out infinite;
}
.card.selected:hover { z-index:60; } /* 选中且悬停时仍取最高 */
@keyframes selected-pulse {
  0%,100% { box-shadow:0 0 0 3px var(--gold-bright), 0 0 12px rgba(240,207,110,.5), 0 10px 24px #000; }
  50%     { box-shadow:0 0 0 4px var(--gold-bright), 0 0 26px rgba(240,207,110,.85), 0 10px 24px #000; }
}
/* 不可用牌:灰化但保持可读 */
.card.unaffordable {
  filter:grayscale(.65) brightness(.75) saturate(.7);
  opacity:.72;
  cursor:not-allowed;
}
.card.unaffordable:hover {
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 4px 10px rgba(0,0,0,.55);
  filter:grayscale(.55) brightness(.8) saturate(.8);
}
/* 这条负边距原本是用来抵消 .card:hover 的撑开(不让打不起的牌跟着散开)。hover 已不再改 margin,
   所以只需在手牌里把扇形叠放维持住;留在通用 .card 上会把负边距漏回换行网格,重新引发跳动。 */
.hand .card.unaffordable:hover { margin:0 -13px; }
.lowfx .card.selected { animation:none; }

/* ── P1: 意图颜色编码增强 ── */
/* 攻击:明亮红 */
.intent.atk {
  background:rgba(180,30,20,.82);
  border-color:rgba(232,85,74,.65);
  color:#ffa090;
  box-shadow:0 0 8px rgba(232,85,74,.4);
}
.intent.atk.intent-tier-5, .intent.atk.intent-tier-6, .intent.atk.intent-tier-7 {
  border-color:rgba(255,96,64,.78); box-shadow:0 0 12px rgba(232,85,74,.55), inset 0 0 10px rgba(120,12,8,.35);
}
.intent.atk.intent-tier-7 { background:rgba(132,18,14,.9); }
/* 防御/增益:蓝绿 */
.intent.buff {
  background:rgba(20,60,100,.82);
  border-color:rgba(90,160,220,.5);
  color:#9ecfff;
  box-shadow:0 0 8px rgba(62,110,158,.4);
}
/* debuff/其他:紫 */
.intent.debuff {
  background:rgba(70,30,100,.82);
  border-color:rgba(160,100,220,.5);
  color:#c4a0ff;
  box-shadow:0 0 6px rgba(120,60,200,.35);
}

/* ── P1: 能量晶石 — 0 能量时灰化 ── */
/* JS 在 render() 里写 data-energy 属性;纯 CSS selector 匹配 */
.energy.depleted b   { color:#7a7060 !important; }
.energy.depleted     { opacity:.55; filter:grayscale(.7); }
/* 当能量 = 0 时加 .depleted — 通过下方 CSS 变量 hack 也行,但最稳是 JS
   用 :has 特性:如果 b 内容是 "0" 则灰化(Chrome/Safari 现代版本支持) */
.energy:has(b:first-child):not(:has(b + *)):where(.energy) { /* fallback noop */ }

/* ── P1: 回合数指示器 ── */
/* 在 control-bar 里,JS 会给 #energy 加 data-turn 属性后显示 */
.turn-badge {
  position:absolute;
  top:-9px;
  right:-6px;
  background:linear-gradient(180deg,#2a1f14,#14100a);
  border:1px solid rgba(201,162,39,.5);
  border-radius:8px;
  font-size:9px;
  color:var(--paper-dim);
  padding:1px 4px;
  white-space:nowrap;
  pointer-events:none;
  letter-spacing:.03em;
}

/* ── P2: 地图节点强化 ── */
/* 可访问节点:更强发光 + 加大脉动幅度 */
.mnode.avail .mnode-img {
  animation:nodePulse2 1.4s ease-in-out infinite;
}
@keyframes nodePulse2 {
  0%,100% {
    filter:drop-shadow(0 0 7px var(--map-node,var(--gold-bright))) drop-shadow(0 0 3px var(--map-node,var(--gold-bright)));
    transform:scale(1);
  }
  50% {
    filter:drop-shadow(0 0 18px var(--map-node,var(--gold-bright))) drop-shadow(0 0 7px var(--map-node,var(--gold-bright))) drop-shadow(0 0 2px #fff);
    transform:scale(1.10);
  }
}
/* 已访问节点:暗化 + 对号角标 */
.mnode.done { opacity:.38; }
.mnode.done .mnode-img { filter:grayscale(.5) brightness(.65); }
.mnode.done::after {
  content:'✓';
  position:absolute;
  bottom:-5px; right:-5px;
  width:16px; height:16px;
  border-radius:50%;
  background:#2a6638;
  color:#7fe09a;
  font-size:10px;
  line-height:16px;
  text-align:center;
  border:1px solid #4a9a5a;
  pointer-events:none;
  z-index:4;
}
/* Boss 节点特别醒目 — 已有 .boss-node 加红光,补加脉冲放大 */
.mnode.boss-node .mnode-img {
  animation:bossPulse 1.3s ease-in-out infinite !important;
}
@keyframes bossPulse {
  0%,100% {
    filter:drop-shadow(0 0 14px var(--red-bright)) drop-shadow(0 0 5px var(--red-bright));
    transform:scale(1);
  }
  50% {
    filter:drop-shadow(0 0 28px var(--red-bright)) drop-shadow(0 0 10px var(--red-bright)) drop-shadow(0 0 4px #ffb0a0);
    transform:scale(1.10);
  }
}
.lowfx .mnode.avail .mnode-img,
.lowfx .mnode.boss-node .mnode-img { animation:none; }

/* ── P2: 精英节点危险感 ── */
/* 已有 elite-pulse,加一层红色节点背景光晕 */
.mnode.elite-node .mnode-img {
  filter:drop-shadow(0 0 8px rgba(200,60,48,.7)) drop-shadow(0 0 3px rgba(200,60,48,.5));
}
.mnode.elite-node.avail .mnode-img {
  animation:elitePulse2 1.5s ease-in-out infinite;
}
@keyframes elitePulse2 {
  0%,100% {
    filter:drop-shadow(0 0 8px rgba(200,60,48,.6)) drop-shadow(0 0 3px rgba(200,60,48,.4));
    transform:scale(1);
  }
  50% {
    filter:drop-shadow(0 0 20px rgba(232,80,64,.95)) drop-shadow(0 0 8px rgba(200,60,48,.7));
    transform:scale(1.08);
  }
}
.lowfx .mnode.elite-node.avail .mnode-img { animation:none; }

/* ── P2: 战斗开始/结束淡入 ── */
/* screen-in 已有,增加稍微长一点的攻击屏出场缓入 */
#s-battle.screen-in { animation:battle-in .32s cubic-bezier(.2,.8,.3,1); }
@keyframes battle-in {
  0%   { opacity:0; transform:scale(.97) translateY(10px); }
  100% { opacity:1; transform:none; }
}
.lowfx #s-battle.screen-in { animation:none; }

/* ── P3: 面板轻微纸张纹理 ── */
/* 用 CSS radial+linear 多层叠加模拟宣纸纤维感,无外部资源 */
.panel {
  background-image:
    radial-gradient(ellipse 1px 2px at 18% 34%, rgba(255,236,180,.06) 0%, transparent 100%),
    radial-gradient(ellipse 2px 1px at 44% 67%, rgba(255,236,180,.05) 0%, transparent 100%),
    radial-gradient(ellipse 1px 3px at 72% 22%, rgba(255,236,180,.04) 0%, transparent 100%),
    radial-gradient(ellipse 2px 2px at 88% 55%, rgba(255,236,180,.05) 0%, transparent 100%),
    radial-gradient(ellipse 1px 2px at 60% 80%, rgba(255,236,180,.04) 0%, transparent 100%),
    linear-gradient(180deg,#241a11,#15100a);
}

/* ── P3: 按钮 hover 毛笔边框效果 ── */
.btn:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,240,190,.38),
    inset 0 -2px 3px rgba(0,0,0,.4),
    0 7px 16px rgba(0,0,0,.55),
    0 0 0 1px rgba(201,162,39,.2),
    0 0 13px rgba(201,162,39,.35),
    0 0 22px rgba(201,162,39,.12);
}

/* ── P3: 水墨主题:标题文字墨迹增强 ── */
.title {
  text-shadow:
    0 0 30px rgba(201,162,39,.4),
    0 0 60px rgba(201,162,39,.18),
    0 4px 14px #000,
    2px 2px 0 rgba(0,0,0,.35),
    -1px -1px 0 rgba(0,0,0,.2);
}

/* ── P3: h2 面板标题墨迹感 ── */
.panel h2 {
  text-shadow:0 0 12px rgba(240,207,110,.4), 0 2px 6px #000, 1px 1px 0 rgba(0,0,0,.4);
  letter-spacing:.18em;
}

/* ── 战斗内:HP 条低血量红化脉冲 ── */
/* 当血量 <= 25% 时,hpfill 宽度很小,加一个低血警示 */
.hpbar.danger .hpfill {
  background:linear-gradient(90deg,#a01010,#e83020);
  animation:hp-danger .9s ease-in-out infinite;
}
.hpbar.danger .hptext { color:#ffb0a0; font-weight:bold; }
@keyframes hp-danger {
  0%,100% { opacity:1; }
  50%      { opacity:.7; }
}
.lowfx .hpbar.danger .hpfill { animation:none; }

/* ── 能量球:满能量轻金光 / 0 能量灰暗 ── */
.energy { transition:opacity .2s, filter .2s; }
.energy.full b { color:#ffe080; text-shadow:-1px -1px 0 #1a1006, 1px -1px 0 #1a1006, -1px 1px 0 #1a1006, 1px 1px 0 #1a1006, 0 0 8px rgba(240,207,110,.7); }
.energy.depleted { opacity:.45; filter:grayscale(.75) brightness(.7); }
.energy.depleted b { color:#7a7060 !important; text-shadow:-1px -1px 0 #1a1006, 1px -1px 0 #1a1006, -1px 1px 0 #1a1006, 1px 1px 0 #1a1006; }

/* ── 回合数徽章放置在 energy 圆上方 ── */
#energy { position:relative; }

/* ── 卡牌类型描边微调:更好区分 attack/skill/power ── */
.card.t-attack { border-color:#c07050; }
.card.t-skill  { border-color:#6a9050; }
.card.t-power  { border-color:#8060b8; }
.card.t-status,.card.t-curse { border-color:#808070; }
/* A7 稀有度卡框材质:common=青铜 / uncommon=白银 / rare=鎏金。放在类型描边后,避免被 t-attack/t-skill 覆盖。 */
.card.rar-common, .bigcard.rar-common { --rar-frame:#9b713d; --rar-inner:rgba(109,72,32,.58); --rar-glow:rgba(160,108,44,.28); --rar-corner:rgba(80,48,20,.42); }
.card.rar-uncommon, .bigcard.rar-uncommon { --rar-frame:#b8c6d0; --rar-inner:rgba(226,238,244,.72); --rar-glow:rgba(121,171,204,.42); --rar-corner:rgba(74,107,132,.42); }
.card.rar-rare, .bigcard.rar-rare { --rar-frame:#f0cf6e; --rar-inner:rgba(255,225,122,.88); --rar-glow:rgba(232,196,90,.64); --rar-corner:rgba(132,76,18,.5); }
.card.rar-common, .card.rar-uncommon, .card.rar-rare,
.bigcard.rar-common, .bigcard.rar-uncommon, .bigcard.rar-rare {
  border-color:var(--rar-frame);
  box-shadow:0 6px 14px var(--shadow),0 0 0 1px var(--rar-inner),0 0 12px var(--rar-glow);
}
.card.rar-common::after, .card.rar-uncommon::after, .card.rar-rare::after,
.bigcard.rar-common::after, .bigcard.rar-uncommon::after, .bigcard.rar-rare::after {
  content:''; position:absolute; inset:3px; border-radius:7px; pointer-events:none; z-index:1;
  border:1px solid var(--rar-inner);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 0 18px var(--rar-glow);
  background:
    linear-gradient(135deg,var(--rar-corner) 0 9px,transparent 10px) top left/28px 28px no-repeat,
    linear-gradient(225deg,var(--rar-corner) 0 9px,transparent 10px) top right/28px 28px no-repeat,
    linear-gradient(45deg,var(--rar-corner) 0 9px,transparent 10px) bottom left/28px 28px no-repeat,
    linear-gradient(315deg,var(--rar-corner) 0 9px,transparent 10px) bottom right/28px 28px no-repeat;
}
.card.rar-uncommon::after, .bigcard.rar-uncommon::after { border-style:double; }
.card.rar-rare::after, .bigcard.rar-rare::after { border-width:2px; filter:drop-shadow(0 0 4px rgba(240,207,110,.52)); }
.card.selected { box-shadow:0 0 0 3px var(--gold-bright),0 8px 20px #000,0 0 14px var(--rar-glow,rgba(232,196,90,.5)); }

/* ── 卡牌 cost 圆圈 — 不可用时灰化 ── */
.card.unaffordable .cc-cost {
  background:radial-gradient(circle,#2a2830,#18161e) !important;
  border-color:#5a5460 !important;
  color:#7a7280 !important;
}

/* ── 浮层 overlay 更顺滑出现 ── */
#s-overlay.screen-in { animation:overlay-in .22s ease-out; }
@keyframes overlay-in {
  0%   { opacity:0; }
  100% { opacity:1; }
}
.lowfx #s-overlay.screen-in { animation:none; }

/* ── 地图屏顺滑进入 ── */
#s-map.screen-in { animation:map-in .3s cubic-bezier(.2,.8,.3,1); }
@keyframes map-in {
  0%   { opacity:0; transform:translateY(6px); }
  100% { opacity:1; transform:none; }
}
.lowfx #s-map.screen-in { animation:none; }

/* ── 宝贝徽章悬停微动 ── */
.relic-chip { transition:transform .12s, box-shadow .12s; }
.relic-chip:hover { transform:scale(1.18); }

/* ── 低血量: hpbar 加 .danger (JS 注入) ── */
/* 或纯 CSS :has 检测(现代浏览器支持) */
.hpbar:has(.hpfill[style*="width: 2"]) .hpfill,
.hpbar:has(.hpfill[style*="width: 1"]) .hpfill {
  background:linear-gradient(90deg,#a01010,#e83020);
  animation:hp-danger .9s ease-in-out infinite;
}
.hpbar:has(.hpfill[style*="width: 2"]) .hptext,
.hpbar:has(.hpfill[style*="width: 1"]) .hptext { color:#ffb0a0; }
.lowfx .hpbar:has(.hpfill) .hpfill { animation:none; }

/* ── power 行:hover 时 tooltip 前置,整体微缩 ── */
.pw { transition:transform .1s, opacity .1s; cursor:default; }
.pw:hover { transform:scale(1.15); z-index:5; position:relative; }

/* ── 回合结束按钮脉冲提示(敌人行动结束=玩家回合) ── */
.btn.endturn.pulse { animation:endturn-pulse .8s ease-in-out 3; }
/* B36 防误触确认态:第一次点变红「确定结束?」,视觉落在按钮本身而不是转瞬即逝的 toast */
.btn.endturn.confirm-arm { background:linear-gradient(180deg,#8c2f22,#5c1c14); color:#ffd9c9; border-color:#d47a5e; }
@keyframes endturn-pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(232,85,74,0); }
  50%      { box-shadow:0 0 0 6px rgba(232,85,74,.45), 0 0 16px rgba(232,85,74,.3); }
}
.lowfx .btn.endturn.pulse { animation:none; }

/* ── 战斗日志:更柔和的滚动区 ── */
.combat-log {
  mask-image:linear-gradient(180deg,transparent,rgba(0,0,0,.6) 14%,#000 30%,#000 90%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,rgba(0,0,0,.6) 14%,#000 30%,#000 90%,transparent);
}

/* ── 节点 done 上的对号在 lowfx 保持可见(静态) ── */
.lowfx .mnode.done::after { /* inherit, no change needed */ }

/* ── 顶栏 stats pill 悬停微亮 ── */
.stats .stat { transition:background .13s, border-color .13s; cursor:default; }
.stats .stat.seed { cursor:pointer; }
.stats .stat.seed:hover { border-color:rgba(240,207,110,.7); color:#fff; }

/* #14 营地篝火动效:纯 CSS 摇曳火焰(夜营氛围) */
.campfire-fx { position:relative; width:120px; height:96px; margin:4px auto 10px; pointer-events:none; }
.campfire-fx .cf-glow { position:absolute; left:50%; bottom:6px; width:130px; height:80px; transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 80%, rgba(255,150,40,.45), rgba(255,90,20,.12) 55%, transparent 72%);
  filter:blur(4px); animation:cf-glow 2.4s ease-in-out infinite; }
.campfire-fx .cf-logs { position:absolute; left:50%; bottom:2px; width:64px; height:14px; transform:translateX(-50%);
  background:linear-gradient(180deg,#5a3a22,#34201266); border-radius:7px;
  box-shadow:0 0 10px rgba(255,120,30,.5), inset 0 2px 0 rgba(120,70,30,.6); }
.cf-flame { position:absolute; left:50%; bottom:10px; width:30px; height:54px; transform:translateX(-50%);
  border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
  background:linear-gradient(180deg,#ffe680 0%,#ffac33 40%,#ff5a1e 78%,#e8331a 100%);
  filter:blur(.4px); transform-origin:50% 100%; mix-blend-mode:screen; }
.cf-f1 { animation:cf-flick 0.9s ease-in-out infinite; }
.cf-f2 { width:20px; height:40px; bottom:12px; background:linear-gradient(180deg,#fff3b0,#ffc44d 55%,#ff7a26); animation:cf-flick 0.7s ease-in-out infinite reverse; }
.cf-f3 { width:12px; height:26px; bottom:14px; background:linear-gradient(180deg,#fffbe0,#ffd766); animation:cf-flick 0.55s ease-in-out infinite; }
@keyframes cf-flick {
  0%,100% { transform:translateX(-50%) scaleY(1) scaleX(1) rotate(-1.5deg); }
  30% { transform:translateX(-53%) scaleY(1.12) scaleX(.9) rotate(2deg); }
  60% { transform:translateX(-47%) scaleY(.94) scaleX(1.08) rotate(-2.5deg); }
}
@keyframes cf-glow { 0%,100% { opacity:.75; } 50% { opacity:1; } }

/* #9 连击计数器:连续攻击牌时左上角"N HIT!" */
#combo-hud { position:absolute; top:70px; left:18px; z-index:55; pointer-events:none;
  font-family:var(--brush); font-weight:bold; font-size:30px; letter-spacing:1px;
  color:#ffd24a; text-shadow:0 0 10px rgba(255,140,30,.8), 0 2px 4px #000, 0 0 2px #c8501e;
  opacity:0; transform:scale(.6) rotate(-6deg); transition:opacity .5s ease; }
#combo-hud.show { animation:combo-pop .42s cubic-bezier(.2,1.4,.4,1) forwards, combo-fade 1.3s .5s ease forwards; }
@keyframes combo-pop { 0%{ opacity:0; transform:scale(.5) rotate(-10deg); } 60%{ opacity:1; transform:scale(1.18) rotate(3deg); } 100%{ opacity:1; transform:scale(1) rotate(-2deg); } }
@keyframes combo-fade { 0%,55%{ opacity:1; } 100%{ opacity:0; transform:scale(.92) translateY(-8px); } }

/* #21 回合抽牌动画:牌从下方(牌库)错峰飞入手牌槽,backwards 让延迟期保持隐藏 */
.card.deal-in { animation:card-deal .34s cubic-bezier(.2,.9,.3,1.05) backwards; }
@keyframes card-deal {
  0% { opacity:0; transform:translateY(48px) scale(.8) rotate(-5deg); }
  70% { opacity:1; }
  100% { opacity:1; transform:translateY(0) scale(1) rotate(0); }
}
.lowfx .card.deal-in { animation-duration:.18s; }
/* #89 快速出牌:出牌/抽牌/弹字/受击等反馈动画时长减半,手感更利落(光效保留,仅提速) */
.fastplay .card.deal-in { animation-duration:.17s; }
.fastplay .dmg-pop { animation-duration:.4s; }
.fastplay .gain-pop { animation-duration:.5s; }
.fastplay .efighter.hit, .fastplay .efighter.hit-mid { animation-duration:.21s; }
.fastplay .efighter.hit-light { animation-duration:.12s; }
.fastplay .efighter.hit-heavy { animation-duration:.26s; }
.fastplay #hero-stage.hit { animation-duration:.17s; }
.fastplay .card-fx i { animation-duration:.34s; }
.fastplay .potion-fx i { animation-duration:.34s; }
.fastplay #app.shake, .fastplay #app.shake-strong { animation-duration:.16s; }
.fastplay .combo-pop { animation-duration:.2s; }

/* #302 图鉴药水页 tooltip — no extra CSS needed (uses .hovertip) */

/* #303 敌方 enrage 触发红闪 */
.enrage-flash { position:fixed; inset:0; background:rgba(200,30,30,.35); pointer-events:none; z-index:999; animation:enrage-flash-anim .6s ease-out forwards; }
@keyframes enrage-flash-anim { 0% { opacity:1; } 100% { opacity:0; } }

/* #304 地图节点进度感 */
.map-progress { text-align:center; font-size:11px; color:color-mix(in srgb,var(--map-label,#c9a227) 60%,var(--text-dim,#9a8a63)); padding:2px 0 4px; opacity:.76; }

/* #511 地图幕数大标题 */
.map-act-label { font-size:13px; font-weight:bold; color:var(--map-label,var(--gold-bright)); text-align:center; padding:8px 0 4px; letter-spacing:0.05em; text-shadow:0 2px 5px #000,0 0 10px color-mix(in srgb,var(--map-label,var(--gold-bright)) 45%,transparent); }
.map-route-choice{width:min(740px,calc(100% - 20px)); margin:0 auto 8px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;}
.route-chip{border:1px solid rgba(231,198,122,.34); background:rgba(20,14,8,.72); color:#f5ead2; border-radius:8px; padding:8px 10px; text-align:left; min-height:58px; cursor:pointer; box-shadow:0 8px 20px rgba(0,0,0,.22);}
.route-chip b{display:block; font-size:13px; line-height:1.15; color:var(--map-label,var(--gold-bright));}
.route-chip span{display:block; margin-top:4px; font-size:11px; line-height:1.25; color:#d8c7a6;}
.route-chip.active{border-color:var(--map-hot,var(--gold-bright)); box-shadow:0 0 0 1px rgba(255,220,130,.28),0 8px 20px rgba(0,0,0,.28);}

/* #316 成就系统 toast */
.achievement-toast { position:fixed; bottom:80px; right:20px; background:#1a1208; border:1px solid var(--gold-bright); border-radius:10px; padding:12px 16px; display:flex; align-items:center; gap:10px; z-index:9000; opacity:0; transform:translateX(120%); transition:all .4s ease; max-width:260px; }
.achievement-toast.ach-show { opacity:1; transform:translateX(0); }
.ach-icon { font-size:24px; }
.ach-title { font-weight:bold; color:var(--gold-bright); font-size:13px; }
.ach-desc { font-size:11px; color:var(--text-dim,#9a8a63); margin-top:2px; }

/* #317 消耗牌计数气泡 */
.exhaust-badge { position:absolute; top:-6px; right:-6px; background:var(--purple-dark,#4a2060); color:#ddc; font-size:10px; font-weight:bold; border-radius:8px; padding:1px 5px; pointer-events:none; }

/* #319 地图已访节点金线 */
.map-edge-visited { stroke:var(--map-hot,#c9a227) !important; stroke-opacity:0.72 !important; filter:drop-shadow(0 0 4px var(--map-hot,#c9a227)); }

/* #331 战斗内力量加成徽章 */
.str-badge { font-size:9px; background:#7a3020; color:#ffd; border-radius:4px; padding:0 3px; margin-left:2px; vertical-align:middle; pointer-events:none; display:inline-block; }

/* #333 Boss节点金光光晕 */
.map-boss-node { animation: boss-glow 2s ease-in-out infinite; }
@keyframes boss-glow { 0%,100%{filter:drop-shadow(0 0 4px #c9a227);} 50%{filter:drop-shadow(0 0 12px #ffd700);} }
.lowfx .map-boss-node { animation:none; filter:drop-shadow(0 0 6px #c9a227); }

/* #334 角色选择起始牌组预览 */
.class-starter-deck { display:flex; flex-wrap:wrap; gap:4px; max-height:200px; overflow-y:auto; padding:4px 0 2px; }
.deck-chip { background:#2a1f15; border:1px solid #5a4030; border-radius:6px; padding:2px 6px; font-size:10px; color:#d4b896; white-space:nowrap; }

/* #346 图鉴「成就」Tab */
.codex-ach-grid { display:flex; flex-wrap:wrap; gap:12px; padding:8px; }
.codex-ach-item { width:140px; text-align:center; padding:10px; border-radius:8px; background:#1a1208; border:1px solid #3a2a18; }
.ach-done { border-color:#c9a227; }
.ach-locked { opacity:.5; }
.ach-icon-lg { font-size:28px; margin-bottom:4px; }
.ach-name { font-size:12px; font-weight:bold; color:var(--gold-bright); margin-bottom:2px; }
.ach-desc-sm { font-size:10px; color:var(--text-dim,#9a8a63); }

/* #347 战斗连击提示 */
.combo-strike-badge { position:fixed; left:50%; top:30%; transform:translateX(-50%); background:rgba(180,60,20,.85); color:#fff; font-size:22px; font-weight:bold; padding:8px 20px; border-radius:12px; pointer-events:none; z-index:800; animation:combo-strike-pop .4s ease-out forwards; }
@keyframes combo-strike-pop { 0%{opacity:0;transform:translateX(-50%) scale(.5);} 40%{opacity:1;transform:translateX(-50%) scale(1.1);} 100%{opacity:1;transform:translateX(-50%) scale(1);} }

/* #348 bigCard 关键字标签 */
.cc-kw-tags { margin-top:4px; font-size:11px; color:#ff9a3a; font-style:italic; letter-spacing:.02em; }

/* #349 动画速度按钮 */
.speed-btn { background:#2a1f10; border:1px solid #5a4030; color:#d4b896; padding:4px 12px; border-radius:6px; cursor:pointer; margin:0 3px; font-family:var(--brush); font-size:13px; }
.speed-btn.active { background:#c9a227; color:#1a0f00; border-color:#f0cf6e; }

/* #361-364 新功能样式 */

/* #363 药水图鉴使用次数 */
.codex-pot-uses { font-size:9px; color:var(--text-dim,#9a8a63); margin-top:2px; }
/* #499 药水图鉴总数量标注 */
.codex-potion-count { font-size:10px; color:var(--text-dim); text-align:center; padding:4px 0 8px; letter-spacing:0.05em; }

/* #364 精英/Boss首次遭遇名称Banner */
.enemy-banner { position:fixed; top:25%; left:50%; transform:translateX(-50%); background:rgba(0,0,0,.75); border:1px solid #c9a227; border-radius:10px; padding:12px 28px; text-align:center; z-index:700; opacity:0; transition:opacity .4s; pointer-events:none; }
.enemy-banner.eb-show { opacity:1; }
.enemy-banner.eb-hide { opacity:0; }
.eb-type { display:block; font-size:11px; color:var(--gold-bright,#c9a227); letter-spacing:2px; text-transform:uppercase; }
.eb-name { display:block; font-size:20px; font-weight:bold; color:#fff; margin-top:4px; }

/* #376 弃牌堆回合弃牌计数徽章 */
.discard-turn-badge { position:absolute; top:-4px; right:-4px; background:#8b6914; color:#fff; border-radius:50%; width:16px; height:16px; font-size:9px; display:flex; align-items:center; justify-content:center; font-weight:bold; }

/* #378 地图当前位置脉冲动画 */
.map-node-pulse { animation: node-pulse 1.5s ease-in-out infinite; }
@keyframes node-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.6); }
  50% { box-shadow: 0 0 0 8px rgba(201, 162, 39, 0); }
}

/* #379 商店已拥有遗物灰显 */
.shop-owned { opacity:0.45; pointer-events:none; }
.shop-owned-label { font-size:9px; color:var(--text-dim,#9a8a63); text-align:center; margin-top:4px; }

/* #392 连胜 Banner */
.winstreak-banner { position:fixed; top:20%; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,#7a1a1a,#c9a227); color:#fff; font-size:22px; font-weight:bold; padding:12px 32px; border-radius:12px; z-index:800; opacity:0; transition:opacity .4s; pointer-events:none; letter-spacing:2px; box-shadow:0 4px 20px rgba(0,0,0,.5); }
.winstreak-banner.ws-show { opacity:1; }
.winstreak-banner.ws-hide { opacity:0; }

/* #394 商店卡牌卖出价格 */
.shop-sell-price { font-size:9px; color:var(--text-dim,#9a8a63); text-align:center; margin-top:2px; }

/* #404 标题屏历史最高分 */
.title-stats { font-size:11px; color:var(--text-dim); text-align:center; margin-top:12px; letter-spacing:1px; }

/* #405 结局界面职业解锁进度 */
.class-unlock-progress { margin:10px 0; font-size:11px; color:var(--text-dim); }
.cup-bar-wrap { width:120px; height:6px; background:rgba(255,255,255,.15); border-radius:3px; display:inline-block; vertical-align:middle; margin-left:6px; }
.cup-bar { height:100%; background:var(--gold-bright); border-radius:3px; transition:width .5s; }

/* #406 战斗能量颜色变化 */
.energy-full { color: var(--gold-bright) !important; text-shadow: 0 0 8px rgba(201,162,39,0.6); }
.energy-empty { color: var(--text-dim) !important; }

/* #407 图鉴遗物获得次数 */
.codex-relic-count { font-size:9px; color:var(--text-dim); text-align:center; margin-top:2px; }

/* #421 商店遗物稀有度标签 */
.shop-rarity-tag { font-size:8px; padding:1px 5px; border-radius:3px; display:block; text-align:center; margin-bottom:3px; font-weight:bold; }
.rarity-common { background:rgba(150,150,150,.3); color:#aaa; }
.rarity-uncommon { background:rgba(39,140,78,.3); color:#5de88e; }
.rarity-rare { background:rgba(201,162,39,.3); color:var(--gold-bright); }

/* #422 今日挑战信息预览 */
.daily-preview { font-size:10px; color:var(--text-dim); text-align:center; margin-top:4px; letter-spacing:1px; }

/* #433 药水槽位视觉优化 */
.pot-has-item { border:1px solid var(--gold-bright) !important; box-shadow: 0 0 4px rgba(201,162,39,0.4); }
.pot-empty { border:1px dashed rgba(255,255,255,.2) !important; opacity:0.5; }

/* #435 图鉴卡牌已升级角标 */
.codex-upgraded-badge { font-size:8px; background:var(--gold-bright); color:#000; padding:1px 4px; border-radius:3px; position:absolute; top:4px; right:4px; }

/* #459 精英战背景色 */
.elite-bg { background: radial-gradient(ellipse at bottom, rgba(120,40,40,0.15) 0%, transparent 70%) !important; }

/* #460 牌库稀有度排序按钮 */
.deck-sort-btn { font-size:11px; padding:3px 8px; margin-bottom:8px; background:rgba(255,255,255,.08); border:1px solid var(--border,rgba(201,162,39,.4)); border-radius:4px; color:var(--paper-dim); cursor:pointer; font-family:var(--body); }
.deck-sort-btn:hover { color:var(--paper); background:rgba(255,255,255,.15); }

/* #461 商店已购牌数 */
.shop-bought-count { font-size:10px; color:var(--paper-dim); text-align:center; margin-bottom:6px; }
.merchant-ledger { color:var(--gold-bright); margin-top:-4px; }

/* #462 结局通关时间(已在 run-stats-box 内显示;保留备用独立样式) */
.end-run-time { font-size:12px; color:var(--paper-dim); text-align:center; margin-top:6px; }

/* #472 / P18: 手牌悬停、按压、拖拽曲线统一;避免后置 ease 覆盖前面的吸附手感。 */
.hand .card {
  transform-origin:bottom center;
  touch-action:none;
  will-change:transform;
  transition:transform .16s cubic-bezier(.18,.85,.26,1), margin .16s cubic-bezier(.18,.85,.26,1), box-shadow .14s ease, filter .14s ease, opacity .14s ease;
}
.hand .card:not(.selected):not(.unaffordable):hover { transform:translateY(-28px) scale(1.08); }
.hand .card.card-pressing:not(.dragging):not(.unaffordable) { transform:translateY(-18px) scale(1.045); }
.hand .card.dragging { pointer-events:none; }
.drag-card-ghost {
  transform-origin:bottom center;
  will-change:transform;
  transition:transform .045s linear, opacity .12s ease, filter .12s ease;
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.55));
}
.drag-card-ghost.snap-back {
  opacity:.56;
  transition:transform .16s cubic-bezier(.18,.85,.26,1), opacity .16s ease, filter .16s ease;
  filter:drop-shadow(0 7px 10px rgba(0,0,0,.35));
}
.lowfx .hand .card, .lowfx .drag-card-ghost { transition:none; }

/* #474 图鉴遗物稀有度分组标题 */
.codex-rarity-hdr { font-size:10px; font-weight:bold; color:var(--paper-dim); letter-spacing:0.08em; text-transform:uppercase; padding:8px 0 4px; border-bottom:1px solid rgba(201,162,39,.28); margin-bottom:6px; margin-top:4px; }

/* #475 商店职业匹配牌标记 */
.shop-own-class { color: var(--gold-bright); }
.shop-own-class::after { content: " \2746"; font-size:9px; }
.shop-exotic-class { color:#8fbe88; font-size:11px; text-align:center; line-height:1.15; max-width:112px; }

/* D3 营地附魔:卡牌 + 三词缀选择,移动端保持一列可读 */
.enchant-choice { display:grid; grid-template-columns:minmax(150px, 190px) minmax(0, 1fr); gap:14px; align-items:start; justify-content:center; margin:10px auto; max-width:640px; }
.enchant-affixes { display:grid; gap:8px; min-width:0; }
.ench-affix { display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-align:left; white-space:normal; line-height:1.25; min-height:54px; }
.ench-affix b { font-size:15px; color:var(--gold-bright); }
.ench-affix span { font-size:11px; color:var(--paper-dim); overflow-wrap:anywhere; }
.ench-affix.cant { opacity:.42; filter:saturate(.6); }
@media (max-width: 520px) {
  .enchant-choice { grid-template-columns:minmax(150px, 190px); }
}

/* 结算屏:种子旁的行内复制按钮(面板很长,底部那个「复制种子」常在首屏之下) */
.run-stats-box .seed-val { margin-right:6px; }
.run-stats-box .seed-copy-btn { font-size:11px; line-height:1; padding:2px 6px; border-radius:5px;
  min-width:0; vertical-align:middle; opacity:.85; }
.run-stats-box .seed-copy-btn:hover { opacity:1; }

/* 结算屏操作行吸底:面板内容很长,回标题/再战按钮常在首屏之外,吸底后不用滚就能点 */
.endscreen .panel-actions { position:sticky; bottom:-1px; z-index:5; margin-top:10px;
  padding:10px 8px calc(10px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg, transparent, rgba(16,11,7,.92) 30%, rgba(16,11,7,.97));
  backdrop-filter:blur(2px); }
/* 顶栏齿轮字号(34px 圆钮里 16px 的 ⚙ 显小,点着也没底) */
#btn-settings { font-size:21px; }