/* ============================================================
   荒野拓荒者 · 素雅水墨国风样式
   ============================================================ */
:root{
  --paper:rgba(252,248,240,.55);
  --paper-2:rgba(245,239,228,.55);
  --ink:#2b2620;
  --ink-soft:#5a5046;
  --ink-faint:#8a7f6f;
  --cinnabar:#a83232;     /* 朱砂红 */
  --cinnabar-2:#c0392b;
  --gold:#b8932f;         /*  muted 鎏金 */
  --gold-2:#d4a843;
  --jade:#5a8a66;
  --line:rgba(180,165,140,.45);
  --card:rgba(255,253,247,.62);
  --shadow:0 2px 10px rgba(40,30,15,.10);
  --shadow-lg:0 6px 24px rgba(40,30,15,.18);
  --radius:12px;
}
/* 全局背景：纯 CSS 水墨渐变铺底（不依赖任何图片资源，部署包零 2D 模型依赖） */
body{background:radial-gradient(120% 80% at 50% 0%,rgba(58,46,28,.45),rgba(34,28,18,.62)),linear-gradient(180deg,#2a2418,#1d1810);transition:background .6s ease}
/* 全 App 统一水墨背景：背景图铺底，各场景不再切换底色，保持视觉一致性 */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:"Kaiti SC","STKaiti","KaiTi","楷体","Songti SC","SimSun",serif;
  color:var(--ink);
  background-attachment:fixed;
  min-height:100vh;
  font-size:15px;
}
button{font-family:inherit;cursor:pointer}
.hidden{display:none !important}

/* ---------- 顶栏 ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 18px;
  background:rgba(43,38,32,.82);
  color:var(--paper);
  box-shadow:var(--shadow);
  position:sticky;top:0;z-index:20;
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(212,168,67,.20);
}
.brand{font-size:18px;font-weight:600;letter-spacing:2px;color:var(--gold-2);text-shadow:0 1px 2px rgba(0,0,0,.4)}
.status{display:flex;gap:10px;flex-wrap:wrap;font-size:13px;align-items:center}
.status .st{display:flex;align-items:center;gap:4px}
.status .st b{color:var(--gold-2);font-size:14px;font-weight:600}
.status .st-res,.status .st-currency,.status .st-count{gap:4px;padding:2px 8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:16px;transition:.15s}
.status .st-res:hover,.status .st-currency:hover,.status .st-count:hover{background:rgba(255,255,255,.12)}
.st-ico{width:14px;height:14px;display:flex;align-items:center;justify-content:center;opacity:.9;font-size:12px;line-height:1}
.st-ico svg{width:100%;height:100%}
.ico-jade{color:#8fc9a0}
.ico-cinnabar{color:#e08080}
.status .st-res b,.status .st-currency b,.status .st-count b{font-size:13px}
/* 顶栏：等级徽章 + 升级经验进度条 */
.status .st-lv{gap:6px}
.hud-stats{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.hud-stat{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.45);border:1px solid var(--line);border-radius:14px;padding:4px 12px;font-size:13px}
.hud-stat b{color:var(--cinnabar);font-size:14px}
.hud-stat .hs-ico{font-size:13px}
/* ---------- 顶栏：水墨仙侠标题 ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 16px;
  background:linear-gradient(180deg,#f8f1e3,#f0e6d2);
  color:var(--ink);
  box-shadow:0 1px 4px rgba(40,30,15,.08);
  position:sticky;top:0;z-index:30;
  border-bottom:1px solid var(--line);
}
.topbar-left{display:flex;align-items:center;gap:6px;flex:1}
.topbar-logo{font-size:18px;line-height:1}
.topbar-brand{font-size:16px;font-weight:700;letter-spacing:2px;color:var(--cinnabar);text-shadow:0 1px 0 rgba(255,255,255,.6)}
.topbar-center{flex:1;text-align:center;font-size:18px;font-weight:700;letter-spacing:6px;color:var(--ink);font-family:serif}
.topbar-right{flex:1;display:flex;justify-content:flex-end}
.topbar-seal{
  width:36px;height:36px;border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--cinnabar);color:var(--cinnabar);
  font-size:12px;font-weight:700;letter-spacing:1px;
  background:rgba(255,255,255,.5);writing-mode:vertical-rl;text-orientation:upright;
  box-shadow:0 2px 4px rgba(0,0,0,.08);
}
.topbar-status{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:6px 12px;background:var(--paper);border-bottom:1px solid var(--line);
  font-size:12px;color:var(--ink-soft);min-height:18px;
}
.topbar-status:empty{display:none}
.brand{font-size:18px;font-weight:600;letter-spacing:2px;color:var(--gold-2);text-shadow:0 1px 2px rgba(0,0,0,.4)}
.status{display:flex;gap:10px;flex-wrap:wrap;font-size:13px;align-items:center}
.status .st{display:flex;align-items:center;gap:4px}
.status .st b{color:var(--gold-2);font-size:14px;font-weight:600}
.status .st-res,.status .st-currency,.status .st-count{gap:4px;padding:2px 8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:16px;transition:.15s}
.status .st-res:hover,.status .st-currency:hover,.status .st-count:hover{background:rgba(255,255,255,.12)}
.st-ico{width:14px;height:14px;display:flex;align-items:center;justify-content:center;opacity:.9;font-size:12px;line-height:1}
.st-ico svg{width:100%;height:100%}
.ico-jade{color:#8fc9a0}
.ico-cinnabar{color:#e08080}
.status .st-res b,.status .st-currency b,.status .st-count b{font-size:13px}
/* 顶栏：等级徽章 + 升级经验进度条 */
.status .st-lv{gap:6px}
.hud-stats{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.hud-stat{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.45);border:1px solid var(--line);border-radius:14px;padding:4px 12px;font-size:13px}
.hud-stat b{color:var(--cinnabar);font-size:14px}
.hud-stat .hs-ico{font-size:13px}

/* ============ 首页：水墨仙侠仪表板 ============ */
.home-view{
  position:relative;height:100%;min-height:0;overflow:hidden;
  display:flex;flex-direction:column;gap:10px;
  padding:10px 14px 74px;
  background:transparent;
  border-radius:var(--radius);box-shadow:var(--shadow);
}
.home-ink-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.home-ink-bg .ink-full-landscape{
  position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 700' preserveAspectRatio='xMidYMax slice'%3E%3Cdefs%3E%3ClinearGradient id='sky' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23f2f7f7'/%3E%3Cstop offset='45%25' stop-color='%23f9f6ec'/%3E%3Cstop offset='100%25' stop-color='%23e6e4d8'/%3E%3C/linearGradient%3E%3ClinearGradient id='water' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='rgba(140,175,175,0.3)'/%3E%3Cstop offset='100%25' stop-color='rgba(180,200,195,0.15)'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='390' height='700' fill='url(%23sky)'/%3E%3Ccircle cx='290' cy='80' r='36' fill='rgba(192,57,43,0.16)'/%3E%3Cpath d='M-40,300 Q40,220 130,280 T290,250 T430,300 L430,700 L-40,700 Z' fill='%23aac4c4' opacity='0.2'/%3E%3Cpath d='M-40,360 Q50,290 150,340 T330,300 T430,350 L430,700 L-40,700 Z' fill='%238fb8b3' opacity='0.3'/%3E%3Cpath d='M-40,420 Q60,350 170,400 T350,360 T430,410 L430,700 L-40,700 Z' fill='%23729e98' opacity='0.4'/%3E%3Crect x='0' y='450' width='390' height='250' fill='url(%23water)' opacity='0.55'/%3E%3Cpath d='M-40,700 L-40,580 Q60,500 180,590 T350,550 T430,620 L430,700 Z' fill='%235a8a84' opacity='0.3'/%3E%3Cpath d='M-40,700 L-40,640 Q80,580 200,650 T430,610 L430,700 Z' fill='%23466b6b' opacity='0.25'/%3E%3C/svg%3E") no-repeat center bottom;
  background-size:cover;
}
.home-ink-bg .ink-sky{display:none}
.home-ink-bg .ink-mist{position:absolute;background:rgba(255,255,255,.5);filter:blur(18px);border-radius:50%}
.home-ink-bg .ink-mist-1{width:160px;height:70px;left:5%;top:16%;animation:inkFloat 24s ease-in-out infinite}
.home-ink-bg .ink-mist-2{width:220px;height:90px;right:8%;top:22%;animation:inkFloat 28s ease-in-out infinite reverse}
.home-ink-bg .ink-mist-3{width:140px;height:60px;left:35%;top:8%;animation:inkFloat 32s ease-in-out infinite}
.home-ink-bg .ink-mountains{position:absolute;left:-10%;right:-10%;bottom:30%;background-repeat:repeat-x;background-size:600px auto;opacity:.45}
.home-ink-bg .ink-mountains-far{height:220px;bottom:34%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath d='M0,120 L0,70 Q50,20 100,70 T200,60 T300,75 T400,55 L400,120 Z' fill='%2389a8a8'/%3E%3C/svg%3E");animation:inkPan 60s linear infinite}
.home-ink-bg .ink-mountains-mid{height:180px;bottom:32%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 L0,55 Q60,15 120,55 T240,45 T360,60 T480,40 L480,100 Z' fill='%236f8f8a'/%3E%3C/svg%3E");animation:inkPan 45s linear infinite reverse;opacity:.55}
.home-ink-bg .ink-mountains-near{height:120px;bottom:30%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 80' preserveAspectRatio='none'%3E%3Cpath d='M0,80 L0,40 Q70,5 140,40 T280,30 T420,45 L420,80 Z' fill='%234e6b65'/%3E%3C/svg%3E");animation:inkPan 35s linear infinite;opacity:.65}
.home-ink-bg .ink-sun{
  position:absolute;top:12%;right:16%;width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle,rgba(192,57,43,.28) 0%,rgba(192,57,43,.08) 50%,transparent 72%);
  filter:blur(1px);
}
.home-ink-bg .ink-center-mountain{
  position:absolute;left:50%;top:34%;transform:translateX(-50%);
  width:92%;height:38%;opacity:.28;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 160' preserveAspectRatio='none'%3E%3Cpath d='M0,160 L0,100 Q50,45 110,85 T220,60 T340,90 T400,70 L400,160 Z' fill='%235a7a76'/%3E%3Cpath d='M0,160 L0,115 Q40,75 90,105 T200,85 T320,110 T400,95 L400,160 Z' fill='%237a9a96' opacity='0.7'/%3E%3C/svg%3E") no-repeat center/contain;
}
.home-ink-bg .ink-lake{position:absolute;left:0;right:0;bottom:28%;height:22%;background:linear-gradient(180deg,rgba(169,195,195,.35),rgba(200,215,210,.08));opacity:.6}
.home-ink-bg .ink-crane{position:absolute;width:110px;height:60px;left:10%;top:24%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cpath d='M90,38 Q70,20 50,28 Q40,32 35,26 Q30,30 38,34 Q55,40 75,34 Q95,30 105,38 Z' fill='%23fff'/%3E%3Cpath d='M60,30 Q55,10 45,5 Q55,15 62,28' stroke='%23333' fill='none' stroke-width='1.5'/%3E%3Cpath d='M45,5 Q42,0 38,3' stroke='%23c0392b' fill='none' stroke-width='1.5'/%3E%3Cpath d='M105,38 L115,30 L112,40 Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center/contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.1));animation:inkCrane 22s ease-in-out infinite}
.home-ink-bg .ink-bamboo{position:absolute;bottom:28%;width:90px;height:45%;background-repeat:repeat-y;background-size:100% auto;opacity:.75;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}
.home-ink-bg .ink-bamboo-left{left:-2%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 300'%3E%3Cpath d='M30,0 L32,300' stroke='%234a6b4a' stroke-width='3'/%3E%3Cpath d='M28,40 Q10,50 5,70 M30,90 Q50,100 55,120 M30,160 Q8,170 4,190 M30,220 Q52,230 56,250' stroke='%234a6b4a' fill='none' stroke-width='2'/%3E%3C/svg%3E")}
.home-ink-bg .ink-bamboo-right{right:-2%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 300'%3E%3Cpath d='M30,0 L28,300' stroke='%234a6b4a' stroke-width='3'/%3E%3Cpath d='M32,50 Q50,60 55,80 M30,120 Q10,130 5,150 M30,180 Q52,190 56,210 M30,260 Q8,270 4,290' stroke='%234a6b4a' fill='none' stroke-width='2'/%3E%3C/svg%3E")}
.home-ink-bg .ink-rock{position:absolute;left:0;bottom:28%;width:160px;height:90px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 90'%3E%3Cpath d='M0,90 L0,55 Q30,20 70,45 T140,35 L160,90 Z' fill='%235a5a5a'/%3E%3C/svg%3E") no-repeat left bottom/contain;opacity:.35}
.home-ink-bg .ink-swordsman{position:absolute;right:8%;bottom:32%;width:90px;height:140px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 140'%3E%3Cpath d='M35,40 Q30,70 32,100 L28,135' stroke='%23333' stroke-width='2.5' fill='none'/%3E%3Cpath d='M35,40 Q50,45 55,55' stroke='%23333' stroke-width='2' fill='none'/%3E%3Ccircle cx='38' cy='35' r='6' fill='%23333'/%3E%3Cpath d='M55,55 L75,45 L70,60 Z' stroke='%23333' stroke-width='2' fill='none'/%3E%3Cpath d='M30,85 L48,88' stroke='%23333' stroke-width='2'/%3E%3C/svg%3E") no-repeat center/contain;opacity:.55}
.home-ink-bg .ink-pine{position:absolute;right:2%;bottom:30%;width:120px;height:160px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 160'%3E%3Cpath d='M60,160 Q58,100 62,70' stroke='%233d5c5c' stroke-width='4' fill='none'/%3E%3Cpath d='M62,70 Q40,55 30,35 Q55,50 62,60 Q70,48 95,30 Q80,52 64,65' fill='%234a6b6b'/%3E%3Cpath d='M60,100 Q40,90 28,75 Q48,88 60,95 Q72,86 95,72 Q78,90 62,100' fill='%234a6b6b'/%3E%3C/svg%3E") no-repeat center/contain;opacity:.6}
@keyframes inkCrane{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-8px)}}
@keyframes inkFloat{0%,100%{transform:translateX(0)}50%{transform:translateX(25px)}}
@keyframes inkPan{0%{background-position:0 bottom}100%{background-position:600px bottom}}

.home-user-card{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:12px;
  background:rgba(255,253,247,.75);border:1px solid var(--line);border-radius:14px;
  padding:12px 14px;box-shadow:0 4px 14px rgba(40,30,15,.08);
  backdrop-filter:blur(3px);
}
.home-avatar-wrap{position:relative;flex:none;width:58px;height:58px;border-radius:50%;border:2px solid var(--gold);background:radial-gradient(circle at 50% 35%,#fff7e8,#e7dcc6);box-shadow:0 3px 10px rgba(0,0,0,.1);overflow:hidden}
.home-avatar{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:32px;line-height:1}
.home-ink-ava{position:absolute;right:-2px;bottom:-2px;width:20px;height:20px;border-radius:50%;background:var(--cinnabar);color:#fff;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;border:2px solid #fff}
.home-user-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.home-name{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:1px}
.home-lv{font-size:12px;color:var(--ink-soft)}
.home-currency{flex:none;display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.home-coin,.home-prestige{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-soft)}
.home-coin b,.home-prestige b{color:var(--ink);font-weight:700;font-size:14px}
.hc-ico{width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:14px}
.hc-text{display:flex;flex-direction:column;align-items:flex-end;gap:0;line-height:1.2}
.hc-lbl{font-size:10px;color:var(--ink-faint)}

.home-bottom-group{
  position:relative;z-index:1;
  display:flex;flex-direction:column;gap:10px;
  flex:none;margin-top:90px;
}
.home-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  flex:none;
}
.home-tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:12px 4px;border:1px solid var(--line);border-radius:14px;
  background:rgba(255,253,247,.78);box-shadow:0 2px 8px rgba(40,30,15,.06);
  cursor:pointer;transition:.15s;-webkit-tap-highlight-color:transparent;
}
.home-tile:active{transform:translateY(1px)}
.home-tile-ico{
  width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#fff5f5,#ffeaea);border:1px solid rgba(192,57,43,.2);
  font-size:22px;box-shadow:0 2px 6px rgba(192,57,43,.1);
}
.home-tile-name{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap}
.home-tile-sub{font-size:10px;color:var(--ink-faint);white-space:nowrap}

.home-today{
  position:relative;z-index:1;flex:none;
  display:flex;gap:10px;align-items:stretch;
  background:rgba(255,253,247,.75);border:1px solid var(--line);border-radius:12px;
  padding:10px 12px;box-shadow:0 4px 14px rgba(40,30,15,.08);
  min-height:56px;
}
.home-today-label{
  writing-mode:vertical-rl;text-orientation:mixed;
  font-size:12px;font-weight:700;color:var(--cinnabar);
  letter-spacing:3px;padding:2px 4px;
  border-right:1px solid rgba(180,165,140,.3);
  flex:none;display:flex;align-items:center;justify-content:center;
}
.home-notice{flex:1;display:flex;flex-direction:column;gap:4px;justify-content:center;min-width:0}
.hn-title{font-size:13px;font-weight:700;color:var(--cinnabar);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hn-body{font-size:12px;color:var(--ink);line-height:1.5;max-height:46px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* ============ 角色页：原生移动端，固定一屏不滚，Tab 切换 ============ */
.char-view{
  display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;
  gap:0;padding:0;
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  border:1px solid rgba(180,165,140,.35);
  --char-px:18px;
}
.char-hero{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;padding:10px var(--char-px) 8px;text-align:left;position:relative;overflow:hidden;flex:none}
.char-hero::before{content:'';position:absolute;inset:0 0 auto 0;height:55%;background:linear-gradient(180deg,rgba(255,255,255,.25),transparent);pointer-events:none}
.char-portrait-wrap{position:relative;flex:none;width:68px;height:68px;border-radius:50%;border:2px solid var(--gold);box-shadow:0 4px 12px rgba(0,0,0,.12);background:linear-gradient(180deg,#fbf7ee,#e9e0cf);overflow:hidden}
.char-portrait{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:top center;filter:sepia(.12) contrast(1.02)}
.char-portrait.char-emoji{display:flex;align-items:center;justify-content:center;font-size:38px;line-height:1;filter:none;background:radial-gradient(circle at 50% 35%,#fff7e8,#e7dcc6)}
.char-ink-ava{position:absolute;right:-2px;bottom:-2px;width:24px;height:24px;border-radius:50%;background:var(--cinnabar);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;border:2px solid #fff;z-index:2}
.char-info{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;text-align:left;position:relative;z-index:1;gap:4px}
.char-name-row{display:flex;align-items:center;gap:8px;margin-bottom:0}
.char-name{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:1px}
.lv-badge{font-size:11px;background:var(--cinnabar);color:#fff;padding:2px 7px;border-radius:12px}
.char-cp-line{display:flex;align-items:baseline;justify-content:center;gap:6px;margin:6px 0;padding:0 var(--char-px);flex:none}
.char-cp-num{font-size:22px;font-weight:800;color:var(--cinnabar);letter-spacing:1px;text-shadow:0 1px 0 rgba(255,255,255,.4)}
.char-cp-lbl{font-size:11px;color:var(--ink-soft)}
.char-exp-line{display:flex;align-items:center;gap:8px;margin:0 var(--char-px) 6px;flex:none}
.char-exp-line .hp-bar{flex:1;border-radius:8px;height:8px!important;background:rgba(0,0,0,.12);max-width:260px}
.char-exp-line .hp-bar .hp-fill{background:linear-gradient(90deg,var(--cinnabar),#e08080)}
.char-exp-line .exp-txt{font-size:10px;color:var(--ink-soft);white-space:nowrap}
.char-hero-foot{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 var(--char-px) 6px;flex-wrap:wrap;min-height:22px}
.chip{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.45);border:1px solid var(--line);border-radius:14px;padding:4px 11px;font-size:13px;color:var(--ink-soft);white-space:nowrap}
.chip b{color:var(--ink);font-weight:700;margin-left:2px}
.chip-gold{background:rgba(184,147,47,.12);border-color:var(--gold);color:#5a401f}
.chip-gold b{color:var(--cinnabar)}
/* Tab 栏：四个等宽，与头部/内容区等宽 */
.char-tabbar{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;flex:none;padding:8px var(--char-px) 6px}
.char-tab{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;border:1px solid rgba(180,165,140,.35);border-radius:10px;background:rgba(255,255,255,.25);color:var(--ink-soft);font-size:11px;cursor:pointer;transition:.12s;-webkit-tap-highlight-color:transparent;min-width:0}
.char-tab .ct-ico{font-size:18px;line-height:1}
.char-tab .ct-txt{white-space:nowrap}
.char-tab.on{border-color:var(--gold);color:var(--cinnabar);background:linear-gradient(180deg,#fffdf7,#f8f1e3);box-shadow:0 2px 8px rgba(201,162,39,.18)}
.char-tabbody{flex:1;min-height:0;overflow:hidden;padding:0 var(--char-px) 8px}
.char-panel{padding:0;height:100%;display:flex;flex-direction:column;gap:5px;justify-content:flex-start;overflow:hidden}
.char-chips2{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:2px}
.char-chips2 .chip{font-size:10px;padding:2px 7px}
.char-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:5px}
.char-stat-cell{display:flex;flex-direction:column;align-items:center;gap:0;padding:5px 1px;background:var(--card);border:1px solid rgba(180,165,140,.3);border-radius:8px;box-shadow:var(--shadow)}
.char-stat-cell .csc-ico{font-size:14px;line-height:1.1}
.char-stat-cell .csc-name{font-size:9px;color:var(--ink-soft)}
.char-stat-cell .csc-val{font-size:13px;font-weight:700;color:var(--ink)}
.char-sub{font-size:12px;margin:1px 0 3px;padding-left:6px;border-left:3px solid var(--gold);color:var(--cinnabar);letter-spacing:1px}
.char-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;gap:10px}
.char-empty .e-ico{font-size:48px;line-height:1}
.char-empty .e-main{font-size:16px;font-weight:600;color:var(--ink)}
.char-empty .e-sub{font-size:13px;color:var(--ink-soft)}
.heart-list,.life-list{display:flex;flex-direction:column;gap:8px}
.heart-row,.life-row{background:var(--card);border:1px solid rgba(180,165,140,.3);border-radius:10px;padding:10px 12px;box-shadow:var(--shadow)}
.hr-name{font-size:13px;font-weight:600;color:var(--ink)}
.hr-eff{font-size:11px;color:var(--ink-soft);margin-top:3px}
.title-main{background:var(--card);border:1px solid var(--gold);border-radius:12px;padding:12px;margin-bottom:10px;box-shadow:var(--shadow)}
.tm-name{font-size:16px;font-weight:700;color:var(--cinnabar)}
.tm-bonus{font-size:12px;color:#a8842a;margin-top:4px}
.title-other{margin-top:6px}
.title-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.title-tags .tag{padding:6px 10px;font-size:13px;margin:0;line-height:1.3}
/* 根骨 → 战力 1×4 紧凑行 */
.attr-mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.attr-mini{background:rgba(255,253,247,.5);border:1px solid var(--line);border-radius:8px;padding:6px 2px;text-align:center}
.am-top{flex-direction:column;align-items:center;gap:0}
.am-root{font-size:12px;font-weight:600;color:#2b2620}
.am-arrow{display:none}
.am-stat{font-size:11px;color:#5a5046}
.am-stat b{color:var(--cinnabar);font-size:12px}
.attr-gear{color:var(--gold);font-size:9px;font-weight:600;margin-left:0;display:block}
.am-formula{font-size:9px;color:var(--ink-faint);margin-top:1px}
/* 生活技能横向列表 */
.life-list{display:flex;flex-direction:column;gap:8px}
.life-row{display:flex;align-items:center;gap:10px}
.life-name{width:96px;flex:none;font-weight:600;font-size:14px;color:var(--ink)}
.life-bar{flex:1;min-width:0}
.life-left{width:64px;flex:none;text-align:right;font-size:12px}
/* 心法卡片 */
.skill-card{cursor:default}
.lv-badge{background:var(--gold-2);color:#2b2620;font-weight:bold;font-size:12px;padding:1px 7px;border-radius:10px}
.top-exp{position:relative;width:96px;height:11px;background:rgba(0,0,0,.35);border-radius:6px;overflow:hidden;border:1px solid rgba(255,255,255,.12)}
.top-exp-fill{height:100%;background:linear-gradient(90deg,var(--gold),#e8c46a);border-radius:6px;transition:width .4s}
.top-exp-txt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:9px;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.6);font-weight:600}
.top-actions{display:flex;gap:8px;position:relative}

/* ---------- 按钮 ---------- */
.btn{
  border:1px solid var(--line);border-radius:8px;padding:8px 16px;font-size:14px;
  background:rgba(255,255,255,.45);color:var(--ink);transition:.15s;
  box-shadow:var(--shadow);font-weight:500;
}
.btn:hover{background:rgba(255,255,255,.7);border-color:var(--gold)}
.btn:active{transform:translateY(1px)}
.btn-gold{background:rgba(184,147,47,.18);color:#5a4010;border-color:var(--gold);font-weight:600}
.btn-gold:hover{background:rgba(184,147,47,.30)}
.btn-cinnabar{background:rgba(168,50,50,.15);color:var(--cinnabar);border-color:rgba(168,50,50,.5);font-weight:600}
.btn-cinnabar:hover{background:rgba(168,50,50,.25)}
.btn-sm{padding:5px 12px;font-size:13px}
.btn-lg{padding:12px 28px;font-size:18px;width:100%;margin-top:8px}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.4)}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}

/* ---------- 布局 ---------- */
.layout{
  display:grid;
  grid-template-columns:170px 1fr 280px;
  gap:14px;padding:14px;
  max-width:1400px;margin:0 auto;
  align-items:start;
}
.sidebar{display:flex;flex-direction:column;gap:6px;position:sticky;top:64px}
.nav-btn{
  text-align:left;padding:11px 14px;border:none;border-radius:8px;
  background:var(--card);color:var(--ink);font-size:15px;
  border-left:4px solid transparent;transition:.15s;box-shadow:var(--shadow);
}
.nav-btn:hover{background:#fff;border-left-color:var(--gold)}
.nav-btn.active{background:linear-gradient(90deg,var(--cinnabar),var(--cinnabar-2));color:#fff;border-left-color:var(--gold-2)}

.content{min-height:70vh}
.logpanel{
  position:sticky;top:64px;
  background:var(--card);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;max-height:calc(100vh - 90px);
  display:flex;flex-direction:column;
}
.log-title{padding:10px 14px;background:#3a3228;color:var(--gold-2);font-weight:bold;border-bottom:2px solid var(--gold)}
.log-body{padding:10px 14px;overflow-y:auto;font-size:13.5px;line-height:1.7;flex:1}
.log-body .ln{margin-bottom:4px;border-bottom:1px dashed var(--line);padding-bottom:3px}
.log-body .ln.good{color:var(--jade)}
.log-body .ln.bad{color:var(--cinnabar-2)}
.log-body .ln.gold{color:var(--gold)}
.log-body .ln.epic{color:#9b4ad5;font-weight:bold}

/* ---------- 文字江湖题词横幅（隐藏图形视图后用于强化文字版身份） ---------- */
.scroll-banner{background:rgba(43,38,32,.72);color:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 20px;margin-bottom:14px;border:1px solid rgba(212,168,67,.25);text-align:center;backdrop-filter:blur(6px)}
.scroll-banner .sb-main{font-size:18px;font-weight:600;letter-spacing:3px;color:var(--gold-2);font-family:'Ma Shan Zheng',serif}
.scroll-banner .sb-sub{font-size:12px;color:#d8cdb6;margin-top:5px;opacity:.88}

/* ---------- 卡片/面板 ---------- */
.panel{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin-bottom:14px;overflow-x:hidden;backdrop-filter:blur(8px);border:1px solid rgba(180,165,140,.35)}
.panel h2{font-size:17px;color:var(--cinnabar);border-left:4px solid var(--gold);padding-left:10px;margin-bottom:12px;letter-spacing:1px}
.panel h3{font-size:15px;color:var(--ink-soft);margin:10px 0 6px}
/* 设置页 */
.settings-section{padding:14px;background:rgba(255,255,255,.45);border:1px solid rgba(180,165,140,.4);border-radius:10px;margin-bottom:14px}
.settings-section h3{margin:0 0 12px;font-size:15px;color:var(--ink-soft);display:flex;align-items:center;gap:6px}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:14px}
.settings-row:last-child{border-bottom:none}
.settings-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.settings-actions .btn{flex:1;min-width:100px;padding:10px 12px;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.settings-actions .btn span{font-size:16px}
.row{display:flex;flex-wrap:wrap;gap:12px}
.grid{display:grid;gap:12px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.muted{color:var(--ink-faint);font-size:13px}
.tag{display:inline-block;padding:2px 8px;border-radius:20px;font-size:12px;background:var(--paper-2);color:var(--ink-soft);margin:2px}

/* ---------- 角色属性 ---------- */
.attr-block{display:flex;flex-direction:column;gap:8px}
.attr-line{display:flex;justify-content:space-between;padding:6px 10px;background:rgba(255,255,255,.45);border-radius:6px}
.attr-line .v{font-weight:bold;color:var(--cinnabar)}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat-cell{background:rgba(255,255,255,.45);border-radius:8px;padding:10px;text-align:center}
.stat-cell .num{font-size:22px;font-weight:bold;color:var(--cinnabar)}
.stat-cell .lab{font-size:12px;color:var(--ink-faint)}

/* ---------- 装备/物品卡 ---------- */
.item-card{
  background:rgba(255,255,255,.45);border-radius:10px;padding:12px;
  border:1px solid rgba(180,165,140,.4);position:relative;transition:.15s;
  backdrop-filter:blur(4px);
}
.item-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);background:rgba(255,255,255,.6)}
.item-card.elite{border-color:var(--gold);background:rgba(184,147,47,.1)}
.item-card .iname{font-weight:600;font-size:15px;margin-bottom:4px}
.item-card .imeta{font-size:12.5px;color:var(--ink-soft);line-height:1.6}
.item-card .iactions{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
/* 装备详情操作按钮组：按钮 + 一行说明，消除「吸收/重铸/传承」歧义 */
.op-cell{display:flex;flex-direction:column;align-items:center;gap:3px}
.op-note{font-size:10px;line-height:1.25;color:var(--ink-faint);text-align:center;white-space:nowrap}
.slot-empty{border:2px dashed var(--line);background:transparent;color:var(--ink-faint);display:flex;align-items:center;justify-content:center;min-height:90px;border-radius:10px;font-size:13px}
/* ===== 角色装备栏 ===== */
.char-equip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;position:relative;
  width:100%;margin:4px auto 8px;padding:14px 12px;border-radius:16px;
  background:rgba(255,255,255,.42);border:1px solid rgba(180,165,140,.4);
  box-shadow:var(--shadow);transition:.3s;backdrop-filter:blur(6px)}
.char-equip::before{content:"";position:absolute;inset:6px;border-radius:12px;border:1px dashed rgba(139,95,33,.22);pointer-events:none}
.equip-col{display:flex;flex-direction:column;gap:12px;z-index:2;flex:0 0 auto}
.char-center{flex:1 1 auto;display:flex;align-items:center;justify-content:center;position:relative;min-height:220px}
.char-silhouette{position:absolute;width:72%;height:90%;opacity:.18;pointer-events:none}
.char-silhouette circle,.char-silhouette path{fill:none;stroke:var(--ink);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;transition:.3s}
.char-ornament{position:absolute;inset:0;pointer-events:none;border-radius:18px;background:radial-gradient(circle at 50% 50%,transparent 20%,rgba(212,168,67,.06) 70%,transparent 90%);animation:ornamentPulse 4s ease-in-out infinite}
@keyframes ornamentPulse{0%,100%{opacity:.7}50%{opacity:1}}
.char-slot{position:relative;width:clamp(88px,22vw,105px);min-height:74px;border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:8px 6px;text-align:center;cursor:pointer;transition:.16s;overflow:visible;z-index:2;
  background:rgba(255,255,255,.55);border:1px solid rgba(180,165,140,.5);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.char-slot .cs-ico{font-size:clamp(24px,7vw,32px);line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.15));margin-bottom:1px}
.char-slot .cs-name{font-size:11.5px;color:var(--ink);font-weight:600;line-height:1.2;max-width:96%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.char-slot .cs-q{font-size:10px;font-weight:700;line-height:1;padding:1px 6px;border-radius:10px;margin-top:2px;opacity:.9}
.char-slot.empty{background:rgba(255,255,255,.25);border:1px dashed var(--line);box-shadow:none;opacity:.85}
.char-slot.empty .cs-ico{filter:grayscale(1);opacity:.35;font-size:clamp(22px,6.5vw,28px)}
.char-slot.empty .cs-name{color:var(--ink-faint);font-weight:500}
.char-slot.empty .cs-q{color:var(--ink-faint);background:transparent}
.char-slot:hover{transform:scale(1.03);z-index:3}
.char-slot .cs-lock{position:absolute;top:-7px;right:-7px;font-size:10px;width:20px;height:20px;background:rgba(255,255,255,.9);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.22);border:1px solid var(--line);z-index:4}
.char-slot .cs-dur{position:absolute;bottom:-7px;left:-7px;font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;z-index:4;box-shadow:0 1px 3px rgba(0,0,0,.2);background:#fff;color:#e8954c;border:1px solid #e8954c}
.char-slot .cs-dur.broken{color:#fff;background:var(--cinnabar);border-color:var(--cinnabar)}
/* 单槽位品质：仅保留细边框色 */
.char-slot.quality-白{--slot-color:#bdb4a3;border-color:var(--slot-color)}
.char-slot.quality-绿{--slot-color:#6a9f6a;border-color:var(--slot-color)}
.char-slot.quality-蓝{--slot-color:#6a8fc0;border-color:var(--slot-color)}
.char-slot.quality-紫{--slot-color:#9b7bb5;border-color:var(--slot-color)}
.char-slot.quality-橙{--slot-color:#c9a060;border-color:var(--slot-color)}
.char-slot.quality-极品{--slot-color:#c4a44a;border-color:var(--slot-color)}
.char-slot.quality-王器{--slot-color:#5a9f8f;border-color:var(--slot-color)}
.char-slot.quality-圣器{--slot-color:#8a8ab0;border-color:var(--slot-color)}
.char-slot.quality-神器{--slot-color:#c45a5a;border-color:var(--slot-color)}
.char-slot.quality-仙器{--slot-color:#5aa8c0;border-color:var(--slot-color)}
.char-slot.quality-混沌{--slot-color:#9b70c0;border-color:var(--slot-color)}
.char-slot.quality-鸿蒙{--slot-color:#c77ab0;border-color:var(--slot-color)}
.char-slot.wuji .cs-q::after{content:"·臻";color:var(--slot-color);margin-left:2px;font-weight:700}

/* 中央人形：极淡特效 */
.char-center{position:relative;flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:220px;z-index:1}
.char-silhouette{position:absolute;width:72%;height:90%;opacity:.12;pointer-events:none;transition:.3s}
.char-silhouette circle,.char-silhouette path{fill:none;stroke:var(--ink);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;transition:.3s}
/* 人形按全身最高品质变色 */
.char-center.rank-2{--body:#6a8fc0}
.char-center.rank-3{--body:#9b7bb5}
.char-center.rank-4{--body:#c9a060}
.char-center.rank-5{--body:#c4a44a}
.char-center.rank-6{--body:#5a9f8f}
.char-center.rank-7{--body:#8a8ab0}
.char-center.rank-8{--body:#c45a5a}
.char-center.rank-9{--body:#5aa8c0}
.char-center.rank-10{--body:#9b70c0}
.char-center.rank-11{--body:#c77ab0}
.char-center[class*="rank-"] .char-silhouette{opacity:.2}
.char-center[class*="rank-"] .char-silhouette circle,
.char-center[class*="rank-"] .char-silhouette path{stroke:var(--body);opacity:.55}
/* 脚下法阵 */
.char-rune{position:absolute;width:68%;aspect-ratio:1;bottom:6%;border-radius:50%;border:1px dashed var(--body);opacity:0;pointer-events:none;transition:.3s}
.char-center[class*="rank-"] .char-rune{opacity:.2}
/* 身周光柱 */
.char-light{position:absolute;width:34%;height:72%;top:6%;background:linear-gradient(180deg,transparent 0%,var(--body) 48%,transparent 100%);opacity:0;mix-blend-mode:screen;pointer-events:none;transition:.3s;filter:blur(8px)}
.char-center[class*="rank-"] .char-light{opacity:.04}
/* 漂浮粒子 */
.char-sparkles{position:absolute;inset:0;pointer-events:none;opacity:0;transition:.3s}
.char-center[class*="rank-"] .char-sparkles{opacity:.5;background:radial-gradient(circle at 30% 30%,var(--body) 0,transparent 2px),radial-gradient(circle at 70% 40%,#fff 0,transparent 1.5px),radial-gradient(circle at 50% 75%,var(--body) 0,transparent 2px);background-size:120% 120%;animation:sparkleFloat 3s ease-in-out infinite}
/* 无级别臻品：淡彩虹 */
.char-center.wuji .char-silhouette circle,
.char-center.wuji .char-silhouette path{animation:bodyPulse 1.5s ease-in-out infinite,rainbowStroke 1.8s linear infinite}
.char-center.wuji .char-rune{animation:runeRotate 2.5s linear infinite,rainbowShadow 1.8s linear infinite}
.char-center.wuji .char-light{opacity:.12;background:linear-gradient(180deg,transparent 0%,#fff 48%,transparent 100%);animation:lightShimmer 2s linear infinite}
@keyframes bodyPulse{0%,100%{opacity:.45;filter:drop-shadow(0 0 2px var(--body))}50%{opacity:.75;filter:drop-shadow(0 0 var(--glow,6px) var(--body))}}
@keyframes runeRotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes sparkleFloat{0%,100%{background-position:0 0,10px 10px,0 10px}50%{background-position:10px 10px,0 0,10px 0}}
@keyframes rainbowStroke{0%{filter:drop-shadow(0 0 10px #ff5edb)}25%{filter:drop-shadow(0 0 10px #ffd15e)}50%{filter:drop-shadow(0 0 10px #7bed9f)}75%{filter:drop-shadow(0 0 10px #22c3e6)}100%{filter:drop-shadow(0 0 10px #9b30ff)}}
@keyframes rainbowShadow{0%{box-shadow:0 0 22px -4px #ff5edb,inset 0 0 18px -6px #ff5edb}25%{box-shadow:0 0 22px -4px #ffd15e,inset 0 0 18px -6px #ffd15e}50%{box-shadow:0 0 22px -4px #7bed9f,inset 0 0 18px -6px #7bed9f}75%{box-shadow:0 0 22px -4px #22c3e6,inset 0 0 18px -6px #22c3e6}100%{box-shadow:0 0 22px -4px #9b30ff,inset 0 0 18px -6px #9b30ff}}
@keyframes lightShimmer{0%{opacity:.15;transform:translateX(-4px)}50%{opacity:.28;transform:translateX(4px)}100%{opacity:.15;transform:translateX(-4px)}}
.char-equip.aura-purple{--aura:#9b7bb5}
.char-equip.aura-orange{--aura:#c9a060}
.char-equip.aura-epic{--aura:#c4a44a}
.char-equip.aura-king{--aura:#5a9f8f}
.char-equip.aura-god{--aura:#9b7bb5}
.char-equip.aura-immortal{--aura:#6a8fc0}
.char-equip.aura-chaos{--aura:#c0392b}
.char-equip.aura-hongmeng{--aura:#c4a44a}
.char-equip[class*="aura-"]{box-shadow:0 0 30px -14px var(--aura),var(--shadow)}
.char-equip[class*="aura-"] .char-silhouette circle,
.char-equip[class*="aura-"] .char-silhouette path{stroke:var(--aura);opacity:.18}
.char-equip[class*="aura-"] .char-slot:not(.empty){border-color:var(--aura)}
.char-equip[class*="aura-"] .char-ornament{background:radial-gradient(circle at 50% 50%,transparent 10%,rgba(255,255,255,0) 50%,var(--aura) 100%);opacity:.12}
.equip-footbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 16px;margin-top:12px;padding:10px 14px;border-radius:12px;
  background:rgba(255,255,255,.45);border:1px solid rgba(180,165,140,.4);font-size:12px;color:var(--ink-soft)}
.equip-footbar b{color:var(--ink);font-weight:700}
@media(max-width:680px){
  .char-equip{grid-template-columns:repeat(2,1fr);padding:12px 8px;gap:8px;max-width:100%}
  .char-slot{width:auto;min-height:64px;padding:6px 4px}
  .char-slot .cs-name{font-size:10px}
  .char-slot .cs-q{font-size:9px}
  .equip-footbar{font-size:11px;gap:8px 10px}
}
.equip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
/* 背包子页切换：已穿戴页底部"进入背囊"按钮（沿用 .iactions/.btn-gold） */

/* 背包部位筛选 tab */
.inv-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.inv-tab{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border:1px solid rgba(180,165,140,.5);background:rgba(255,255,255,.45);color:var(--ink-soft);border-radius:16px;font-size:13px;cursor:pointer;transition:.15s}
.inv-tab:hover{border-color:var(--gold);color:var(--ink)}
.inv-tab.on{background:rgba(184,147,47,.25);border-color:var(--gold);color:#5a4010;font-weight:bold}
.inv-tab-n{font-size:11px;background:rgba(0,0,0,.12);border-radius:10px;padding:0 6px;min-width:16px;text-align:center}
.inv-tab.on .inv-tab-n{background:rgba(255,255,255,.3)}
/* 背囊主 tab：装备 / 材料 / 丹药 */
.bag-main-tabs{display:flex;gap:6px;margin-bottom:14px;padding:5px;background:rgba(255,255,255,.45);border:1px solid rgba(180,165,140,.4);border-radius:14px;box-shadow:var(--shadow-sm)}
.bag-main-tab{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:5px;padding:8px 4px;border:1px solid transparent;background:transparent;border-radius:10px;font-size:13px;color:var(--ink-soft);cursor:pointer;transition:.15s}
.bag-main-tab .tico{display:inline-flex;align-items:center;justify-content:center;line-height:1;font-size:14px}
.bag-main-tab .ttxt{display:inline;white-space:nowrap}
.bag-main-tab:hover{background:rgba(139,95,33,.08);color:var(--ink)}
.bag-main-tab.on{background:rgba(184,147,47,.25);border-color:var(--gold);color:#5a4010;font-weight:700}
.bag-main-tab.disabled{opacity:.55;cursor:not-allowed;position:relative;background:rgba(0,0,0,.04)}
.bag-main-tab.disabled .tico{filter:grayscale(1)}
.bag-main-tab.disabled::after{content:'🔒';position:absolute;right:4px;top:2px;font-size:9px;opacity:.7}
.bag-main-tab.disabled:hover{background:transparent;color:var(--ink-faint)}
.trade-tab-badge{font-size:10px;background:var(--cinnabar);color:#fff;border-radius:10px;padding:0 6px;min-width:16px;text-align:center}
.bag-main-tab .ttxt + .trade-tab-badge{margin-left:4px}
.bag-main-tab.on .trade-tab-badge{background:rgba(255,255,255,.3)}
.bag-section{background:rgba(255,255,255,.45);border:1px solid rgba(180,165,140,.4);border-radius:14px;padding:14px;box-shadow:var(--shadow-sm);backdrop-filter:blur(4px)}
.bag-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.bag-section-head h3{margin:0;font-size:16px;display:flex;align-items:center;gap:6px}
.bag-count{font-size:11px;background:var(--gold);color:#fff;padding:1px 7px;border-radius:10px;font-weight:700}
.bag-section-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bag-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:10px;padding-bottom:10px;border-bottom:1px dashed rgba(180,165,140,.5)}
.bt-group{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.bt-group .btn.on{background:rgba(184,147,47,.25);color:#5a4010;border-color:var(--gold)}
.bt-hint{font-size:11px;color:var(--ink-soft);white-space:nowrap}
.bt-sell-label{font-size:12px;color:var(--ink-soft);white-space:nowrap}
.bag-toolbar select{font-size:12px;padding:4px 6px;border-radius:8px;border:1px solid var(--line);background:var(--paper);color:var(--ink)}
.bag-equip-grid .item-card{padding:10px}
.bag-equip-grid .item-card .iactions{margin-top:6px}
.bag-equip-grid .item-card .iactions .btn{padding:4px 8px;font-size:11px}
/* 材料 / 丹药 紧凑列表 */
.bag-mat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.bag-mat-row{display:flex;align-items:center;gap:8px;padding:8px 10px;background:rgba(255,255,255,.45);border:1px solid rgba(180,165,140,.4);border-radius:10px;transition:.15s}
.bag-mat-row:hover{border-color:var(--gold);background:rgba(255,255,255,.65)}
.bag-mat-info{display:flex;align-items:center;gap:7px;flex:1;min-width:0}
.bag-mat-icon{font-size:18px}
.bag-mat-name{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bag-mat-q{font-size:10px;color:var(--ink-soft);background:rgba(255,255,255,.55);padding:1px 5px;border-radius:8px;white-space:nowrap}
.bag-mat-meta{font-size:12px;color:var(--ink-soft);white-space:nowrap;text-align:right}

/* ---------- 背包图标网格（装备/材料/丹药 统一） ---------- */
.tile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tile-empty{grid-column:1/-1;text-align:center;padding:18px 0}
/* 装备瓦片 */
.equip-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:9px 4px 7px;border-radius:11px;cursor:pointer;text-align:center;
  background:rgba(255,255,255,.45);border:1px solid rgba(180,165,140,.4);
  backdrop-filter:blur(4px);transition:.15s}
.equip-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow);background:rgba(255,255,255,.62)}
.equip-tile.broken{opacity:.6}
.equip-tile .et-badges{position:absolute;top:3px;left:3px;right:3px;display:flex;gap:2px;justify-content:flex-start;flex-wrap:wrap}
.equip-tile .et-badge{font-size:9px;line-height:1;padding:1px 3px;border-radius:6px;background:rgba(0,0,0,.12);color:var(--ink-soft)}
.equip-tile .et-badge.lock{background:rgba(184,147,47,.25);color:#6b4e12}
.equip-tile .et-badge.dur{background:rgba(168,50,50,.2);color:var(--cinnabar)}
.equip-tile .et-badge.eq{background:rgba(47,109,176,.2);color:#2f6db0}
.equip-tile .et-badge.wj{background:rgba(201,162,39,.25);color:#6b4e12}
.equip-tile .et-icon{font-size:26px;line-height:1;margin-top:6px}
.equip-tile .et-name{font-size:11px;font-weight:600;color:var(--ink);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.equip-tile .et-part{font-size:9px;color:var(--ink-faint)}
/* 材料瓦片 */
.mat-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:9px 4px 7px;border-radius:11px;cursor:pointer;text-align:center;
  background:rgba(255,255,255,.45);border:1px solid rgba(180,165,140,.4);
  backdrop-filter:blur(4px);transition:.15s}
.mat-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow);background:rgba(255,255,255,.62)}
.mat-tile.tier-1{border-color:rgba(90,138,102,.5)}
.mat-tile.tier-2{border-color:rgba(127,119,221,.5)}
.mat-tile.tier-3{border-color:rgba(184,147,47,.55)}
.mat-tile.tier-4{border-color:rgba(201,162,39,.65)}
.mat-tile .mt-icon{font-size:24px;line-height:1;margin-top:2px}
.mat-tile .mt-name{font-size:11px;font-weight:600;color:var(--ink);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mat-tile .mt-q{font-size:10px;color:var(--ink-soft)}
/* 丹药瓦片 */
.potion-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:9px 4px 7px;border-radius:11px;cursor:pointer;text-align:center;
  background:rgba(255,255,255,.45);border:1px solid rgba(180,165,140,.4);
  backdrop-filter:blur(4px);transition:.15s}
.potion-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow);background:rgba(255,255,255,.62)}
.potion-tile.cooling{opacity:.55}
.potion-tile .pt-icon{font-size:24px;line-height:1;margin-top:2px}
.potion-tile .pt-name{font-size:11px;font-weight:600;color:var(--ink);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.potion-tile .pt-q{font-size:10px;color:var(--ink-soft)}
.potion-tile .pt-cd{color:var(--cinnabar);margin-left:2px}
/* 武学瓦片 */
.skill-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:9px 4px 7px;border-radius:11px;cursor:pointer;text-align:center;
  background:rgba(255,255,255,.45);border:1px solid rgba(180,165,140,.4);
  backdrop-filter:blur(4px);transition:.15s}
.skill-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow);background:rgba(255,255,255,.62)}
.skill-tile.unlearned{opacity:.7}
.skill-tile.maxed{border-color:var(--gold)}
.skill-tile.book{border-color:rgba(184,147,47,.5)}
.skill-tile .sk-icon{font-size:24px;line-height:1;margin-top:2px}
.skill-tile .sk-name{font-size:11px;font-weight:600;color:var(--ink);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.skill-tile .sk-lv{font-size:10px;color:var(--ink-soft)}
/* 成就瓦片 */
.ach-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:9px 4px 7px;border-radius:11px;cursor:pointer;text-align:center;
  background:rgba(255,255,255,.45);border:1px solid rgba(180,165,140,.4);
  border-top:2px solid var(--c,rgba(180,165,140,.4));
  backdrop-filter:blur(4px);transition:.15s}
.ach-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow);background:rgba(255,255,255,.62)}
.ach-tile.locked{opacity:.65}
.ach-tile .ach-tile-ico{font-size:24px;line-height:1;margin-top:2px}
.ach-tile .ach-tile-name{font-size:11px;font-weight:600;color:var(--ink);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ach-tile .ach-tile-tier{font-size:9px;color:var(--c,#9e978c)}
.ach-tile .ach-tile-bar{height:4px;width:80%;background:rgba(0,0,0,.08);border-radius:3px;margin-top:4px;overflow:hidden}
.ach-tile .ach-tile-fill{height:100%;background:var(--c,#9e978c);border-radius:3px}

/* ---------- 背包：水墨仙侠仓库 ---------- */
.content.view-bag{padding:0 0 66px!important;background:transparent;overflow:hidden}
.bag-ink-view{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden}
.bag-bamboo-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.bag-mist{position:absolute;bottom:0;left:0;right:0;height:100px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.7));pointer-events:none;z-index:1}
.bag-crane{position:absolute;top:6%;right:10%;font-size:40px;z-index:1;opacity:.8;filter:drop-shadow(0 2px 3px rgba(0,0,0,.1));animation:craneFly 8s ease-in-out infinite;pointer-events:none}
.bag-header{position:relative;z-index:2;flex:none;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:rgba(255,255,255,.5);border-bottom:1px solid rgba(180,165,140,.35);backdrop-filter:blur(4px)}
.bag-user{display:flex;align-items:center;gap:10px;min-width:0}
.bag-avatar{flex:none;width:46px;height:46px;border-radius:50%;background:var(--paper);border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;font-size:24px}
.bag-user-info{flex:1;min-width:0}
.bag-name{font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bag-lv{font-size:12px;color:var(--ink-soft);margin-top:2px}
.bag-currency{display:flex;align-items:center;gap:10px;flex:none}
.bag-coin{display:flex;align-items:center;gap:6px}
.bag-coin-ico{font-size:18px}
.bag-coin-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2}
.bag-coin-lbl{font-size:10px;color:var(--ink-faint)}
.bag-coin b{font-size:13px;color:var(--ink)}
.bag-tabs{position:relative;z-index:2;flex:none;display:flex;gap:4px;padding:8px 10px;background:rgba(255,255,255,.45);border-bottom:1px solid rgba(180,165,140,.35)}
.bag-tab{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:3px;padding:5px 2px;border:1px solid rgba(180,165,140,.45);background:rgba(255,255,255,.55);border-radius:12px;font-size:11px;color:var(--ink-soft);cursor:pointer;transition:.15s;-webkit-tap-highlight-color:transparent}
.bag-tab:hover{border-color:var(--gold);color:var(--ink)}
.bag-tab.on{background:linear-gradient(180deg,var(--cinnabar),#b03530);border-color:var(--cinnabar);color:#fff;font-weight:700}
.bag-tab .bt-ico{font-size:12px}
.bag-tab .bt-txt{white-space:nowrap}
.bag-tab .bt-n{font-size:9px;background:rgba(0,0,0,.1);border-radius:8px;padding:0 4px;margin-left:1px}
.bag-tab.on .bt-n{background:rgba(255,255,255,.25)}
.bag-grid{position:relative;z-index:2;flex:1;min-height:0;overflow-y:auto;padding:12px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-content:start}
.bag-empty{grid-column:1/-1;text-align:center;padding:40px 0;color:var(--ink-faint);font-size:14px}
.bag-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px 6px;border-radius:12px;cursor:pointer;text-align:center;background:rgba(255,255,255,.55);border:1px solid rgba(180,165,140,.4);backdrop-filter:blur(3px);transition:.15s;-webkit-tap-highlight-color:transparent}
.bag-item:hover,.bag-item.selected{transform:translateY(-2px);background:rgba(255,255,255,.75);box-shadow:0 4px 12px rgba(0,0,0,.08);border-color:var(--gold)}
.bag-item.equipped{border-color:rgba(47,109,176,.5)}
.bag-item.wuji{border-color:var(--gold)}
.bag-item .bag-item-ico{font-size:26px;line-height:1;margin-top:4px}
.bag-item .bag-item-name{font-size:11px;font-weight:600;color:var(--ink);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bag-item .bag-item-q{font-size:9px;color:var(--ink-faint)}
.bag-count{position:absolute;top:3px;right:3px;font-size:10px;background:var(--cinnabar);color:#fff;border-radius:8px;padding:1px 5px;min-width:16px;text-align:center}
.bag-lock{position:absolute;top:3px;left:3px;font-size:10px}
.bag-equip-tag{position:absolute;top:3px;right:3px;font-size:9px;background:rgba(47,109,176,.2);color:#2f6db0;border-radius:8px;padding:1px 4px}
.bag-item .bag-count + .bag-item-ico{margin-top:6px}
.bag-detail{position:relative;z-index:3;flex:none;display:flex;gap:10px;padding:12px 14px;background:rgba(255,255,255,.9);border-top:1px solid rgba(180,165,140,.4);border-radius:16px 16px 0 0;box-shadow:0 -4px 20px rgba(0,0,0,.08);animation:slideUp .35s ease-out}
.bag-detail-left{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:32px;background:var(--cinnabar);color:#fff;border-radius:10px;padding:6px 2px;font-size:12px;font-weight:700;letter-spacing:2px;writing-mode:vertical-rl;text-orientation:upright}
.bag-detail-body{flex:1;min-width:0;display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.bag-detail-icon{flex:none;width:52px;height:52px;border-radius:12px;background:var(--paper);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:28px}
.bag-detail-info{flex:1 1 140px;min-width:140px}
.bag-detail-name{font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bag-detail-desc{font-size:12px;color:var(--ink-soft);line-height:1.5;margin-top:2px}
.bag-detail-actions{flex:1 1 100%;display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap;margin-top:6px}
.bag-detail-actions .btn{padding:4px 8px;font-size:12px}
body.lang-en .bag-detail-left{writing-mode:horizontal-tb;letter-spacing:0;width:auto;padding:2px 8px}

.ach-total{display:flex;align-items:center;gap:10px;margin:6px 0 12px}
.ach-total-bar{flex:1;height:12px;background:rgba(0,0,0,.08);border-radius:7px;overflow:hidden}
.ach-total-fill{height:100%;background:linear-gradient(90deg,var(--gold),#d4c496);border-radius:7px;transition:width .4s}
.ach-total-txt{font-size:12px;color:var(--ink-soft);flex:none;font-weight:600}
.page-header{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.page-header h2{margin:0;padding:0;border:none}
.page-sub{font-size:13px;color:var(--ink-soft);font-weight:500}
.page-sub b{color:var(--ink);font-weight:700}
.pill{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border:1px solid rgba(180,165,140,.5);background:rgba(255,255,255,.55);border-radius:12px;font-size:12px;color:var(--ink-soft)}
.pill b{color:var(--ink);font-weight:600}
.sub{margin:14px 0 6px;color:var(--ink-soft);font-size:14px;font-weight:600;display:flex;align-items:baseline;gap:8px}
/* ===== 声望荣誉卡（H5 重做） ===== */
.prestige-hero{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;
  background:rgba(255,255,255,.5);border:1px solid rgba(180,165,140,.4);
  box-shadow:var(--shadow);position:relative;overflow:hidden;margin-bottom:10px;backdrop-filter:blur(4px)}
.prestige-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 86% 18%,rgba(212,168,67,.10),transparent 60%);pointer-events:none}
.ph-badge{flex:none;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:26px;background:rgba(255,255,255,.7);border:2px solid var(--pc);box-shadow:0 0 0 3px rgba(212,168,67,.08),0 4px 10px rgba(0,0,0,.1)}
.ph-main{flex:1;min-width:0}
.ph-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.ph-name{font-size:19px;font-weight:bold;color:var(--pc);letter-spacing:1px}
.ph-val{font-size:13px;color:var(--ink-soft);font-weight:600;white-space:nowrap}
.ph-track{height:9px;background:rgba(0,0,0,.08);border-radius:6px;overflow:hidden;margin:8px 0 5px}
.ph-fill{height:100%;background:linear-gradient(90deg,var(--pc),#d4c496);border-radius:6px;transition:width .5s}
.ph-tip{font-size:12px;color:var(--ink-soft)}
.ph-tip b{color:var(--cinnabar)}
.ph-meta{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 14px;font-size:12.5px;color:var(--ink-soft)}
.ph-ladder{display:flex;align-items:center;gap:0;overflow-x:auto;padding:2px 2px 8px;margin-bottom:8px;scrollbar-width:thin}
.ph-ladder::-webkit-scrollbar{height:4px}
.ph-ladder::-webkit-scrollbar-thumb{background:var(--line);border-radius:2px}
.ph-step{display:flex;flex-direction:column;align-items:center;gap:3px;flex:none;opacity:.4;transition:.2s}
.ph-step.on{opacity:1}
.ph-dot{width:12px;height:12px;border-radius:50%;background:var(--sc);box-shadow:0 0 0 3px rgba(255,255,255,.65)}
.ph-line{flex:none;width:24px;height:2px;background:var(--line);margin:0 -2px 15px}
.ph-step-name{font-size:10.5px;white-space:nowrap;color:var(--ink-soft)}
.title-cloud{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0 12px}
.title-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border:1px solid var(--line);
  background:var(--paper);color:var(--ink-soft);border-radius:16px;font-size:12.5px;cursor:pointer;transition:.15s}
.title-chip i{font-style:normal;font-size:10.5px;color:var(--gold-2);opacity:.85}
.title-chip.on{background:var(--gold);border-color:var(--gold);color:#fff;font-weight:bold}
.title-chip.on i{color:#fff;opacity:.92}
/* ===== 成就页：紧凑列表 + 兼容原卡片 ===== */
.ach-list{display:flex;flex-direction:column;gap:6px;margin:6px 0 14px}
.ach-row{display:flex;align-items:flex-start;gap:10px;background:rgba(255,255,255,.45);border:1px solid rgba(180,165,140,.4);border-radius:10px;padding:8px 10px;position:relative;transition:.15s}
.ach-row.done{border-left:3px solid var(--c);background:rgba(255,255,255,.65)}
.ach-row.locked{opacity:.72}
.ach-row-ico{flex:none;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;background:rgba(0,0,0,.06)}
.ach-row.done .ach-row-ico{background:color-mix(in srgb,var(--c) 14%,#fff);box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 26%,transparent)}
.ach-row-main{flex:1;min-width:0}
.ach-row-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:2px}
.ach-row-name{font-weight:600;font-size:14px;color:var(--ink)}
.ach-row-tier{font-size:10px;padding:1px 6px;border-radius:8px;background:rgba(255,255,255,.7);color:var(--c);font-weight:600;white-space:nowrap}
.ach-row-prog{font-size:11px;color:var(--ink-soft);margin-left:auto;white-space:nowrap}
.ach-row-desc{font-size:12px;color:var(--ink-soft);line-height:1.4;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ach-row-prog-line{display:flex;align-items:center;gap:6px;margin-bottom:3px}
.ach-row-bar{flex:1;min-width:0;height:5px;background:#e7dfcd;border-radius:4px;overflow:hidden}
.ach-row-fill{height:100%;background:linear-gradient(90deg,var(--c),#d4c496);border-radius:4px;transition:width .4s}
.ach-row-reward{display:flex;flex-wrap:wrap;gap:4px}
.ach-row-reward .ach-rw{font-size:10px;padding:1px 6px;border-radius:8px;background:rgba(0,0,0,.05);color:var(--ink-soft)}
.ach-row.done .ach-row-reward .ach-rw{background:rgba(184,147,47,.15);color:#5a4010}
/* 分类 tab：复用交易页主 tab 风格（带背景容器，可换行） */
.ach-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.ach-tabs.ach-show{margin-bottom:14px}
.ach-cat-tabs{margin-bottom:8px;gap:6px;flex-wrap:wrap}
.ach-cat-tabs .bag-main-tab{flex:1 1 auto;min-width:72px;min-height:48px}
.ach-cat-tabs .bag-main-tab .ach-tab-n{margin-top:2px}
.ach-cat-tabs .bag-main-tab.on .ach-tab-n{background:rgba(255,255,255,.3);color:inherit}
.ach-show-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:14px}
.ach-show-grid .ach-tab{width:100%;justify-content:center;padding:5px 4px;font-size:12px}
/* ===== 成就卡片（H5 重做，替代 item-card 套用） ===== */
.ach-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin:6px 0 14px}
.ach-card{display:flex;gap:11px;background:rgba(255,255,255,.45);border-radius:12px;padding:12px;
  border:1px solid rgba(180,165,140,.4);position:relative;transition:.15s;box-shadow:var(--shadow)}
.ach-card.done{border-left:4px solid var(--c);background:rgba(255,255,255,.65)}
.ach-card.locked{opacity:.68}
.ach-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.ach-ico{flex:none;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:21px;background:rgba(0,0,0,.06)}
.ach-card.done .ach-ico{background:color-mix(in srgb,var(--c) 16%,#fff);box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 32%,transparent)}
.ach-body{flex:1;min-width:0}
.ach-head{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:3px}
.ach-name{font-weight:600;font-size:14.5px;color:var(--ink)}
.ach-tier{flex:none;font-size:10.5px;padding:1px 7px;border-radius:10px;background:rgba(255,255,255,.7);color:var(--c);font-weight:600;white-space:nowrap}
.ach-desc{font-size:12px;color:var(--ink-soft);line-height:1.5;margin-bottom:5px}
.ach-bar{height:7px;background:#e7dfcd;border-radius:5px;overflow:hidden;margin:4px 0 2px}
.ach-fill{height:100%;background:linear-gradient(90deg,var(--c),#d4c496);border-radius:5px;transition:width .4s}
.ach-prog{font-size:11px;color:var(--ink-soft);text-align:right}
.ach-reward{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.ach-rw{font-size:10.5px;padding:1px 7px;border-radius:10px;background:rgba(0,0,0,.05);color:var(--ink-soft)}
.ach-card.done .ach-rw{background:rgba(184,147,47,.15);color:#5a4010}
.ach-tab{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border:1px solid rgba(180,165,140,.5);background:rgba(255,255,255,.45);color:var(--ink-soft);border-radius:16px;font-size:13px;cursor:pointer;transition:.15s}
.ach-tab:hover{border-color:var(--gold);color:var(--ink)}
.ach-tab.on{background:rgba(184,147,47,.25);border-color:var(--gold);color:#5a4010;font-weight:bold}
.ach-tab-n{font-size:11px;background:rgba(0,0,0,.12);border-radius:10px;padding:0 6px}
.ach-tab.on .ach-tab-n{background:rgba(255,255,255,.3)}
/* 排行页：英雄榜排序切换 */
.rank-tabs{display:flex;gap:6px;margin-bottom:8px}
.rank-tab{padding:5px 16px;border:1px solid rgba(180,165,140,.5);background:rgba(255,255,255,.45);color:var(--ink-soft);border-radius:16px;font-size:13px;cursor:pointer;transition:.15s}
.rank-tab:hover{border-color:var(--gold);color:var(--ink)}
.rank-tab.on{background:rgba(184,147,47,.25);border-color:var(--gold);color:#5a4010;font-weight:bold}
/* 排行：原生列表行（替代旧表格） */
.rank-list{display:flex;flex-direction:column}
.rank-empty{padding:24px;text-align:center}
.rank-row{display:flex;align-items:center;gap:10px;padding:9px 8px;border-bottom:1px solid var(--line);font-size:14px}
.rank-row:last-child{border-bottom:none}
.rank-row.me{background:rgba(201,162,39,.1);border-radius:8px}
.rank-row .rr-rank{width:30px;flex:none;text-align:center;font-size:15px;font-variant-numeric:tabular-nums;color:var(--ink-soft)}
.rank-row .rr-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-row .rr-me{color:var(--cinnabar);font-size:12px;font-weight:600}
.rank-row .rr-epic{color:var(--gold);margin-left:2px}
.rank-row .rr-lv{width:56px;flex:none;text-align:center;color:var(--ink-soft);font-size:13px}
.rank-row .rr-val{flex:none;font-weight:700;font-variant-numeric:tabular-nums}
/* 装备榜：装备行布局 */
.rank-row.equip-rank{cursor:pointer;-webkit-tap-highlight-color:transparent}
.rank-row.equip-rank:active{opacity:.9;background:var(--paper)}
.rank-row.equip-rank .rr-equip{display:flex;flex-direction:column;flex:1;min-width:0;gap:2px}
.rank-row.equip-rank .rr-equip span:first-child{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-row.equip-rank .rr-equip .muted{font-size:11px;color:var(--ink-soft)}
.rank-row .rr-owner{flex:none;min-width:64px;text-align:right;color:var(--ink-soft);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-row .rr-owner .rr-me{color:var(--cinnabar);font-weight:600}
/* 耐久告急角标 */
.dur-warn{position:absolute;top:4px;left:4px;z-index:1;font-size:11px;font-weight:bold;color:#fff;background:#e8954c;border-radius:6px;padding:1px 6px;box-shadow:var(--shadow)}
.dur-warn.broken{background:#a83232}
/* 角色页预设一键加点 */
.alloc-presets{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;margin-left:8px}
.alloc-presets .btn{padding:3px 10px}

/* ---------- 地图/区域 ---------- */
.region-card{background:rgba(255,255,255,.45);border-radius:12px;padding:14px;border:1px solid rgba(180,165,140,.4);border-left:3px solid var(--ink-faint);cursor:pointer;transition:.15s;position:relative;overflow:hidden;backdrop-filter:blur(4px)}
.region-card::before,.region-card::after{content:'';position:absolute;width:38px;height:38px;pointer-events:none;background-repeat:no-repeat;background-size:contain;opacity:.12;transition:opacity .2s}
.region-card::before{top:0;right:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M4 0C18 2 28 12 28 28s8 20 20 20' fill='none' stroke='%232b2620' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='24' cy='24' r='3' fill='%232b2620'/%3E%3C/svg%3E")}
.region-card::after{bottom:0;left:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M4 0C18 2 28 12 28 28s8 20 20 20' fill='none' stroke='%232b2620' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='24' cy='24' r='3' fill='%232b2620'/%3E%3C/svg%3E");transform:rotate(180deg)}
.region-card:hover{background:rgba(255,255,255,.6);transform:translateX(3px)}
.region-card:hover::before,.region-card:hover::after{opacity:.22}
.region-card.locked{opacity:.5;cursor:not-allowed;border-left-color:var(--ink-faint)}
.region-card.boss{border-left-color:var(--cinnabar)}
.region-card.mine{border-left-color:var(--gold)}
/* 可稳定挂机(弱怪)区域高亮：仅左侧加玉色 */
.region-card.farmable{border-left-color:var(--jade);background:rgba(250,255,250,.55)}
.region-card.best{box-shadow:0 0 0 1px var(--gold) inset,var(--shadow)}
.region-card.toohard{opacity:.72}
.region-card h3{margin:0 0 4px;color:var(--ink);font-size:15px;font-weight:600}
.region-card .req{font-size:12px;color:var(--ink-soft);margin-top:6px}

/* ---------- 打造 ---------- */
.craft-mat{display:flex;align-items:center;gap:8px;background:var(--paper);border-radius:8px;padding:8px 10px}
.craft-mat .mi{font-size:20px}
.craft-mat .qctrl{margin-left:auto;display:flex;align-items:center;gap:6px}
.craft-mat .qctrl input{width:48px;text-align:center;padding:4px;border:1px solid var(--line);border-radius:6px;background:#fff;font-family:inherit}
.prob-line{display:flex;justify-content:space-between;font-size:13px;padding:3px 0;border-bottom:1px dashed var(--line)}

/* ---------- 战斗：水墨荒野挂机场景 ---------- */
#battleOverlay{position:fixed;inset:0;z-index:50;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#1a1a1a}
.battle-wild-bg{position:absolute;inset:0;background:#e9dccc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 700' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='sky' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23f8e8d0'/%3E%3Cstop offset='45%25' stop-color='%23f0d4b0'/%3E%3Cstop offset='100%25' stop-color='%23c8b898'/%3E%3C/linearGradient%3E%3ClinearGradient id='grass' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23d4b88a'/%3E%3Cstop offset='100%25' stop-color='%23bfa070'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='400' height='700' fill='url(%23sky)'/%3E%3Cpath d='M0 360 Q80 330 160 350 T320 340 T400 350 V700 H0 Z' fill='url(%23grass)' opacity='.9'/%3E%3Cpath d='M0 420 Q90 400 180 415 T360 405 T400 410 V700 H0 Z' fill='%23bfa070' opacity='.6'/%3E%3Cpath d='M-20 260 Q60 200 120 250 T260 230 T420 260 V360 H-20 Z' fill='%23c49a6c' opacity='.35'/%3E%3Cpath d='M60 220 Q90 120 120 220 Z' fill='%237a5c3c' opacity='.25'/%3E%3Cpath d='M280 240 Q320 140 360 240 Z' fill='%237a5c3c' opacity='.25'/%3E%3Cpath d='M150 180 Q200 80 250 180 Z' fill='%239e7a55' opacity='.3'/%3E%3Cpath d='M0 700 L40 420 L80 700 Z M120 700 L160 450 L200 700 Z M300 700 L340 430 L400 700 Z' fill='%235a4a35' opacity='.18'/%3E%3Cpath d='M20 380 Q35 280 50 380 M70 400 Q85 300 100 400 M330 390 Q345 290 360 390 M300 420 Q315 320 330 420' stroke='%234a5a3a' stroke-width='2' fill='none' opacity='.55'/%3E%3Cpath d='M10 360 Q30 340 50 360 M350 350 Q370 330 390 350 M180 330 Q200 310 220 330' stroke='%23fff' stroke-width='4' fill='none' opacity='.25'/%3E%3C/svg%3E") no-repeat center/cover;z-index:0}
.battle-wild-mist{position:absolute;left:0;right:0;height:120px;pointer-events:none;opacity:.55;z-index:1;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);filter:blur(8px);animation:mistDrift 8s ease-in-out infinite}
.battle-wild-mist-1{top:28%;animation-delay:0s}
.battle-wild-mist-2{top:52%;animation-delay:4s;opacity:.4}
.battle-wild-view{position:relative;z-index:2;width:100%;height:100%;max-width:480px;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;padding:16px 14px 18px;box-sizing:border-box}
.battle-wild-header{flex:none;display:flex;justify-content:space-between;align-items:center;gap:10px}
.battle-wild-header #battleTitle{font-size:22px;font-weight:800;color:#3a2e10;font-family:'Ma Shan Zheng',cursive;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.battle-wild-actions{display:flex;gap:8px}
.battle-wild-actions .btn{font-size:12px;padding:6px 12px;border-radius:20px;background:rgba(255,255,255,.55);border:1px solid var(--line);color:#3a2e10}
.battle-wild-actions .btn-ghost{background:rgba(255,255,255,.35)}
.battle-wild-progress{flex:none;display:flex;align-items:center;gap:8px;margin:12px 0 0}
.battle-wild-prog-label{font-size:13px;color:#3a2e10;white-space:nowrap;font-weight:700}
.battle-wild-prog-bar{flex:1;height:10px;background:rgba(0,0,0,.15);border-radius:10px;overflow:hidden;border:1px solid rgba(0,0,0,.08)}
.battle-wild-prog-fill{height:100%;width:0%;background:linear-gradient(90deg,#7ed6c1,#4ecdc4);border-radius:10px;transition:width .2s}
.battle-wild-prog-text{font-size:13px;color:#3a2e10;font-weight:800;min-width:38px;text-align:right}
.battle-wild-scene{flex:1;position:relative;margin:8px 0;min-height:0;overflow:hidden;border-radius:16px}
.wild-grass{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 70%,rgba(180,150,100,.35),transparent 70%);pointer-events:none}
.wild-bamboo{position:absolute;top:0;bottom:0;width:42px;pointer-events:none;z-index:1}
.wild-bamboo-left{left:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 300'%3E%3Cg opacity='.55'%3E%3Cpath d='M10 300 V20' stroke='%233a5a3a' stroke-width='4'/%3E%3Cpath d='M22 300 V40' stroke='%233a5a3a' stroke-width='3'/%3E%3Cpath d='M32 280 V80' stroke='%233a5a3a' stroke-width='2.5'/%3E%3Cpath d='M10 60 L25 45 M10 110 L28 95 M10 170 L26 155 M10 230 L24 215' stroke='%233a5a3a' stroke-width='2' fill='none'/%3E%3Cpath d='M22 90 L38 75 M22 150 L36 135 M32 120 L42 105' stroke='%233a5a3a' stroke-width='1.5' fill='none'/%3E%3C/g%3E%3C/svg%3E") no-repeat bottom center/100% 100%}
.wild-bamboo-right{right:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 300'%3E%3Cg opacity='.55'%3E%3Cpath d='M32 300 V20' stroke='%233a5a3a' stroke-width='4'/%3E%3Cpath d='M20 300 V40' stroke='%233a5a3a' stroke-width='3'/%3E%3Cpath d='M10 280 V80' stroke='%233a5a3a' stroke-width='2.5'/%3E%3Cpath d='M32 60 L17 45 M32 110 L16 95 M32 170 L18 155 M32 230 L20 215' stroke='%233a5a3a' stroke-width='2' fill='none'/%3E%3Cpath d='M20 90 L4 75 M20 150 L6 135 M10 120 L0 105' stroke='%233a5a3a' stroke-width='1.5' fill='none'/%3E%3C/g%3E%3C/svg%3E") no-repeat bottom center/100% 100%}
.wild-reed{position:absolute;bottom:10%;font-size:24px;opacity:.55;filter:drop-shadow(0 2px 2px rgba(0,0,0,.2));pointer-events:none;animation:reedSway 3s ease-in-out infinite;z-index:1}
.wild-reed-1{left:8%;animation-delay:0s}
.wild-reed-2{left:18%;animation-delay:1.2s}
.wild-reed-3{right:15%;animation-delay:.6s}
.wild-reed-4{right:7%;animation-delay:2.1s}
.wild-crane{position:absolute;top:8%;right:12%;font-size:28px;opacity:.75;animation:craneFly 6s ease-in-out infinite;z-index:1;pointer-events:none}
.wild-enemy{position:absolute;display:flex;flex-direction:column;align-items:center;gap:2px;z-index:3;transition:transform .2s}
.wild-enemy .figure-wrap{width:64px;height:64px;display:flex;align-items:center;justify-content:center;position:relative}
.wild-enemy .figure{font-size:48px;line-height:1;transition:transform .15s;will-change:transform}
.wild-enemy .cname{font-size:13px;font-weight:700;color:#3a2e10;text-shadow:0 1px 0 rgba(255,255,255,.7);white-space:nowrap}
.wild-enemy .clv{font-size:11px;color:#5a4a35}
.wild-enemy-1{top:18%;left:50%;transform:translateX(-50%)}
.wild-enemy-2{top:28%;left:6%;font-size:36px;opacity:.85;animation:enemyFloat 3s ease-in-out infinite}
.wild-enemy-3{top:32%;right:6%;font-size:34px;opacity:.8;animation:enemyFloat 3.5s ease-in-out infinite .5s}
.wild-enemy-4{top:44%;left:18%;font-size:30px;opacity:.7;animation:enemyFloat 4s ease-in-out infinite 1s}
.wild-player{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;z-index:4}
.wild-player .figure-wrap{width:90px;height:90px;display:flex;align-items:center;justify-content:center;position:relative;filter:drop-shadow(0 6px 8px rgba(0,0,0,.25))}
.wild-player .figure{font-size:64px;line-height:1;transition:transform .15s;will-change:transform}
.wild-player .cname{font-size:14px;font-weight:700;color:#3a2e10;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.wild-player .clv{font-size:12px;color:#5a4a35}
.wild-vs{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font-size:24px;color:#c0392b;opacity:.75;z-index:2;text-shadow:0 0 8px rgba(192,57,43,.4);pointer-events:none;animation:vsPulse 1.5s ease-in-out infinite}
.battle-wild-loot{flex:none;height:32px;display:flex;align-items:center;justify-content:center;margin:6px 0;z-index:4}
.loot-pill{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.75);border:1px solid var(--gold);border-radius:20px;padding:5px 14px;font-size:14px;font-weight:700;color:#5a401f;box-shadow:0 2px 8px rgba(0,0,0,.1);animation:lootPop .5s ease-out}
.loot-pill.hidden{opacity:0;pointer-events:none;animation:none}
.battle-wild-footer{flex:none;background:rgba(255,255,255,.55);border:1px solid rgba(180,165,140,.45);border-radius:16px;padding:12px 14px;backdrop-filter:blur(6px) saturate(1.05);-webkit-backdrop-filter:blur(6px) saturate(1.05);z-index:4}
.wild-hp-row{display:flex;gap:10px;margin-bottom:8px}
.wild-hp{flex:1;display:flex;flex-direction:column;gap:3px}
.wild-hp span{font-size:11px;font-weight:700;color:#5a4a35}
.wild-hp-bar{position:relative;height:14px;background:rgba(0,0,0,.12);border-radius:10px;overflow:hidden}
.wild-hp-fill{height:100%;background:linear-gradient(90deg,var(--cinnabar),#c05050);transition:width .2s;width:100%;border-radius:10px}
.wild-hp.self .wild-hp-fill{background:linear-gradient(90deg,#4a7c59,#6b9b78)}
.wild-hp-bar span{position:absolute;width:100%;text-align:center;top:0;left:0;font-size:9px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);line-height:14px;font-weight:700}
.wild-actions .skill-bar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 8px}
.wild-actions .skill-btn{flex:1;min-width:80px;padding:8px 6px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.6);font-size:13px;color:#3a2e10;font-weight:700}
.wild-actions .skill-btn:disabled{opacity:.4}
.battle-wild-footer .battle-log{height:90px;overflow-y:auto;background:rgba(255,255,255,.45);border-radius:10px;padding:8px 10px;font-size:12px;line-height:1.6}
.battle-wild-footer .battle-log .ln{border-bottom:1px dashed rgba(0,0,0,.1);padding:2px 0}

/* 荒野场景动效 */
@keyframes mistDrift{0%,100%{transform:translateX(-10%)}50%{transform:translateX(10%)}}
@keyframes reedSway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes craneFly{0%,100%{transform:translate(0,0) rotate(0deg)}25%{transform:translate(8px,-4px) rotate(3deg)}50%{transform:translate(-4px,2px) rotate(-2deg)}75%{transform:translate(6px,-2px) rotate(2deg)}}
@keyframes enemyFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes vsPulse{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}}
@keyframes lootPop{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}

/* 攻击前冲/受击/暴击/闪避/死亡 —— 复用旧动画 */
.wild-enemy.attack .figure{animation:attackSlide 0.32s ease-out}
.wild-player.attack .figure{animation:attackSlide 0.32s ease-out}
.wild-enemy.hit .figure-wrap{animation:hitShake 0.28s ease-out}
.wild-player.hit .figure-wrap{animation:hitShake 0.28s ease-out}
.wild-enemy.crit-hit .figure-wrap{animation:critShake 0.35s ease-out}
.wild-player.crit-hit .figure-wrap{animation:critShake 0.35s ease-out}
.wild-enemy.dodge .figure{animation:dodgeFlash 0.3s ease-out}
.wild-enemy.dying .figure{animation:deathFade 0.5s ease-out forwards}
.wild-player.dying .figure{animation:deathFade 0.4s ease-out forwards}
.wild-enemy.rage .figure{animation:ragePulse 0.6s ease-in-out 3}
.wild-enemy.boss-enter .figure-wrap::before{content:'';position:absolute;inset:-8px;border:2px solid var(--gold);border-radius:50%;animation:bossRing 0.5s ease-out 2;opacity:.5;pointer-events:none}
.wild-enemy.enter .figure{animation:enterDrop 0.4s ease-out}
.wild-player.enter .figure{animation:enterDrop 0.3s ease-out}

/* 战斗结果横幅 */
.battle-result{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);font-size:48px;font-weight:bold;z-index:20;pointer-events:none;text-shadow:0 4px 20px rgba(0,0,0,.3)}
.battle-result.win{color:var(--gold);animation:resultWin 0.6s ease-out forwards}
.battle-result.lose{color:var(--cinnabar);animation:resultLose 0.5s ease-out forwards}

/* ---------- 遮罩/创建 ---------- */
.overlay{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:50;overflow:hidden}

/* ============================================================
   水墨仙侠登录页
   ============================================================ */
#authOverlay{
  background:linear-gradient(180deg,#e8f0f0 0%,#d4e4e4 40%,#c5d8d8 100%);
  color:#2b2620;
}
#authOverlay::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 20%,rgba(255,255,255,.55),rgba(255,255,255,0) 55%),
             radial-gradient(circle at 80% 70%,rgba(255,255,255,.35),rgba(255,255,255,0) 40%);
  pointer-events:none;
}

/* 背景层 */
.ink-auth-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ink-sky{position:absolute;inset:0;background:linear-gradient(180deg,#e8f0f0 0%,#cfdfdf 55%,#b8d0d0 100%)}

/* 远山（水墨层叠） */
.ink-mountains{position:absolute;left:0;right:0;bottom:0;background-repeat:repeat-x;background-size:1200px auto}
.ink-mountains-far{
  height:46%;bottom:28%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cpath d='M0 300 L0 160 C120 140 220 90 340 120 C460 150 520 80 640 100 C760 120 840 60 960 90 C1060 110 1120 130 1200 120 L1200 300 Z' fill='%239db5b5' opacity='0.35'/%3E%3C/svg%3E");
  opacity:.7;
}
.ink-mountains-mid{
  height:40%;bottom:18%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 260' preserveAspectRatio='none'%3E%3Cpath d='M0 260 L0 100 C140 80 260 130 400 90 C540 50 620 120 780 100 C940 80 1060 110 1200 90 L1200 260 Z' fill='%237a9a9a' opacity='0.45'/%3E%3C/svg%3E");
  opacity:.85;
}
.ink-mountains-near{
  height:30%;bottom:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath d='M0 200 L0 120 C160 80 300 140 500 90 C720 35 880 110 1050 80 C1140 60 1180 90 1200 85 L1200 200 Z' fill='%235a8080'/%3E%3C/svg%3E");
  opacity:.95;
}

/* 湖水 */
.ink-lake{position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(180deg,rgba(170,195,195,.55),rgba(140,175,175,.75));}
.ink-lake::after{
  content:'';position:absolute;left:0;right:0;top:0;height:100%;
  background:repeating-linear-gradient(90deg,transparent,transparent 60px,rgba(255,255,255,.08) 60px,rgba(255,255,255,.08) 62px);
  opacity:.6;
}

/* 云雾 */
.ink-mist{position:absolute;left:-20%;width:140%;height:80px;background:radial-gradient(ellipse at center,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 70%);filter:blur(18px);opacity:.7;animation:inkDrift 24s linear infinite}
.ink-mist-1{top:22%;animation-duration:32s}
.ink-mist-2{top:38%;animation-duration:26s;animation-delay:-8s}
.ink-mist-3{top:52%;animation-duration:38s;animation-delay:-16s}
@keyframes inkDrift{0%{transform:translateX(-10%)}50%{transform:translateX(10%)}100%{transform:translateX(-10%)}}

/* 仙鹤 */
.ink-crane{
  position:absolute;left:10%;top:32%;width:120px;height:70px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 70'%3E%3Cpath d='M30 50 C40 40 55 35 70 38 C85 41 95 35 105 30 C100 34 92 38 85 42 C95 40 108 36 115 32 C110 38 100 44 88 48 C78 51 66 52 55 50 C45 55 38 60 32 58 C28 56 28 52 30 50 Z' fill='%23fff' stroke='%234a6060' stroke-width='1.5'/%3E%3Cpath d='M55 50 C52 42 54 35 60 32 C58 38 60 45 65 48' fill='none' stroke='%234a6060' stroke-width='1.5'/%3E%3Cpath d='M70 38 C72 30 78 24 86 22 C82 28 80 34 82 40' fill='none' stroke='%234a6060' stroke-width='1.5'/%3E%3Ccircle cx='102' cy='30' r='2' fill='%23c04040'/%3E%3Cpath d='M32 58 C25 62 18 60 12 56' fill='none' stroke='%234a6060' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat;opacity:.9;animation:inkCraneFly 18s ease-in-out infinite;
}
@keyframes inkCraneFly{0%,100%{transform:translate(0,0)}25%{transform:translate(40px,-12px)}50%{transform:translate(80px,0)}75%{transform:translate(120px,-16px)}}

/* 竹子 */
.ink-bamboo{position:absolute;bottom:0;width:80px;height:55%;background-repeat:no-repeat;background-position:bottom;background-size:100% auto;opacity:.9}
.ink-bamboo-left{left:-6px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 400' preserveAspectRatio='xMinYMax'%3E%3Cg fill='none' stroke='%233d5a40' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M20 400 V60'/%3E%3Cpath d='M38 400 V20'/%3E%3Cpath d='M58 400 V90'/%3E%3C/g%3E%3Cg fill='%233d5a40'%3E%3Cpath d='M18 80 L24 75 L22 85 Z'/%3E%3Cpath d='M36 55 L42 50 L40 60 Z'/%3E%3Cpath d='M34 120 L40 115 L38 125 Z'/%3E%3Cpath d='M56 110 L62 105 L60 115 Z'/%3E%3Cpath d='M16 160 L22 155 L20 165 Z'/%3E%3Cpath d='M54 180 L60 175 L58 185 Z'/%3E%3C/g%3E%3C/svg%3E")}
.ink-bamboo-right{right:-8px;height:48%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 360' preserveAspectRatio='xMaxYMax'%3E%3Cg fill='none' stroke='%233d5a40' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M25 360 V40'/%3E%3Cpath d='M45 360 V0'/%3E%3Cpath d='M62 360 V70'/%3E%3C/g%3E%3Cg fill='%233d5a40'%3E%3Cpath d='M23 65 L29 60 L27 70 Z'/%3E%3Cpath d='M43 35 L49 30 L47 40 Z'/%3E%3Cpath d='M41 95 L47 90 L45 100 Z'/%3E%3Cpath d='M60 85 L66 80 L64 90 Z'/%3E%3Cpath d='M21 140 L27 135 L25 145 Z'/%3E%3Cpath d='M59 155 L65 150 L63 160 Z'/%3E%3C/g%3E%3C/svg%3E")}

/* 左下石岸 */
.ink-rock{position:absolute;left:-5%;bottom:0;width:45%;height:28%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' preserveAspectRatio='none'%3E%3Cpath d='M0 200 L0 80 C60 70 120 110 180 90 C240 70 300 100 360 85 C390 78 400 90 400 100 L400 200 Z' fill='%235a6a6a'/%3E%3Cpath d='M20 180 C50 130 100 120 160 140 C220 160 280 130 340 150' fill='none' stroke='%233a4a4a' stroke-width='2'/%3E%3C/svg%3E");background-size:100% 100%;opacity:.85}

/* 剑客剪影 */
.ink-swordsman{
  position:absolute;right:6%;bottom:10%;width:90px;height:180px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 180'%3E%3Cpath d='M55 178 L55 155 L52 120 L50 90 L52 60 L55 45 L58 60 L60 90 L58 120 L56 155 L56 178 Z' fill='%23304040'/%3E%3Cpath d='M48 92 L25 65 L28 62 L50 86 Z' fill='%23304040'/%3E%3Cpath d='M42 50 C42 35 48 28 56 28 C64 28 70 35 70 50 C70 60 64 68 56 68 C48 68 42 60 42 50 Z' fill='%23304040'/%3E%3Cpath d='M44 50 C44 38 50 32 56 32 C62 32 68 38 68 50 C68 58 62 64 56 64 C50 64 44 58 44 50 Z' fill='%234a5050'/%3E%3Cpath d='M54 20 C54 12 58 8 62 10 C66 12 66 18 62 22 C58 24 54 22 54 20 Z' fill='%23304040'/%3E%3Cpath d='M58 15 C58 10 60 8 64 10 C66 12 66 16 64 18 C60 20 58 18 58 15 Z' fill='%234a5050'/%3E%3Cpath d='M28 62 L20 70 L18 68 L26 60 Z' fill='%23304040'/%3E%3Cpath d='M20 70 L12 78 L14 80 L22 72 Z' fill='%23304040'/%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat;opacity:.92;
}

/* 标题区 */
.ink-auth-title{position:relative;z-index:10;text-align:center;margin-top:2vh;margin-bottom:14px;animation:inkFadeIn .8s ease both}
@keyframes inkFadeIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
.ink-seal{
  display:inline-flex;align-items:center;justify-content:center;width:36px;height:48px;margin-right:8px;
  background:#b94a4a;color:#fff;font-size:14px;font-weight:bold;letter-spacing:2px;
  border:2px solid #8a3030;border-radius:4px;writing-mode:vertical-rl;text-shadow:0 1px 0 rgba(0,0,0,.2);
  box-shadow:0 2px 6px rgba(0,0,0,.12);vertical-align:middle;
}
.ink-title{
  display:inline;font-size:clamp(38px,9vw,64px);font-weight:900;color:#2b2620;letter-spacing:8px;
  text-shadow:0 2px 0 rgba(255,255,255,.6),0 4px 10px rgba(43,38,32,.15);
  vertical-align:middle;margin:0;
}
.ink-subtitle{font-size:clamp(14px,3.6vw,18px);color:#5a7575;letter-spacing:6px;margin:8px 0 0}

/* 登录卡片 */
.ink-auth-card{
  position:relative;z-index:10;width:min(380px,88vw);max-height:78vh;overflow:auto;
  background:linear-gradient(180deg,#fffdf7 0%,#f8f4ea 100%);
  border:3px solid #d4c4a8;border-radius:18px;
  box-shadow:0 12px 40px rgba(43,38,32,.18),inset 0 0 0 1px rgba(255,255,255,.6);
  padding:22px 24px 18px;text-align:center;
}
.ink-auth-card::-webkit-scrollbar{width:4px}
.ink-auth-card::-webkit-scrollbar-thumb{background:rgba(180,160,130,.5);border-radius:2px}
.ink-card-head{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:18px}
.ink-card-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,#c9a227,transparent)}
.ink-card-title{font-size:18px;font-weight:700;color:#5a4010;letter-spacing:4px}

/* 输入框 */
.ink-input-row{
  position:relative;display:flex;align-items:center;gap:10px;margin-bottom:12px;
  background:rgba(255,255,255,.7);border:1px solid #d4c4a8;border-radius:24px;
  padding:3px 14px;box-shadow:inset 0 1px 3px rgba(43,38,32,.05);
}
.ink-input-icon{font-size:18px;color:#8a7a60;flex-shrink:0}
.ink-input-row input{flex:1;border:none;background:transparent;padding:11px 0;font-size:15px;color:#2b2620;outline:none;font-family:inherit}
.ink-input-row input::placeholder{color:#a89a82}
.ink-input-row:focus-within{border-color:#c9a227;box-shadow:0 0 0 3px rgba(201,162,39,.12)}

/* 按钮 */
.ink-btn{
  width:100%;border:none;border-radius:24px;padding:12px 0;font-size:16px;cursor:pointer;
  font-family:inherit;letter-spacing:2px;transition:.15s;margin-bottom:10px;
}
.ink-btn-primary{
  background:linear-gradient(180deg,#c94a4a,#a83838);color:#fff;
  box-shadow:0 4px 12px rgba(169,56,56,.3),inset 0 1px 0 rgba(255,255,255,.25);
}
.ink-btn-primary:hover{filter:brightness(1.06);transform:translateY(-1px)}
.ink-btn-primary:active{transform:translateY(0)}
.ink-btn-ghost{
  background:transparent;color:#8a6a40;border:1px solid #d4c4a8;
}
.ink-btn-ghost:hover{background:rgba(201,162,39,.08);border-color:#c9a227}

/* 创建表单 */
.ink-field-label{font-size:13px;color:#7a6f5e;text-align:left;margin:4px 0 6px 6px}
.ink-gender-row{display:flex;gap:10px;margin-bottom:12px}
.ink-gender-opt{
  flex:1;padding:10px 0;font-size:14px;cursor:pointer;border:1px solid #d4c4a8;
  background:transparent;color:#5a4010;border-radius:20px;transition:.15s;
}
.ink-gender-opt.selected{background:rgba(201,162,39,.18);border-color:#c9a227;font-weight:700}
.ink-tip{font-size:12px;color:#7a6f5e;margin:8px 0 14px;line-height:1.5}
.ink-tip b{color:#c94a4a;font-size:16px}

/* 服务器 */
.ink-server-error{color:#c94a4a;font-size:12px;text-align:left;margin:-8px 0 10px 6px;min-height:18px;line-height:1.4}

/* 底部操作 */
.ink-auth-extra{display:flex;justify-content:space-between;align-items:center;margin:6px 0 4px;font-size:13px}
.ink-auth-extra a{color:#5a8080;text-decoration:none;cursor:pointer}
.ink-auth-extra a:hover{color:#2b5a5a;text-decoration:underline}
.ink-auth-copy{font-size:11px;color:#8a9a9a;margin-top:12px;letter-spacing:1px}

/* 旧弹窗卡片兼容（其他模块仍在使用 .create-card/.title-seal） */
.create-card{width:min(440px,92vw);background:rgba(255,255,255,.9);border-radius:16px;padding:26px;box-shadow:var(--shadow-lg);border:1px solid rgba(180,165,140,.5);text-align:center}
.title-seal{font-size:34px;color:var(--cinnabar);letter-spacing:4px;text-shadow:0 2px 0 rgba(201,162,39,.15)}
.subtitle{color:var(--ink-faint);margin:6px 0 18px;font-size:14px;letter-spacing:1px}
.field{text-align:left;margin-bottom:14px}
.field label{display:block;font-size:14px;color:var(--ink-soft);margin-bottom:5px}
.field input{width:100%;padding:11px;border:1px solid var(--line);border-radius:8px;font-size:16px;background:#fff;font-family:inherit;text-align:center}

/* 登录页显示时隐藏自动托管悬浮球，避免遮挡 */
#authOverlay:not(.hidden) ~ .auto-fab{display:none!important}
.hidden{display:none!important}
.alloc{background:rgba(255,255,255,.45);border-radius:10px;padding:14px;margin-bottom:8px}
.alloc-tip{font-size:14px;margin-bottom:10px}
.alloc-tip b{color:var(--cinnabar);font-size:18px}
.alloc-row{display:flex;align-items:center;gap:10px;padding:7px 0}
.attr-name{width:90px;text-align:left;font-weight:bold}
.attr-val{width:30px;text-align:center;font-size:18px;color:var(--cinnabar);font-weight:bold}
.attr-desc{font-size:12px;color:var(--ink-faint);margin-left:auto}
.mini{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:18px;line-height:1}

/* ---------- toast ---------- */
.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:rgba(43,38,32,.9);color:var(--gold-2);padding:12px 24px;border-radius:30px;box-shadow:var(--shadow-lg);z-index:60;font-size:15px;animation:pop .3s;backdrop-filter:blur(6px)}
@keyframes pop{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------- 中国风 BGM 控制条 ---------- */
/* 顶栏内嵌 BGM 控件：与状态项一体，不另占浮动位置 */
.bgm-ctl{display:flex;align-items:center;gap:6px;padding:2px 4px;border-left:1px solid var(--line);margin-left:4px}
.bgm-toggle{border:none;background:transparent;font-size:17px;cursor:pointer;line-height:1;padding:3px 5px;border-radius:8px;transition:.15s}
.bgm-toggle:hover{background:rgba(212,168,67,.16)}
.bgm-toggle.off{opacity:.5;filter:grayscale(.4)}
.bgm-vol{width:60px;accent-color:var(--gold,#d4a843);cursor:pointer;height:14px}
.bgm-vol::-webkit-slider-thumb{accent-color:var(--gold,#d4a843)}
@media(max-width:680px){
  .bgm-ctl{margin-left:0}
  .bgm-vol{width:46px}
}
/* 品质文字色 */
.q-白{color:#8a7f6f}.q-绿{color:#5a8f6a}.q-蓝{color:#5a7fb0}.q-紫{color:#8f7aad}.q-橙{color:#b88850}.q-极品{color:#a88c3a;font-weight:600}.q-王器{color:#4a8f80;font-weight:600}.q-圣器{color:#6f6f9e;font-weight:600}.q-神器{color:#b05050;font-weight:700}.q-仙器{color:#2a8faa;font-weight:700}.q-混沌{color:#8f60bf;font-weight:700}.q-鸿蒙{color:#b060a0;font-weight:700}
.quality-白{border-color:#bdb4a3}
.quality-绿{border-color:#6a9f6a}
.quality-蓝{border-color:#6a8fc0}
.quality-紫{border-color:#9b7bb5}
.quality-橙{border-color:#c9a060}
.quality-极品{border-color:#c4a44a;background:rgba(184,147,47,.08)}
.quality-王器{border-color:#5a9f8f;background:rgba(90,159,143,.08)}
.quality-圣器{border-color:#8a8ab0;background:rgba(138,138,176,.08)}
.quality-神器{border-color:#c45a5a;background:rgba(196,90,90,.08)}
.quality-仙器{border-color:#5aa8c0;background:rgba(90,168,192,.08)}
.quality-混沌{border-color:#9b70c0;background:rgba(155,112,192,.08)}
.quality-鸿蒙{border-color:#c77ab0;background:rgba(199,122,176,.08)}

@media(max-width:1000px){
  .layout{grid-template-columns:1fr}
  .sidebar{flex-direction:row;flex-wrap:wrap;position:static}
  .logpanel{position:static;max-height:300px}
}

/* ============================================================
   智能托管 · 控制面板
   ============================================================ */
.auto-fab{
  position:fixed;right:18px;bottom:18px;width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:26px;cursor:pointer;
  background:linear-gradient(180deg,#3a3228,#2b2620);color:var(--gold-2);
  border:2px solid var(--gold);box-shadow:var(--shadow-lg);z-index:45;user-select:none;
}
.auto-fab.on{animation:fabpulse 1.4s infinite}
@keyframes fabpulse{0%,100%{box-shadow:0 0 0 0 rgba(201,162,39,.5)}50%{box-shadow:0 0 0 12px rgba(201,162,39,0)}}
.auto-panel{
  position:fixed;right:18px;bottom:84px;width:min(330px,92vw);z-index:60;
  background:rgba(255,253,247,.98);border:2px solid var(--gold);border-radius:12px;
  box-shadow:0 14px 40px rgba(0,0,0,.22);padding:14px;max-height:calc(100vh - 120px);overflow:auto;
  backdrop-filter:blur(4px);
}
.auto-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.auto-title{font-weight:bold;color:var(--cinnabar);flex:1;font-size:16px;letter-spacing:1px}
.auto-status{background:var(--paper);border-radius:8px;padding:8px 10px;font-size:13px;color:var(--ink-soft);margin-bottom:10px;min-height:34px;line-height:1.4}
.auto-toggles{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}
.auto-toggle{display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer}
.auto-toggle input{width:16px;height:16px;accent-color:var(--cinnabar)}
.auto-foot{margin-top:10px;font-size:11px;line-height:1.5}
.auto-gap{display:flex;align-items:center;gap:8px;margin:10px 2px 4px;font-size:13px}
.auto-gap-label{flex:0 0 auto;color:var(--ink-soft)}
.auto-gap input[type=range]{flex:1;accent-color:var(--cinnabar);cursor:pointer}
.auto-gap-val{flex:0 0 auto;min-width:46px;text-align:right;color:var(--cinnabar);font-weight:bold}

/* ============================================================
   手机端适配（≤768px）
   ============================================================ */
@media(max-width:768px){
  /* 手机端强制浅色水墨，避免场景背景过深 */
  body[class*="scene-"]{color:var(--ink)!important}
  body[class*="scene-"] .panel, body[class*="scene-"] .item-card, body[class*="scene-"] .forge-area, body[class*="scene-"] .forge-preview, body[class*="scene-"] .forge-temp{background:var(--card)!important}

  html,body{overflow:hidden;height:100%}
  body{font-size:14px;display:flex;flex-direction:column}

  /* 登录/创建弹窗在手机端也保持浅色 */
  .overlay{background:rgba(40,30,15,.55)}
  .create-card{background:var(--card);color:var(--ink);border-color:var(--gold)}

  /* 水墨登录页移动端适配 */
  #authOverlay{background:linear-gradient(180deg,#e8f0f0 0%,#d4e4e4 40%,#c5d8d8 100%)}
  .ink-auth-title{margin-top:1vh;margin-bottom:10px}
  .ink-title{letter-spacing:4px}
  .ink-subtitle{letter-spacing:3px}
  .ink-auth-card{width:min(340px,90vw);padding:18px 20px 14px;border-radius:16px;max-height:76vh}
  .ink-card-title{font-size:16px}
  .ink-input-row{padding:2px 12px;margin-bottom:10px}
  .ink-input-row input{padding:9px 0;font-size:14px}
  .ink-btn{padding:10px 0;font-size:15px;margin-bottom:8px}
  .ink-gender-row{gap:8px}
  .ink-gender-opt{padding:8px 0;font-size:13px}
  .ink-swordsman{width:70px;height:140px;right:4%;bottom:8%}
  .ink-bamboo{width:60px}
  .ink-crane{width:80px;height:50px;animation-duration:22s}
  .ink-auth-extra{font-size:12px}

  /* 顶栏：水墨标题，居中标题，右侧印章 */
  .topbar{
    position:relative;z-index:40;
    flex-wrap:nowrap;gap:6px;padding:8px 12px;
    background:linear-gradient(180deg,#f8f1e3,#f0e6d2);color:var(--ink);
    border-bottom:1px solid var(--line);
    box-shadow:0 1px 6px rgba(40,30,15,.06);
  }
  .topbar-left{gap:4px}
  .topbar-logo{font-size:16px}
  .topbar-brand{font-size:14px;letter-spacing:1px}
  .topbar-center{font-size:16px;letter-spacing:4px}
  .topbar-seal{width:28px;height:28px;font-size:10px;border-width:1.5px}
  .brand{font-size:16px;letter-spacing:1px;color:var(--cinnabar);text-shadow:none;white-space:nowrap}
  .status{gap:6px;font-size:11px;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;scrollbar-width:none;align-items:center}
  .status::-webkit-scrollbar{display:none}
  .status .st b{font-size:12px;color:var(--cinnabar)}
  .status .st-count{display:none}
  .status .st-currency{padding:2px 7px;gap:5px;border-radius:12px;background:rgba(255,255,255,.45);border:1px solid var(--line);color:var(--ink-soft)}
  .status .st-currency b{color:var(--ink);font-weight:700}
  .status .st-currency .st-ico{width:13px;height:13px;font-size:11px}
  .status .st-lv{padding:2px 6px;background:rgba(255,255,255,.45);border:1px solid var(--line);border-radius:12px;gap:4px}
  .status .st-lv .top-exp{display:none}
  .top-exp{width:60px;height:9px}
  .top-exp-txt{font-size:8px}
  .lv-badge{background:var(--cinnabar);color:#fff}
  .bgm-ctl{padding:0;background:transparent;border:none}
  .bgm-ctl .bgm-vol{display:none}
  .bgm-ctl .bgm-toggle{width:30px;height:30px;border-radius:50%;font-size:14px;padding:0}
  .top-actions{display:flex;gap:6px;align-items:center;position:relative}

  .layout{flex:1;min-height:0;display:flex;flex-direction:column;align-items:stretch;overflow:hidden;max-width:none;padding:0;gap:0;width:100%;box-sizing:border-box}
  .content{flex:1;min-height:0;overflow:hidden;padding:0 0 66px}
  .content.view-home{padding:0}
  .logpanel{display:none}

  /* 首页手机端：背景透明，让下方 .home-ink-bg 全屏山水画透出 */
  .home-view{padding:10px 12px 74px;gap:8px;border-radius:0;border:none;background:transparent}
  .home-user-card{padding:10px 12px;gap:10px}
  .home-avatar-wrap{width:50px;height:50px}
  .home-avatar{font-size:26px}
  .home-ink-ava{width:18px;height:18px;font-size:8px}
  .home-name{font-size:15px}
  .home-lv{font-size:11px}
  .home-coin,.home-prestige{font-size:11px;gap:4px}
  .home-coin b,.home-prestige b{font-size:12px}
  .hc-ico{width:16px;height:16px;font-size:12px}
  .hc-lbl{font-size:9px}
  .home-grid{grid-template-columns:repeat(4,1fr);gap:8px}
  .home-tile{padding:10px 2px;border-radius:12px}
  .home-tile-ico{width:38px;height:38px;font-size:20px}
  .home-tile-name{font-size:11px}
  .home-tile-sub{font-size:9px}
  .home-today{padding:8px 10px;border-radius:10px;gap:8px;min-height:44px}
  .home-today-label{font-size:11px;letter-spacing:2px;padding:2px}
  .hn-title{font-size:12px}
  .hn-body{font-size:11px;max-height:40px}
  .home-ink-bg .ink-crane{width:80px;height:46px;animation-duration:24s}
  .home-ink-bg .ink-swordsman{width:60px;height:100px;right:6%;bottom:30%}
  .home-ink-bg .ink-pine{width:80px;height:120px;right:0;bottom:30%}

  /* 左侧导航改底部固定：5 主入口等分，桌面扩展入口隐藏 */
  .sidebar{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:50;
    flex-direction:row;flex-wrap:nowrap;overflow:hidden;
    justify-content:space-around;gap:0;
    height:60px;padding:4px 6px 6px;
    background:linear-gradient(180deg,var(--paper),var(--paper-2));
    border-top:1px solid var(--line);
    box-shadow:0 -2px 12px rgba(40,30,15,.08);
  }
  .sidebar::-webkit-scrollbar{display:none}
  .nav-btn.desktop-only{display:none}
  .nav-btn{
    flex:1 1 0;min-width:0;max-width:none;height:50px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    padding:4px 2px;text-align:center;font-size:11px;white-space:nowrap;overflow:visible;
    border-left:none;border-top:3px solid transparent;
    border-radius:10px;background:transparent;color:var(--ink-soft)
  }
  .nav-btn:hover{background:rgba(201,162,39,.08)}
  .nav-btn.active{
    background:linear-gradient(180deg,rgba(201,162,39,.15),transparent);
    color:var(--cinnabar);border-top-color:var(--cinnabar);border-left-color:transparent
  }
  .nav-btn.active::before{content:none}

  /* 右侧日志手机端隐藏 */
  .logpanel{display:none}

  /* 网格自适应 */
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  /* 交易/通用主标签：手机端图标与文字上下堆叠，避免多标签撑出横向滚动 */
  .bag-main-tabs{gap:4px}
  .bag-main-tab{flex-direction:column;gap:2px;padding:7px 2px;min-width:0;line-height:1.15}
  .bag-main-tab .tico{font-size:15px}
  .bag-main-tab .ttxt{font-size:10px;line-height:1.1}
  .bag-main-tab .trade-tab-badge{position:static;margin:1px 0 0}
  .equip-grid{grid-template-columns:repeat(2,1fr)}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  /* 我要出售：窄屏卡片名称占满整行，价格与按钮换行，彻底避免横向溢出 */
  .mat-grid{grid-template-columns:1fr}
  .mat-card{flex-wrap:wrap;gap:6px}
  .mat-main{flex:1 1 100%;min-width:0}
  .mat-price{order:3}
  .mat-card > .btn.btn-sm{order:4}

  /* 战斗界面 */
  .battle-card{padding:12px}
  .combatant{width:auto;flex:1}
  .combatant .figure{font-size:44px}
  .skill-btn{min-width:64px;padding:8px 6px;font-size:12px}

  /* 托管：手机端悬浮球抬高，避免与底部导航重叠 */
  .auto-fab{
    display:flex;right:14px;bottom:96px;width:50px;height:50px;font-size:24px;
    border:2px solid var(--gold);z-index:55
  }
  .auto-panel{
    left:10px;right:10px;bottom:158px;width:auto;max-height:58vh;border-radius:14px;z-index:60;
    background:rgba(255,253,247,.98);border:1px solid var(--gold);box-shadow:0 14px 40px rgba(0,0,0,.22);
    backdrop-filter:blur(4px);
  }
  .auto-toggles{grid-template-columns:1fr 1fr}

  /* 触控友好 */
  .btn{padding:10px 16px}
  .mini{width:32px;height:32px;font-size:18px}
  .item-card .iactions .btn{padding:7px 12px;font-size:13px}

  /* 打造页面：手机端重设计，国风紧凑、一屏可见 */
  .forge-area{padding:8px;background:var(--card);border:1px solid var(--line);border-radius:10px}
  .forge-header{
    display:flex;align-items:center;justify-content:space-between;
    margin:0 0 8px;padding:6px 10px;border-radius:8px;
    background:var(--paper-2);border:1px solid var(--line)
  }
  .forge-header h2{color:var(--cinnabar);font-size:14px}
  .forge-header .muted{font-size:11px}
  .forge-progress-line{padding:0 2px 6px}
  .forge-body{display:flex;flex-direction:column;gap:8px}
  .forge-station{padding:8px;background:var(--paper-2);border-radius:8px;border:1px solid var(--line);gap:6px}
  .forge-station-top{display:flex;flex-direction:column;gap:8px;align-items:stretch;padding:8px;background:var(--paper);border-radius:8px;border:1px solid var(--line)}
  .forge-crucible{width:100px;height:100px;border:2px solid var(--gold);flex-shrink:0;align-self:center;cursor:pointer}
  .forge-crucible .forge-item-icon{font-size:34px}
  .forge-crucible .forge-hammer{font-size:18px;bottom:-4px;right:-4px}
  .forge-crucible-hint{font-size:9px;bottom:6px;padding:1px 5px}
  .forge-station-info{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
  .forge-selected{min-height:22px;justify-content:flex-start;gap:4px;font-size:11px}
  .forge-sel-chip{font-size:10px;padding:2px 6px;background:var(--card);border:1px solid var(--line);border-radius:10px}
  .forge-temp{width:100%;padding:4px 6px;background:var(--paper-2);border:1px solid var(--line);border-radius:6px}
  .forge-temp .temp-label{font-size:11px;color:var(--cinnabar)}
  .forge-temp .temp-track{height:8px}
  .forge-temp .temp-name{font-size:11px;color:var(--cinnabar);min-width:40px}
  .forge-probs{font-size:11px;line-height:1.4;background:transparent;border:none;padding:0}
  .forge-probs .prob-line{padding:2px 0}
  .forge-probs .heat-bonus{font-size:10px;margin-top:4px}
  .forge-progress-wrap{width:100%;height:4px}
  .forge-station-controls{gap:6px}
  .forge-lock-row{display:flex;gap:6px;align-items:stretch;flex-wrap:wrap;background:var(--paper);padding:6px;border-radius:6px;border:1px solid var(--line)}
  .forge-lock{flex:1;gap:4px;min-width:0;min-width:90px;display:flex;flex-direction:column}
  .forge-lock label{font-size:11px;color:var(--ink-soft);white-space:nowrap}
  .forge-lock select{font-size:11px;padding:4px 6px;flex:1;min-width:60px}
  .part-chip,.level-chip{padding:4px 9px;font-size:11px}
  .forge-cost{font-size:11px;padding:4px 6px;background:var(--paper-2);border:1px solid var(--line);border-radius:6px;text-align:center;white-space:nowrap;align-self:center}
  .forge-buttons{display:flex;flex-direction:row;gap:6px}
  .forge-buttons .btn{flex:1;padding:9px 8px;font-size:13px;min-height:40px;border-radius:6px}
  .forge-buttons .btn-lg{padding:9px 8px;font-size:13px;min-height:40px;border-radius:6px}

  /* 交易/拍卖面板压缩 */
  .trade-grid{grid-template-columns:1fr}
  .trade-col{min-height:auto}

  /* toast 上浮 */
  .toast{bottom:76px}

  @keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
}

/* 字段通用样式（设置/管理/其他弹窗使用） */
.field{margin:10px 0;text-align:left}
.field label{display:block;font-size:13px;color:#7a6f5e;margin-bottom:4px}
.field input{
  width:100%;padding:10px 12px;font-size:15px;border:1px solid var(--line);
  border-radius:8px;background:rgba(255,253,247,.6);color:var(--ink);box-sizing:border-box;
}
/* 比武日志 */
.duel-log{
  text-align:left;margin:12px 0;max-height:48vh;overflow:auto;
  background:rgba(255,253,247,.55);border:1px solid var(--line);border-radius:8px;padding:10px 12px;
  font-size:13px;line-height:1.7;
}
.duel-log .ln{padding:1px 0;border-bottom:1px dashed #efe7d6}
.region-card.mine .iactions{margin-top:8px}
.region-card.mine .iactions .btn{width:100%}

/* ---------- 玩家间交易 ---------- */
.trade-card{width:min(760px,94vw);max-height:90vh;overflow:auto}
.trade-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:12px 0;text-align:left}
.trade-col{
  background:rgba(255,253,247,.55);border:1px solid var(--line);border-radius:10px;padding:12px;
  display:flex;flex-direction:column;min-height:200px;
}
.trade-col h3{margin:0 0 8px;font-size:15px;color:#5a4d3a}
.gold-row{font-size:14px;margin-bottom:10px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gold-row input{
  width:110px;padding:6px 8px;font-size:14px;border:1px solid #d8cdb8;
  border-radius:7px;background:#fff;color:#2b2620;
}
.offer-list{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;overflow:auto;max-height:180px}
.offer-list.mini{max-height:90px;margin-top:6px}
.offer-chip{
  cursor:pointer;user-select:none;padding:5px 9px;border-radius:7px;font-size:13px;
  background:#fff;border:1px solid #ddd2bd;transition:.12s;
}
.offer-chip:hover{border-color:#caa14a}
.offer-chip.sel{background:#fbeccb;border-color:#caa14a;box-shadow:0 0 0 2px rgba(202,161,74,.25)}
.submitted-box{margin-top:8px;padding-top:8px;border-top:1px dashed #ece3d2}
.trade-status{margin:8px 0;font-size:14px;color:#7a6f5e}
@media(max-width:680px){
  .trade-grid{grid-template-columns:1fr}
}

/* ---------- 拍卖上架 ---------- */
.section-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 10px;flex-wrap:wrap}
.section-header h3{margin:0;font-size:16px;color:var(--ink)}
.section-header .btn{white-space:nowrap}
.section-sub{font-size:12px;color:var(--ink-soft);margin-top:2px}
.mat-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.mat-card{display:flex;align-items:center;gap:10px;padding:10px 12px;flex-wrap:nowrap}
.mat-main{flex:1;min-width:0}
.mat-name{font-weight:600;font-size:14.5px;color:var(--ink);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mat-meta{font-size:11.5px;color:var(--ink-soft)}
.mat-price{display:flex;align-items:center;gap:4px;flex:none}
.mat-price input{width:90px;padding:5px 8px;font-size:13px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);text-align:right}
.mat-price span{font-size:12px;color:var(--ink-soft)}
.mat-card > .btn.btn-sm{flex:none;padding:5px 12px;font-size:12px}
/* 我要出售：新布局（响应式单列，防 H5 横向溢出） */
.sell-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.sell-card{display:flex;align-items:center;gap:10px;padding:10px 12px}
.sell-card .mat-main{flex:1;min-width:0}
.sell-actions{margin-left:auto;flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.sell-row{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}
.sell-row .mat-price{flex:none}
.sell-row .btn{flex:none}
@media(max-width:680px){
  .section-header{gap:8px;margin:12px 0 8px}
  .section-header h3{font-size:15px}
  .section-sub{font-size:11px}
  .mat-grid{grid-template-columns:1fr}
  .mat-card{padding:9px 10px;gap:8px}
  .mat-name{font-size:13.5px}
  .mat-price input{width:80px;padding:4px 6px;font-size:12px}
}

/* ---------- 成就（H5 适配） ---------- */
@media(max-width:680px){
  .page-header{flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:8px}
  .page-header h2{font-size:18px}
  .page-sub{font-size:12px}
  .ach-total{margin:8px 0 10px}
  .ach-tabs{gap:5px;margin-bottom:6px}
  .ach-tab{padding:3px 9px;font-size:12px}
  .ach-cat-tabs{gap:5px}
  .ach-cat-tabs .bag-main-tab{min-width:0;padding:6px 2px}
  .ach-cat-tabs .ach-tab-n{display:none}
  .ach-show-grid{grid-template-columns:repeat(3,1fr);gap:5px}
  .ach-show-grid .ach-tab{padding:4px 2px;font-size:11px}
  .ach-show-grid .ach-tab-n{display:none}
  .ach-list{gap:5px}
  .ach-row{padding:7px 9px;gap:8px}
  .ach-row-ico{width:26px;height:26px;font-size:14px}
  .ach-row-name{font-size:13px}
  .ach-row-desc{font-size:11px;-webkit-line-clamp:2}
  .ach-row-tier{font-size:9px;padding:1px 4px}
  .ach-row-prog{font-size:10px}
  .ach-row-reward .ach-rw{font-size:9px;padding:1px 4px}
  .ach-grid{grid-template-columns:1fr;gap:8px}
  .ach-card{padding:10px;gap:10px;border-radius:10px}
  .ach-card.done{border-left-width:3px}
  .ach-ico{width:38px;height:38px;font-size:20px}
  .ach-name{font-size:14px}
  .ach-desc{font-size:11.5px}
  .ach-tier{font-size:10px}
  .prestige-hero{padding:12px;gap:11px;margin-bottom:8px}
  .ph-badge{width:48px;height:48px;font-size:25px}
  .ph-name{font-size:17px}
  .ph-ladder{margin-bottom:6px}
  .ph-line{width:16px}
  .ph-step-name{font-size:10px}
  .ph-meta{margin:8px 0 12px}
  .pill{padding:2px 7px;font-size:11px}
}
/* 装备变更浮动条 */
.equip-delta{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  background:#2b2620;color:#fbf7ee;padding:10px 20px;border-radius:8px;
  font-size:14px;z-index:9999;white-space:nowrap;
  animation:fadeIn 0.3s ease;
}
@keyframes fadeIn{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.attr-grid{display:flex;gap:10px;flex-wrap:wrap}
.attr-card{flex:1;min-width:140px;display:flex;align-items:center;gap:6px;padding:12px;background:rgba(255,253,247,.5);border:1px solid var(--line);border-radius:8px}
.attr-root{font-size:16px;font-weight:500;color:#2b2620;white-space:nowrap}
.attr-arr{font-size:14px;color:#cbbfa6}
.attr-stat{font-size:15px;font-weight:500;color:#5a5046}

/* ============ 锻造系统 ============ */
.forge-area{background:var(--card);border-radius:14px;padding:16px;border:1px solid var(--line);box-shadow:var(--shadow)}
.forge-header{display:flex;justify-content:space-between;align-items:center;margin:0 0 14px;padding:10px 14px;background:var(--paper-2);border:1px solid var(--line);border-radius:10px}
.forge-header h2{color:var(--cinnabar);margin:0;font-size:18px}
.forge-header .muted{font-size:13px}
.forge-progress-line{padding:0 2px 10px}
.forge-body{display:flex;flex-direction:column;gap:14px}

/* 锻炉台（含锻炉、概率、操作） */
.forge-station{background:var(--paper-2);border-radius:10px;border:1px solid var(--line);padding:14px;display:flex;flex-direction:column;gap:12px}
.forge-station-top{display:flex;gap:14px;align-items:flex-start}
.forge-station-info{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}

.forge-crucible{position:relative;width:140px;height:140px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 30%,#5a4a30,#2b2215);border:3px solid var(--gold);box-shadow:0 0 20px rgba(201,162,39,.25),inset 0 0 30px rgba(0,0,0,.3);transition:.3s;flex-shrink:0;cursor:pointer}
.forge-crucible:hover{transform:scale(1.03);box-shadow:0 0 28px rgba(201,162,39,.45),inset 0 0 30px rgba(0,0,0,.3)}
.forge-crucible:active{transform:scale(.98)}
.forge-crucible-hint{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font-size:11px;color:var(--gold-2);background:rgba(0,0,0,.35);padding:1px 6px;border-radius:10px;pointer-events:none;z-index:3}
.forge-crucible.forging{animation:cruciblePulse 1.2s infinite;box-shadow:0 0 30px rgba(232,149,76,.5),inset 0 0 30px rgba(0,0,0,.3)}
@keyframes cruciblePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.forge-ring{position:absolute;inset:8px;border-radius:50%;border:2px dashed rgba(201,162,39,.4);animation:ringRotate 8s linear infinite}
@keyframes ringRotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.forge-item-icon{font-size:48px;color:var(--gold-2);z-index:2;text-shadow:0 0 8px rgba(201,162,39,.5)}
.forge-crucible .forge-hammer{position:absolute;bottom:-6px;right:-6px;font-size:24px;transform-origin:bottom right;animation:none}
.forge-crucible.forging .forge-hammer{animation:hammerHit .25s ease-in-out infinite}
@keyframes hammerHit{0%,100%{transform:rotate(-8deg) translateY(-4px)}50%{transform:rotate(8deg) translateY(8px)}}
.forge-selected{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start;min-height:28px;align-items:center}
.forge-sel-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;background:var(--paper);border:1px solid var(--line);font-size:12px;color:var(--ink-soft)}

.forge-temp{display:flex;align-items:center;gap:10px;width:100%;padding:8px 12px;background:var(--paper);border:1px solid var(--line);border-radius:8px;color:var(--ink)}
.forge-temp .temp-label{font-size:12px;color:var(--cinnabar);white-space:nowrap}
.forge-temp .temp-track{flex:1;height:14px;background:var(--paper-2);border-radius:7px;overflow:hidden}
.forge-temp .temp-fill{height:100%;border-radius:7px;background:linear-gradient(90deg,#854F0B,#D85A30,#C9A227,#FFF8EE);transition:width .3s}
.forge-temp .temp-name{font-size:12px;color:var(--cinnabar);white-space:nowrap;min-width:50px;text-align:right}

.forge-probs{font-size:13px;line-height:1.8}
.forge-probs .prob-line{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px dashed var(--line)}
.forge-probs .prob-line b{font-weight:500}
.forge-probs .heat-bonus{font-size:12px;color:var(--cinnabar);text-align:center;margin-top:6px}
.forge-prob-summary{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.forge-prob-summary .forge-mat-tier{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.forge-prob-summary .prob-toggle{flex-shrink:0;padding:4px 10px;font-size:11px;border-radius:12px;background:var(--paper);border:1px solid var(--line);color:var(--ink-soft);cursor:pointer}
.forge-prob-detail{display:none}
.forge-prob-modal{width:min(420px,92vw);max-height:78vh;display:flex;flex-direction:column;background:var(--card);border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow);padding:16px}
.forge-prob-modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.forge-prob-modal-head h3{margin:0;font-size:16px;color:var(--cinnabar)}
.forge-prob-modal-body{flex:1;overflow-y:auto;min-height:0;font-size:13px;line-height:1.7}
.forge-mat-tier{font-size:12px;font-weight:500;padding:4px 0 6px;border-bottom:1px dashed var(--line);margin-bottom:4px}
/* 打造保底进度可视化 */
.pity-box{margin-top:8px;padding-top:6px;border-top:1px dashed var(--line)}
.pity-title{font-size:11px;margin-bottom:5px}
.pity-row{display:flex;align-items:center;gap:8px;margin:4px 0;font-size:12px}
.pity-lbl{min-width:32px;font-weight:600}
.pity-track{flex:1;height:8px;background:rgba(0,0,0,.1);border-radius:5px;overflow:hidden}
.pity-fill{height:100%;background:linear-gradient(90deg,#c9a227,#e8c860);border-radius:5px;transition:width .3s}
.pity-fill.on{background:linear-gradient(90deg,#a83232,#e05a5a)}
.pity-num{min-width:74px;text-align:right;color:var(--ink-soft);font-size:11px}
.pity-num.on{color:var(--cinnabar);font-weight:600}

.forge-progress-wrap{width:100%;height:6px;background:var(--paper);border-radius:3px;overflow:hidden}
.forge-progress-bar{height:100%;width:0%;background:linear-gradient(90deg,#854F0B,#D85A30,#C9A227);border-radius:0 3px 3px 0;transition:width 1.8s ease-out}

.forge-station-controls{display:flex;flex-direction:column;gap:10px}
.forge-lock-row{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.forge-lock{display:flex;flex-direction:column;gap:6px;flex:1;min-width:120px}
.forge-lock label{font-size:12px;color:var(--ink-soft);white-space:nowrap}
.forge-lock select{flex:1;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:#fff;font-size:13px;color:var(--ink)}
.part-chips,.level-chips{display:flex;flex-wrap:wrap;gap:6px}
.part-chip,.level-chip{appearance:none;border:1px solid var(--line);border-radius:14px;padding:5px 11px;font-size:12px;background:var(--paper);color:var(--ink-soft);cursor:pointer;transition:.15s;white-space:nowrap}
.part-chip:hover,.level-chip:hover{border-color:#c9b896;color:var(--ink)}
.part-chip.on,.level-chip.on{background:linear-gradient(135deg,#c9a227,#b08d2b);border-color:#b08d2b;color:#fff;font-weight:600;box-shadow:0 2px 6px rgba(201,162,39,.25)}
.forge-cost{font-size:13px;text-align:center;padding:6px 10px;background:var(--card);border:1px solid var(--line);border-radius:6px;white-space:nowrap;align-self:center}
.forge-buttons{display:flex;gap:10px}
.forge-buttons .btn{flex:1;padding:12px 14px;font-size:15px;min-height:44px}
.forge-buttons .btn-lg{padding:12px 14px;font-size:15px;min-height:44px}

/* 材料选择弹窗 */
.picker-list{max-height:50vh;overflow-y:auto;padding-right:4px;display:flex;flex-direction:column;gap:8px}
.picker-row{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--card);border:1px solid var(--line);border-radius:8px;transition:.15s}
.picker-row:hover{border-color:var(--gold)}
.picker-row.t1{border-color:#b4b2a9}
.picker-row.t2{border-color:#4a9b5a;background:rgba(90,155,90,.12)}
.picker-row.t3{border-color:#7f77dd;background:rgba(127,119,221,.12)}
.picker-row.t4{border-color:var(--gold);background:rgba(201,162,39,.14)}
.picker-info{flex:1;display:flex;align-items:center;gap:8px;min-width:0}
.picker-icon{font-size:22px}
.picker-name{flex:1;font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.picker-stock{font-size:12px;color:var(--ink-faint);white-space:nowrap}
.picker-qty{display:flex;align-items:center;gap:4px;flex-shrink:0}
.picker-qty input{width:40px;padding:5px 0;font-size:13px;text-align:center;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--ink)}
.picker-qty .mini{width:30px;height:30px;font-size:13px;padding:0;border-radius:6px;background:var(--paper-2);color:var(--ink);border:1px solid var(--line)}

/* 锻造结果弹窗 */
.craft-result-overlay{position:fixed;inset:0;background:rgba(43,38,32,0.7);z-index:10000;display:flex;align-items:center;justify-content:center;animation:fadeInOverlay .3s}
@keyframes fadeInOverlay{from{opacity:0}to{opacity:1}}
.craft-result-card{background:rgba(255,253,247,.62);border-radius:16px;padding:24px;text-align:center;max-width:360px;position:relative;overflow:hidden;border:2px solid rgba(180,165,140,.6);backdrop-filter:blur(8px)}
.craft-result-card.q-紫{border-color:#7f77dd}
.craft-result-card.q-橙{border-color:#e8954c}
.craft-result-card.q-极品{border-color:#c9a227}
.craft-result-card.q-王器{border-color:#2f9e87;box-shadow:0 0 22px rgba(47,158,135,.5)}
.craft-result-card.q-圣器{border-color:#8a8ac0;box-shadow:0 0 22px rgba(138,138,192,.45)}
.craft-result-card.q-神器{border-color:#e63946;box-shadow:0 0 26px rgba(230,57,70,.55)}
.craft-result-card.q-仙器{border-color:#22c3e6;box-shadow:0 0 26px rgba(34,195,230,.55)}
.craft-result-card.q-混沌{border-color:#9b30ff;box-shadow:0 0 30px rgba(155,48,255,.6)}
.craft-result-card.q-鸿蒙{border-color:#ff5edb;box-shadow:0 0 34px rgba(255,94,219,.7)}
.craft-result-card.q-王器 .craft-result-glow{opacity:.9;background:radial-gradient(ellipse at center,transparent 40%,rgba(47,158,135,.15) 70%,transparent 100%);animation:glowPulse 2s infinite}
.craft-result-card.q-圣器 .craft-result-glow{opacity:.9;background:radial-gradient(ellipse at center,transparent 40%,rgba(138,138,192,.14) 70%,transparent 100%);animation:glowPulse 2s infinite}
.craft-result-card.q-神器 .craft-result-glow{opacity:1;background:radial-gradient(ellipse at center,transparent 40%,rgba(230,57,70,.18) 70%,transparent 100%);animation:glowPulse 2s infinite}
.craft-result-card.q-仙器 .craft-result-glow{opacity:1;background:radial-gradient(ellipse at center,transparent 40%,rgba(34,195,230,.18) 70%,transparent 100%);animation:glowPulse 2s infinite}
.craft-result-card.q-混沌 .craft-result-glow{opacity:1;background:radial-gradient(ellipse at center,transparent 40%,rgba(155,48,255,.2) 70%,transparent 100%);animation:glowPulse 1.8s infinite}
.craft-result-card.q-鸿蒙 .craft-result-glow{opacity:1;background:radial-gradient(ellipse at center,transparent 35%,rgba(255,94,219,.22) 65%,rgba(46,111,214,.12) 82%,transparent 100%);animation:glowPulse 1.5s infinite}
.craft-result-card.q-神器 .craft-result-title{color:#e63946;animation:titleShine 1.4s infinite}
.craft-result-card.q-仙器 .craft-result-title{color:#1a9fc4;animation:titleShine 1.4s infinite}
.craft-result-card.q-混沌 .craft-result-title{color:#9b30ff;animation:titleShine 1.3s infinite}
.craft-result-card.q-鸿蒙 .craft-result-title{color:#ff5edb;animation:titleShine 1.2s infinite}
.craft-result-card.craft-epic{animation:cardEpicPulse 2s infinite}
@keyframes cardEpicPulse{0%,100%{box-shadow:0 0 15px rgba(201,162,39,.3)}50%{box-shadow:0 0 30px rgba(201,162,39,.6)}}
.craft-result-card.craft-wuji{background:linear-gradient(135deg,#fbf7ee,#fcf3d9,#fbf7ee,#fcf3d9);background-size:200% 200%;animation:wujiBg 2s linear infinite}
@keyframes wujiBg{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.craft-result-glow{position:absolute;inset:0;pointer-events:none;opacity:0}
.craft-result-card.q-极品 .craft-result-glow{opacity:1;background:radial-gradient(ellipse at center,transparent 40%,rgba(201,162,39,0.15) 70%,transparent 100%);animation:glowPulse 2s infinite}
@keyframes glowPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.craft-result-title{font-size:20px;font-weight:500;margin-bottom:8px;color:#2b2620}
.craft-result-card.craft-epic .craft-result-title{color:#c9a227;animation:titleShine 1.5s infinite}
@keyframes titleShine{0%,100%{text-shadow:0 0 5px rgba(201,162,39,.3)}50%{text-shadow:0 0 15px rgba(201,162,39,.7)}}
.craft-result-item{font-size:16px;font-weight:500;margin-bottom:4px;color:#2b2620}
.craft-result-quality{font-size:14px;font-weight:500;margin-bottom:4px}
.craft-result-parts{font-size:13px;color:#888780;margin-bottom:8px}
.craft-result-attrs{font-size:13px;color:#5a5046;margin-bottom:12px;line-height:1.6}
.craft-cmp{font-size:12px;color:var(--ink-soft);background:rgba(0,0,0,.04);border-radius:8px;padding:7px 10px;margin-bottom:12px;line-height:1.5}
.craft-result-card button{margin-top:4px}
/* 锻造记录：原生列表行 */
.rec-list{display:flex;flex-direction:column}
.rec-empty{padding:24px;text-align:center}
.rec-row{display:flex;align-items:center;gap:10px;padding:9px 6px;border-bottom:1px solid var(--line);font-size:14px}
.rec-row:last-child{border-bottom:none}
.rec-dot{width:10px;height:10px;border-radius:50%;flex:none;background:currentColor}
.rec-main{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.rec-name{font-weight:600}
.rec-sub{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rec-time{flex:none;font-size:11px;font-variant-numeric:tabular-nums}

/* ===== 比武：战力对比条 ===== */
.cp-cmp{margin:6px 0 8px;font-size:12px}
.cp-line{display:flex;align-items:center;gap:6px;margin:2px 0}
.cp-lbl{width:66px;color:var(--ink-soft);flex:none;font-size:11px}
.cp-track{flex:1;height:9px;background:rgba(0,0,0,.08);border-radius:5px;overflow:hidden}
.cp-fill{height:100%;border-radius:5px;transition:width .3s}
.cp-fill.me{background:linear-gradient(90deg,#3a7d44,#5aa96b)}
.cp-fill.foe{background:linear-gradient(90deg,#a33,#c65a5a)}
.cp-tag{text-align:right;font-size:11px;margin-top:1px}
.cp-adv{color:#c0392b;font-weight:600}
.cp-dis{color:#3a7d44;font-weight:600}
/* ===== 比武战绩：原生列表行 ===== */
.duel-hlist{display:flex;flex-direction:column}
.duel-hrow{display:flex;align-items:center;gap:10px;padding:8px 6px;border-bottom:1px solid var(--line);font-size:14px}
.duel-hrow:last-child{border-bottom:none}
.duel-hrow.win{background:rgba(58,125,68,.06)}
.duel-hrow.lose{background:rgba(163,51,51,.05)}
.duel-hrow .dh-ava{width:32px;height:32px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;background:rgba(0,0,0,.04)}
.duel-hrow .dh-main{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.duel-hrow .dh-foe{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.duel-hrow .dh-rw{font-size:12px}
.duel-hrow .dh-t{flex:none;font-size:11px;font-variant-numeric:tabular-nums}

/* ===== 战斗动画关键帧 ===== */
@keyframes attackSlide {
  0% { transform: translateX(0) scale(1); }
  40% { transform: translateX(50px) scale(1.12); }
  60% { transform: translateX(55px) scale(1.08); }
  100% { transform: translateX(0) scale(1); }
}
@keyframes hitShake {
  0% { transform: translateX(0); }
  15% { transform: translateX(-12px); }
  30% { transform: translateX(10px); }
  45% { transform: translateX(-8px); }
  60% { transform: translateX(5px); }
  100% { transform: translateX(0); }
}
@keyframes critShake {
  0% { transform: translateX(0) rotate(0); }
  10% { transform: translateX(-18px) rotate(-3deg); }
  25% { transform: translateX(14px) rotate(2deg); }
  40% { transform: translateX(-10px) rotate(-1deg); }
  60% { transform: translateX(6px) rotate(0); }
  100% { transform: translateX(0) rotate(0); }
}
@keyframes dodgeFlash {
  0% { opacity:1; transform:scale(1); }
  30% { opacity:.3; transform:scale(.6); }
  60% { opacity:.7; transform:scale(1.1); }
  100% { opacity:1; transform:scale(1); }
}
@keyframes deathFade {
  0% { opacity:1; transform:scale(1); filter:grayscale(0); }
  50% { opacity:.5; transform:scale(1.2); filter:grayscale(.5); }
  100% { opacity:0; transform:scale(1.5); filter:grayscale(1); }
}
@keyframes ragePulse {
  0% { transform:scale(1); }
  50% { transform:scale(1.2); filter:brightness(1.3); }
  100% { transform:scale(1); }
}
@keyframes enterDrop {
  0% { opacity:0; transform:translateY(-40px) scale(.5); }
  60% { opacity:1; transform:translateY(4px) scale(1.05); }
  100% { transform:translateY(0) scale(1); }
}
@keyframes bossRing {
  0% { transform:scale(.8); opacity:.8; }
  100% { transform:scale(2); opacity:0; }
}
@keyframes dmgFloat {
  0% { opacity:1; transform:translateY(0) scale(1); }
  50% { opacity:1; transform:translateY(-20px) scale(1.1); }
  100% { opacity:0; transform:translateY(-50px) scale(.8); }
}
@keyframes expFloat {
  0% { opacity:0; transform:translateY(10px) scale(.7); }
  15% { opacity:1; transform:translateY(0) scale(1.1); }
  35% { transform:translateY(-6px) scale(1); }
  100% { opacity:0; transform:translateY(-60px) scale(.9); }
}
@keyframes slashSweep {
  0% { opacity:0; transform:translateX(-60px) rotate(-20deg); }
  30% { opacity:1; transform:translateX(0) rotate(-10deg); }
  70% { opacity:1; transform:translateX(60px) rotate(10deg); }
  100% { opacity:0; transform:translateX(120px) rotate(20deg); }
}
@keyframes missileFly {
  0% { opacity:0; transform:translate(0,0) scale(.3); }
  30% { opacity:1; transform:translate(30px,-10px) scale(1); }
  100% { opacity:0; transform:translate(80px,-20px) scale(.5); }
}
@keyframes aoeRing {
  0% { transform:translate(-50%,-50%) scale(0); opacity:.8; }
  50% { transform:translate(-50%,-50%) scale(1); opacity:.5; }
  100% { transform:translate(-50%,-50%) scale(1.3); opacity:0; }
}
@keyframes healGlow {
  0% { transform:translate(-50%,-50%) scale(0); opacity:.8; }
  50% { transform:translate(-50%,-50%) scale(1.5); opacity:.5; }
  100% { transform:translate(-50%,-50%) scale(2); opacity:0; }
}
@keyframes stunSpin {
  0% { opacity:0; transform:translate(-50%,0) rotate(0) scale(.5); }
  50% { opacity:1; transform:translate(-50%,-10px) rotate(180deg) scale(1.2); }
  100% { opacity:0; transform:translate(-50%,-25px) rotate(360deg) scale(1); }
}
@keyframes flashFade {
  0% { opacity:1; }
  100% { opacity:0; }
}
@keyframes resultWin {
  0% { opacity:0; transform:translate(-50%,-50%) scale(.3); }
  50% { opacity:1; transform:translate(-50%,-50%) scale(1.15); }
  100% { transform:translate(-50%,-50%) scale(1); }
}
@keyframes resultLose {
  0% { opacity:0; transform:translate(-50%,-50%) scale(1.5); }
  50% { opacity:1; transform:translate(-50%,-50%) scale(.9); }
  100% { opacity:1; transform:translate(-50%,-50%) scale(1); filter:grayscale(.6); }
}

/* ===== 场景切换过渡 ===== */
.scene-transition{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;animation:sceneFade 1.6s ease-out forwards}
.scene-transition::before{content:'';position:absolute;inset:0;background:rgba(30,24,16,.82);backdrop-filter:blur(4px)}
.scene-transition .st-icon{font-size:72px;position:relative;z-index:1;animation:sceneIcon 0.5s ease-out}
.scene-transition .st-name{font-size:28px;font-weight:bold;color:#f3e6c0;margin-top:12px;position:relative;z-index:1;text-shadow:0 2px 12px rgba(0,0,0,.4);letter-spacing:3px}
.scene-transition .st-desc{font-size:14px;color:var(--ink-faint);margin-top:6px;position:relative;z-index:1}
@keyframes sceneFade {
  0% { opacity:0; }
  15% { opacity:1; }
  70% { opacity:1; }
  100% { opacity:0; }
}
@keyframes sceneIcon {
  0% { transform:scale(0) rotate(-30deg); opacity:0; }
  60% { transform:scale(1.2) rotate(5deg); opacity:1; }
  100% { transform:scale(1) rotate(0); opacity:1; }
}

/* ===== 场景过渡 · 水墨印章 ===== */
.ink-overlay{position:fixed;inset:0;z-index:100;pointer-events:none;display:flex;align-items:center;justify-content:center;background:rgba(30,24,16,0)}
.ink-overlay .ink-seal{width:280px;height:280px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle,rgba(168,50,50,.92) 0%,rgba(168,50,50,.85) 60%,rgba(168,50,50,.95) 100%);border:3px solid rgba(201,162,39,.5);box-shadow:0 0 40px rgba(168,50,50,.3);opacity:0;transform:scale(.6);animation:sealStamp .4s ease-out forwards}
.ink-overlay .ink-seal::before{content:'';position:absolute;inset:12px;border-radius:50%;border:1px solid rgba(201,162,39,.25);pointer-events:none}
.ink-overlay .ink-seal::after{content:'✦';position:absolute;top:18px;font-size:14px;color:rgba(201,162,39,.4)}
.ink-overlay .ink-icon{font-size:42px;margin-bottom:2px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.2))}
.ink-overlay .ink-name{font-size:22px;font-weight:bold;color:#f3e6c0;letter-spacing:4px;text-shadow:0 2px 8px rgba(0,0,0,.3)}
.ink-overlay .ink-sub{font-size:12px;color:rgba(243,230,192,.6);margin-top:3px;letter-spacing:2px}
@keyframes sealStamp {
  0%{opacity:0;transform:scale(.3) rotate(-15deg)}
  60%{opacity:1;transform:scale(1.08) rotate(2deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}
.ink-overlay.fade-out .ink-seal{animation:sealFade .3s ease-in forwards}
@keyframes sealFade {
  0%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(.8);filter:blur(4px)}
}

/* ============================================================
   H5 移动端适配
   ============================================================ */
/* 小屏：平板及以下 */
@media(max-width:900px){
  .layout{grid-template-columns:1fr;padding:8px}
  .sidebar{
    display:flex;flex-direction:row;gap:6px;overflow-x:auto;
    padding:4px 2px;margin-bottom:2px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .sidebar::-webkit-scrollbar{display:none}
  .sidebar .nav-btn{
    white-space:nowrap;flex-shrink:0;padding:8px 15px;font-size:13px;
    border-left:none;border-radius:20px;box-shadow:var(--shadow);
  }
  .sidebar .nav-btn.active{border-left:none}
  .logpanel{position:static;max-height:200px;margin-bottom:10px}
  .topbar{padding:8px 12px;flex-wrap:wrap;gap:6px}
  .topbar .status{gap:8px;font-size:12px;width:100%;overflow-x:auto}
  .topbar .brand{font-size:17px}
  .status .st-res{padding:2px 7px}
  .st-ico{width:13px;height:13px}
  .top-actions{gap:4px}
  .top-actions .btn{font-size:12px;padding:4px 10px}
  .panel{padding:12px;margin-bottom:10px}
  .panel h2{font-size:16px}
  .settings-actions{flex-direction:column}
  .settings-actions .btn{width:100%;min-width:0}
  .settings-row{font-size:13px;flex-direction:column;align-items:flex-start;gap:4px}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .equip-grid{grid-template-columns:repeat(2,1fr)}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .item-card{padding:8px}
  .item-card .iactions{gap:4px}
  .item-card .iactions .btn{font-size:12px;padding:3px 8px}
  .battle-card{width:96vw;padding:12px}
  .battle-scene{gap:6px;padding:10px}
  .ink-overlay .ink-seal{width:200px;height:200px}
  .ink-overlay .ink-icon{font-size:32px}
  .ink-overlay .ink-name{font-size:18px}
  .bag-main-tab{font-size:12px;padding:7px 2px}
  .bag-toolbar{gap:6px}
  .bt-hint{display:none}
  .tile-grid{grid-template-columns:repeat(3,1fr);gap:6px}
  /* 锻造页适配 */
  .forge-body{display:flex;flex-direction:column;gap:10px}
  .forge-station{padding:12px}
  .forge-crucible{width:120px;height:120px}
  .forge-crucible .forge-item-icon{font-size:42px}
  .forge-crucible .forge-hammer{font-size:22px}
  .forge-probs{font-size:12px}
  .forge-area{padding:12px}
  /* 我要出售：H5 单列卡片重排 */
  .sell-grid{grid-template-columns:1fr}
  .sell-card{align-items:flex-start;flex-wrap:wrap;gap:8px;padding:8px}
  .sell-card .mat-main{flex:1 1 100%;min-width:0}
  .sell-actions{margin-left:0;flex:1 1 100%;flex-direction:row;align-items:center;justify-content:flex-end}
  .sell-actions .btn{flex:1}
  .sell-row{flex:1 1 100%;margin-left:0;gap:6px}
  .sell-row .mat-price{flex:1;min-width:0}
  .sell-row .mat-price input{width:100%}
  .sell-row .btn{flex:none;padding:7px 14px}
}
/* 手机屏：极窄 */
@media(max-width:480px){
  .layout{padding:4px}
  .topbar{padding:6px 8px}
  .topbar .brand{font-size:15px}
  .status .st-res{padding:2px 5px}
  .sidebar .nav-btn{padding:6px 10px;font-size:12px}
  .panel{padding:8px;margin-bottom:8px}
  .panel h2{font-size:15px;margin-bottom:8px}
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .equip-grid{grid-template-columns:1fr 1fr}
  .stat-grid{grid-template-columns:1fr}
  .item-card{padding:5px}
  .item-card .iname{font-size:12px}
  .item-card .imeta{font-size:10px}
  .item-card .iactions .btn{font-size:10px;padding:2px 5px}
  .battle-card{width:100vw;border-radius:0;padding:8px}
  .battle-header{font-size:15px}
  .attr-line{padding:4px 8px;font-size:13px}
  .region-card{padding:10px}
  .region-card h3{font-size:14px}
  .logpanel{max-height:150px}
  .log-body{font-size:12px;padding:6px 8px}
  .ink-overlay .ink-seal{width:160px;height:160px}
  .ink-overlay .ink-icon{font-size:26px}
  .ink-overlay .ink-name{font-size:16px}
  .ink-overlay .ink-sub{font-size:11px}
  .bag-section{padding:10px}
  .bag-main-tabs{padding:4px;gap:4px;border-radius:10px}
  .bag-main-tab{font-size:11px;padding:6px 2px}
  .bag-toolbar{flex-direction:column;align-items:stretch}
  .bt-group{width:100%;justify-content:space-between}
  .bt-group .btn{flex:1;justify-content:center}
  .bag-section-head h3{font-size:14px}
  .tile-grid{grid-template-columns:repeat(3,1fr);gap:5px}
  .bag-mat-row{flex-direction:column;align-items:stretch;gap:4px;padding:6px}
  .bag-mat-info{justify-content:center}
  .bag-mat-meta{text-align:center;font-size:10px}
  .bag-mat-row .btn{width:100%;padding:3px 6px;font-size:10px}
  /* 背包手机端极限压缩 */
  .content.view-bag .panel{padding:6px;margin-bottom:6px}
  .content.view-bag .bag-section{padding:4px;border-radius:6px}
  .content.view-bag .bag-main-tabs{margin-bottom:4px;padding:2px}
  .content.view-bag .bag-main-tab{min-height:30px;font-size:10px}
  .content.view-bag .char-equip{gap:3px;padding:4px}
  .content.view-bag .char-slot{min-height:42px;padding:3px 1px;border-radius:6px}
  .content.view-bag .char-slot .cs-ico{font-size:18px}
  .content.view-bag .char-slot .cs-name{font-size:9px}
  .content.view-bag .char-slot .cs-q{font-size:8px}
  .content.view-bag .equip-footbar{padding:3px 2px;font-size:9px;margin:4px -2px -2px}
  .content.view-bag .bag-toolbar{margin-bottom:3px;padding-bottom:3px;gap:2px;flex-direction:row;flex-wrap:wrap}
  .content.view-bag .bag-toolbar .btn{padding:3px 5px;font-size:9px;flex:1}
  .content.view-bag .bag-toolbar select{padding:2px 4px;font-size:9px;flex:1}
  .content.view-bag .inv-tabs{margin-bottom:4px;gap:3px}
  .content.view-bag .inv-tab{padding:2px 5px;font-size:9px}
  .bag-equip-list{gap:3px}
  .bag-equip-row{padding:4px 6px;gap:4px;border-radius:6px}
  .ber-icon{font-size:16px}
  .ber-name{font-size:11px}
  .ber-attrs{font-size:9px}
  .ber-actions .btn{font-size:9px;padding:2px 5px;min-width:24px}
  .bag-mat-list{gap:3px}
  .bag-mat-row-compact{padding:5px 6px;border-radius:6px}
  .bag-mat-row-compact .bag-mat-icon{font-size:16px}
  .bag-mat-row-compact .bag-mat-name{font-size:11px}
  .bag-mat-row-compact .bag-mat-right{font-size:10px}
  .bag-mat-row-compact .bag-mat-right .btn{font-size:9px;padding:2px 6px}
  .bag-more-hint{font-size:10px;padding:4px 0}
  .equip-top-actions{gap:3px}
  .equip-top-actions .btn{font-size:10px;padding:4px 6px}
  div[style*="overflow-x:auto"]{max-width:100%}
  .craft-mat{padding:4px 6px;flex-wrap:wrap;gap:4px;font-size:12px}
  .craft-mat .mi{font-size:16px}
  .craft-mat .qctrl input{width:32px;font-size:12px;padding:2px}
  .stat-cell{padding:6px}
  .stat-cell .num{font-size:18px}
  .slot-empty{min-height:60px;font-size:11px}
  .alloc-row{padding:6px 0}
  .alloc-row .btn{padding:4px 10px;font-size:13px}
  /* 锻造页手机适配（进一步压缩，确保短屏也能看到打造按钮） */
  .forge-area{padding:4px;border-radius:10px}
  .bag-main-tabs{margin-bottom:6px!important}
  .forge-header{padding:4px 10px;margin:-4px -4px 2px}
  .forge-header h2{font-size:13px}
  .forge-progress-line{padding:0}
  .forge-body{gap:3px}
  .forge-station{padding:5px;gap:5px}
  .forge-station-top{gap:5px}
  .forge-station-info{gap:3px}
  .forge-crucible{width:68px;height:68px}
  .forge-crucible .forge-item-icon{font-size:24px}
  .forge-crucible .forge-hammer{font-size:14px}
  .forge-crucible-hint{font-size:8px;bottom:4px;padding:1px 4px}
  .forge-temp{flex-wrap:wrap;gap:3px;padding:3px 6px;font-size:11px}
  .forge-temp .temp-track{height:6px}
  .forge-temp .temp-name{min-width:auto}
  .forge-selected{min-height:18px}
  .forge-sel-chip{padding:2px 6px;font-size:10px}
  .forge-probs{font-size:11px;line-height:1.45}
  .forge-prob-summary{flex-direction:column;align-items:flex-start;gap:2px}
  .forge-prob-summary .forge-mat-tier{font-size:10px;padding:2px 0 3px;margin-bottom:2px;white-space:normal;word-break:break-word}
  .forge-prob-summary .prob-toggle{font-size:10px;padding:2px 6px;align-self:flex-start}
  .forge-prob-modal{padding:12px;max-height:72vh}
  .forge-prob-modal-head h3{font-size:14px}
  .forge-station-controls{gap:4px}
  .forge-lock-row{gap:4px}
  .forge-lock label{font-size:10px}
  .part-chips,.level-chips{gap:3px}
  .part-chip,.level-chip{padding:2px 6px;font-size:10px;border-radius:8px}
  .forge-buttons .btn{padding:6px 8px;font-size:12px;min-height:32px}
  .forge-lock select{font-size:11px;max-width:90px}
  .rec-row,.rank-row,.duel-hrow{padding-left:4px;padding-right:4px;gap:8px}
  .rec-row .rec-name,.rank-row .rr-name,.duel-hrow .dh-foe{font-size:13px}
  .rank-row .rr-lv{width:48px}
  .craft-result-card{max-width:90vw;padding:16px}
  .craft-result-title{font-size:17px}
  .craft-result-item{font-size:14px}
}

/* ===== 奇遇弹窗 ===== */
.encounter-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(30,24,16,.65);animation:encFadeIn .3s ease-out}
@keyframes encFadeIn{0%{opacity:0}100%{opacity:1}}
.encounter-box{width:min(420px,90vw);background:linear-gradient(170deg,#f7f1e3,#efe7d6);border-radius:16px;padding:32px 28px;text-align:center;position:relative;border:2px solid var(--gold);box-shadow:0 0 60px rgba(201,162,39,.15);animation:encPop .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes encPop{0%{transform:scale(.7);opacity:0}100%{transform:scale(1);opacity:1}}
.encounter-box::before{content:'';position:absolute;inset:-6px;border-radius:20px;border:1px solid rgba(201,162,39,.3);pointer-events:none}
.encounter-box .enc-badge{font-size:48px;margin-bottom:4px}
.encounter-box .enc-poem{font-size:17px;color:var(--ink-soft);font-style:italic;line-height:1.8;margin:10px 0 6px;letter-spacing:1px}
.encounter-box .enc-byline{font-size:12px;color:var(--ink-faint);margin-bottom:12px}
.encounter-box .enc-title{font-size:22px;font-weight:bold;color:var(--cinnabar);letter-spacing:3px;margin:12px 0 4px}
.encounter-box .enc-sub{font-size:14px;color:var(--ink-soft);margin-bottom:16px}
.encounter-box .enc-reward{font-size:24px;font-weight:bold;color:var(--gold);margin:14px 0;min-height:40px;animation:encReveal .4s ease-out .3s both}
@keyframes encReveal{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
.encounter-box .enc-qual{font-size:15px;color:var(--ink-faint);margin-bottom:14px}
.encounter-box .enc-qual.rare{color:var(--cinnabar);font-weight:bold}

/* --- 3D 江湖(移植自 C 盘错误副本,2026-07-15) --- */
/* ===== 3D 江湖（Three.js） ===== */
#map3dRoot{position:fixed;inset:0;z-index:150;background:#0c0c10;overflow:hidden}
#map3dRoot.hidden{display:none}
#m3-canvas{position:absolute;inset:0}
#m3-canvas canvas{display:block}
#m3-flash{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s ease;z-index:5}
#m3-flash.on{opacity:1;transition:opacity .05s ease}
#m3-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:14px;padding:10px 16px;background:linear-gradient(180deg,rgba(20,16,10,.7),rgba(20,16,10,0));color:#f3ead6;z-index:10}
#m3-region{font-size:18px;font-weight:bold;letter-spacing:2px;text-shadow:0 1px 4px #000}
#m3-gold{font-size:14px;opacity:.9}
.m3-top-btns{margin-left:auto;display:flex;gap:8px}
.m3-btn{background:rgba(201,162,39,.18);border:1px solid var(--gold);color:#f0e2bf;padding:6px 12px;border-radius:8px;cursor:pointer;font-family:inherit;font-size:13px}
.m3-btn:hover{background:rgba(201,162,39,.35)}
.m3-btn.warn{border-color:var(--cinnabar);color:#f0c9c0;background:rgba(168,50,50,.18)}
.m3-btn.on{background:var(--gold);color:#2b2620;font-weight:bold}
#m3-player{position:absolute;left:16px;bottom:16px;width:300px;max-width:46vw;padding:12px 14px;background:rgba(20,16,10,.55);border:1px solid rgba(201,162,39,.4);border-radius:10px;color:#f3ead6;z-index:10;backdrop-filter:blur(2px)}
#m3-pinfo{font-size:14px;margin-bottom:8px;font-weight:bold}
.m3-bar{display:flex;align-items:center;gap:8px;margin:5px 0;font-size:12px}
.m3-bar>span{width:32px;flex:none;opacity:.85}
.m3-bar-bg{flex:1;height:12px;background:rgba(0,0,0,.4);border-radius:6px;overflow:hidden}
.m3-bar-fill{height:100%;width:100%;transition:width .25s ease}
.m3-bar-fill.hp{background:linear-gradient(90deg,#c0392b,#e0584a)}
.m3-bar-fill.mp{background:linear-gradient(90deg,#2f6fb0,#4a9fe0)}
.m3-bar-fill.exp{background:linear-gradient(90deg,#4a7c59,#6fae7c)}
.m3-hint{margin-top:8px;font-size:11px;opacity:.6;line-height:1.5}
.m3-hp{position:absolute;transform:translate(-50%,-100%);width:64px;pointer-events:none;z-index:8;text-align:center}
.m3-hp-name{font-size:10px;color:#fff;text-shadow:0 1px 2px #000;margin-bottom:2px;white-space:nowrap}
.m3-hp-fill{height:6px;width:100%;background:#c0392b;border-radius:3px;box-shadow:0 0 3px rgba(0,0,0,.6)}
.m3-hp.low .m3-hp-fill{background:#e0b94a}
.m3-dmg{position:absolute;transform:translate(-50%,-50%);font-size:18px;font-weight:bold;color:#ffd9c0;text-shadow:0 1px 3px #000;pointer-events:none;z-index:9;animation:m3float .9s ease-out forwards}
.m3-dmg.crit{color:#ffcf4a;font-size:24px}
.m3-dmg.heal{color:#8fe0a0}
.m3-dmg.miss{color:#cfcfcf;font-size:14px}
@keyframes m3float{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-160%) scale(1.1)}}
#m3-result{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%) scale(.6);font-size:54px;font-weight:bold;letter-spacing:6px;opacity:0;z-index:12;pointer-events:none;text-shadow:0 3px 16px #000}
#m3-result.show{animation:m3result 1.3s ease-out}
#m3-result.win{color:#ffd86a}
#m3-result.lose{color:#e0584a}
#m3-result.flee{color:#cfcfcf;font-size:40px}
@keyframes m3result{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
#m3-picker{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(12,10,16,.78)}
#m3-picker.hidden{display:none}
.m3-picker-box{width:min(720px,92vw);max-height:86vh;overflow:auto;background:linear-gradient(170deg,#f7f1e3,#efe7d6);border:2px solid var(--gold);border-radius:16px;padding:24px}
.m3-picker-box h2{color:var(--cinnabar);letter-spacing:3px;margin-bottom:16px;text-align:center}
.m3-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.m3-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.m3-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.m3-card.boss{border-color:var(--cinnabar);background:linear-gradient(170deg,#fbeeee,#f7e3e3)}
.m3-card h3{color:var(--ink);margin-bottom:6px}
.m3-card-sub{font-size:13px;color:var(--cinnabar);margin-bottom:4px}
.m3-card-meta{font-size:12px;color:var(--ink-soft)}
/* ===== 2.5D 江湖（水墨国风 · 侠义道风格） ===== */
#map2dRoot{position:fixed;inset:0;z-index:150;background:#e9e3d2;overflow:hidden}
#map2dRoot.hidden{display:none}
#m2-canvas{position:absolute;inset:0;display:block;background:#e9e3d2}
#m2-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:14px;padding:10px 16px;background:linear-gradient(180deg,rgba(43,38,32,.78),rgba(43,38,32,0));color:#f3ead6;z-index:10}
#m2-region{font-size:18px;font-weight:bold;letter-spacing:2px;text-shadow:0 1px 4px #000}
#m2-gold{font-size:14px;opacity:.9}
.m2-top-btns{margin-left:auto;display:flex;gap:8px}
.m2-btn{background:rgba(201,162,39,.18);border:1px solid var(--gold);color:#f0e2bf;padding:6px 12px;border-radius:8px;cursor:pointer;font-family:inherit;font-size:13px}
.m2-btn:hover{background:rgba(201,162,39,.35)}
.m2-btn.warn{border-color:var(--cinnabar);color:#f0c9c0;background:rgba(168,50,50,.18)}
.m2-btn.on{background:var(--gold);color:#2b2620;font-weight:bold}
#m2-player{position:absolute;left:16px;bottom:16px;width:300px;max-width:46vw;padding:12px 14px;background:rgba(43,38,32,.55);border:1px solid rgba(201,162,39,.4);border-radius:10px;color:#f3ead6;z-index:10}
.m2-hint{margin-top:8px;font-size:11px;opacity:.6;line-height:1.5}
#m2-picker{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(43,38,32,.78)}
#m2-picker.hidden{display:none}
.m2-picker-box{width:min(720px,92vw);max-height:86vh;overflow:auto;background:linear-gradient(170deg,#f7f1e3,#efe7d6);border:2px solid var(--gold);border-radius:16px;padding:24px}
.m2-picker-box h2{color:var(--cinnabar);letter-spacing:3px;margin-bottom:16px;text-align:center}
.m2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.m2-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.m2-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.m2-card.boss{border-color:var(--cinnabar);background:linear-gradient(170deg,#fbeeee,#f7e3e3)}
.m2-card h3{color:var(--ink);margin-bottom:6px}
.m2-card-sub{font-size:13px;color:var(--cinnabar);margin-bottom:4px}
.m2-card-meta{font-size:12px;color:var(--ink-soft)}

/* ============================================================
   动效包 · 文字版氛围增强（纯增量，不动任何系统逻辑）
   灵感取自竞品：会呼吸的背景 / 墨色涟漪 / 留白写意 / 突破仪式感
   ============================================================ */
/* —— 1) 会呼吸的背景：缓慢漂移的薄雾与水墨晕染，叠在宣纸底上 —— */
body::before{
  content:'';
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(circle at 15% 18%, rgba(255,255,255,.20), transparent 38%),
    radial-gradient(circle at 82% 72%, rgba(201,162,39,.10), transparent 44%),
    radial-gradient(circle at 62% 42%, rgba(120,95,60,.10), transparent 40%),
    radial-gradient(circle at 35% 85%, rgba(255,255,255,.12), transparent 36%);
  background-size:220% 220%;
  animation:mistDrift 28s ease-in-out infinite;
  opacity:.35;
}
@keyframes mistDrift{
  0%{background-position:0% 0%}
  50%{background-position:100% 100%}
  100%{background-position:0% 0%}
}

/* —— 2) 面板 / 卡片入场：淡入 + 轻微上浮，切换视图时整页"活"起来 —— */
.panel{animation:panelIn .42s cubic-bezier(.22,.7,.36,1) both}
.item-card,.region-card,.skill-card,.encounter-box,.craft-result-card{animation:cardIn .46s cubic-bezier(.22,.7,.36,1) both}
@keyframes panelIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes cardIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

/* —— 3) 墨色涟漪：点击按钮/卡片时从点击处扩散的金色墨晕 —— */
.ink-ripple{
  position:fixed;border-radius:50%;pointer-events:none;z-index:9999;
  background:radial-gradient(circle, rgba(201,162,39,.38), rgba(168,50,50,.14) 60%, transparent 72%);
  transform:translate(-50%,-50%) scale(0);
  animation:rippleOut .62s ease-out forwards;
}
@keyframes rippleOut{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* —— 4) 升级突破横幅：朱砂印章「突破」+ 等级，仪式感 —— */
.levelup-banner{
  position:fixed;inset:0;z-index:9000;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  animation:lubFade 1.9s ease-out forwards;
}
.levelup-banner .lub-seal{
  width:260px;height:260px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle, rgba(168,50,50,.94) 0%, rgba(168,50,50,.86) 60%, rgba(168,50,50,.95) 100%);
  border:3px solid rgba(201,162,39,.55);
  box-shadow:0 0 50px rgba(168,50,50,.35), inset 0 0 30px rgba(0,0,0,.25);
  animation:lubStamp .5s cubic-bezier(.34,1.56,.64,1) both;
}
.levelup-banner .lub-title{
  font-family:'Ma Shan Zheng','STKaiti','KaiTi',serif;
  font-size:64px;font-weight:700;color:#f7e9c6;letter-spacing:8px;
  text-shadow:0 2px 8px rgba(0,0,0,.4);margin-bottom:2px;
}
.levelup-banner .lub-sub{
  font-size:26px;font-weight:bold;color:var(--gold-2);letter-spacing:3px;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.levelup-banner .lub-rays{
  position:absolute;width:420px;height:420px;border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 8deg, rgba(201,162,39,.16) 8deg 12deg, transparent 12deg 20deg);
  animation:lubSpin 9s linear infinite;opacity:.7;
}
@keyframes lubFade{0%{opacity:0}14%{opacity:1}82%{opacity:1}100%{opacity:0}}
@keyframes lubStamp{0%{transform:scale(.4) rotate(-12deg);opacity:0}60%{transform:scale(1.08) rotate(0);opacity:1}100%{transform:scale(1)}}
@keyframes lubSpin{to{transform:rotate(360deg)}}

/* —— 5) 顶栏资源数字滚动：变化时短暂放大+金色高亮（由 JS 触发 .roll） —— */
.status .st b.roll{animation:numRoll .5s ease-out}
@keyframes numRoll{0%{transform:scale(1);color:var(--gold-2)}40%{transform:scale(1.25);color:#fff;filter:drop-shadow(0 0 6px rgba(201,162,39,.8))}100%{transform:scale(1)}}

/* —— 降级：用户偏好减少动态时关闭氛围动画 —— */
@media (prefers-reduced-motion: reduce){
  body::before{animation:none}
  .panel,.item-card,.region-card,.skill-card,.craft-result-card{animation:none}
  .ink-ripple,.levelup-banner{display:none}
}

/* ============ 通用弹窗（详情 / 子页，手机优先） ============ */
.modal-overlay{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:flex-end;justify-content:center;
  background:rgba(40,30,15,.5);backdrop-filter:blur(2px);
}
.modal-overlay.open{display:flex;animation:modalFade .2s ease both}
.modal-card{
  width:100%;max-width:560px;max-height:88vh;display:flex;flex-direction:column;
  background:var(--card);border-radius:16px 16px 0 0;
  box-shadow:0 -6px 30px rgba(0,0,0,.28);
  transform:translateY(24px);animation:modalRise .28s cubic-bezier(.22,.7,.36,1) both;
}
.modal-overlay.open .modal-card{transform:translateY(0)}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 16px;border-bottom:1px solid var(--line);
  background:linear-gradient(135deg,#3a3228,#2b2620);color:var(--paper);
  border-radius:16px 16px 0 0;flex:none;
}
.modal-title{font-size:17px;font-weight:bold;letter-spacing:1px;color:var(--gold-2);font-family:'Ma Shan Zheng',serif}
.modal-close{background:transparent;border:none;color:var(--paper);font-size:20px;line-height:1;padding:2px 8px;cursor:pointer}
.modal-body{padding:14px 16px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.modal-body .panel{margin-bottom:12px}
.modal-body .panel:last-child{margin-bottom:0}
@keyframes modalFade{from{opacity:0}to{opacity:1}}
@keyframes modalRise{from{transform:translateY(24px)}to{transform:translateY(0)}}
@media(min-width:560px){
  .modal-overlay{align-items:center}
  .modal-card{border-radius:16px;max-height:84vh}
}

/* ============ 手机端：角色页原生布局（整屏固定不滚，Tab 切换，全宽放大） ============ */
@media(max-width:768px){
  body.no-scroll{overflow:hidden}
  .content.view-char{height:100%;min-height:0;overflow:hidden;display:flex;flex-direction:column;padding:0 0 66px}
  .char-view{--char-px:16px;height:100%;min-height:0;border-radius:0;border:none;box-shadow:none;background:transparent;gap:0}
  .char-hero{grid-template-columns:80px 1fr;gap:12px;align-items:center;padding:12px var(--char-px) 8px;text-align:left}
  .char-portrait-wrap{width:80px;height:80px;border-radius:50%;border:3px solid var(--gold);box-shadow:0 6px 18px rgba(0,0,0,.14);background:linear-gradient(180deg,#fbf7ee,#e9e0cf);overflow:hidden;align-self:center}
  .char-portrait{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:top center;filter:sepia(.12) contrast(1.02)}
.char-portrait.char-emoji{display:flex;align-items:center;justify-content:center;font-size:34px;line-height:1;filter:none;background:radial-gradient(circle at 50% 35%,#fff7e8,#e7dcc6)}
  .char-ink-ava{width:26px;height:26px;right:-2px;bottom:-2px;font-size:12px;font-weight:700;border-width:2px}
  .char-info{align-items:flex-start;text-align:left;gap:6px}
  .char-name{font-size:20px;font-weight:800}
  .lv-badge{font-size:12px;padding:2px 8px;border-radius:12px}
  .char-cp-line{justify-content:center;gap:8px;margin:10px 0 12px;padding:0 var(--char-px)}
  .char-cp-num{font-size:30px;font-weight:900}
  .char-cp-lbl{font-size:12px}
  .char-exp-line{margin:0 var(--char-px) 10px;gap:8px}
  .char-exp-line .hp-bar{height:8px!important;max-width:none}
  .char-exp-line .exp-txt{font-size:10px}
  .char-hero-foot{justify-content:center;gap:8px;margin:0 var(--char-px) 8px;min-height:24px}
  .char-hero-foot .btn{font-size:12px;padding:5px 10px}
  .char-tabbar{padding:8px var(--char-px);gap:10px;grid-template-columns:repeat(2,1fr)}
  .char-tab{padding:12px 4px;font-size:13px;border-radius:12px;gap:4px}
  .char-tab .ct-ico{font-size:22px}
  .char-tabbody{padding:0 var(--char-px) 12px}
  .char-panel{gap:14px}
  .char-stat-grid{gap:10px;margin-bottom:14px}
  .char-stat-cell{padding:14px 4px;border-radius:14px}
  .char-stat-cell .csc-ico{font-size:22px}
  .char-stat-cell .csc-val{font-size:18px}
  .char-stat-cell .csc-name{font-size:12px}
  .char-sub{font-size:16px;margin:4px 0 10px}
  .char-chips2{gap:8px;margin-bottom:12px}
  .char-chips2 .chip{font-size:12px;padding:5px 11px}
  .attr-mini-grid{gap:12px}
  .attr-mini{padding:14px 14px;border-radius:12px}
  .am-root{font-size:17px}
  .am-stat{font-size:16px}
  .am-stat b{font-size:18px}
  .am-formula{font-size:12px}
  .heart-list,.life-list{gap:10px}
  .heart-row,.life-row{padding:14px 16px;border-radius:14px}
  .hr-name{font-size:15px}
  .hr-eff{font-size:13px}
  .life-row{gap:12px}
  .life-name{font-size:15px;width:110px}
  .life-left{font-size:13px;width:72px}
  .life-bar .hp-bar{height:14px}
  .title-main{padding:16px;border-radius:14px}
  .tm-name{font-size:19px}
  .tm-bonus{font-size:14px}
  .title-tags .tag{font-size:13px;padding:4px 10px}
}

/* ============ 全 App 磨砂玻璃面板：透出统一背景图 ============ */
.panel,.item-card,.region-card,.bag-section,.settings-section,.alloc,
.attr-mini,.battle-card,.battle-scene,.forge-area,.forge-station,.forge-header,
.picker-row,.bag-mat-row,.inv-tab,.bag-main-tabs,.ach-row,.ach-card,
.ach-tab,.rank-tab,.title-chip,.forge-sel-chip,.forge-temp,.forge-cost,
.hud-stat,.chip,.skill-btn,.battle-log,.encounter-box,.create-card,.modal-card{
  -webkit-backdrop-filter:blur(6px) saturate(1.05);
  backdrop-filter:blur(6px) saturate(1.05);
}

/* ============================================================
   视图级紧凑适配：保证各原生 Tab/页面在 390×844 内不滚动
   ============================================================ */

/* 装备/背囊：压白边、压工具栏、压筛选 */
.content.view-bag{display:flex;flex-direction:column;gap:0;overflow:hidden}
.content.view-bag .panel{flex:none;padding:10px;margin-bottom:8px}
.content.view-bag .bag-main-tabs{flex:none;margin-bottom:8px;padding:3px}
.content.view-bag .bag-main-tab{min-height:36px}
.content.view-bag .bag-section{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:8px;border-radius:10px}
.content.view-bag .bag-section-head{flex:none}
.content.view-bag .bag-toolbar{flex:none;margin-bottom:6px;padding-bottom:6px;gap:4px;flex-wrap:nowrap}
.content.view-bag .inv-tabs{flex:none;margin-bottom:6px;gap:4px}
.content.view-bag .bag-equip-list,
.content.view-bag .bag-mat-list{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:60px}
.content.view-bag .iactions{margin-bottom:6px}
.content.view-bag .iactions .btn{padding:6px 10px;font-size:12px}
.content.view-bag .char-equip{gap:6px}
.content.view-bag .char-slot{min-height:58px;padding:6px 2px;border-radius:8px}
.content.view-bag .char-slot .cs-ico{font-size:22px}
.content.view-bag .char-slot .cs-name{font-size:10px}
.content.view-bag .equip-footbar{padding:6px 2px;font-size:11px}
.content.view-bag .bag-toolbar .btn{padding:5px 8px;font-size:11px}
.content.view-bag .bag-toolbar select{padding:4px 6px;font-size:11px}
.content.view-bag .bag-toolbar .bt-hint{font-size:10px}
.content.view-bag .inv-tab{padding:3px 7px;font-size:11px}

/* 背包装备/材料/丹药 紧凑行列表（替代 tile-grid，防滚动） */
.bag-equip-list{display:flex;flex-direction:column;gap:6px}
.bag-equip-row{display:flex;align-items:center;gap:8px;padding:8px 10px;background:rgba(255,255,255,.55);border:1px solid rgba(180,165,140,.4);border-radius:10px;cursor:pointer;transition:.15s;position:relative}
.bag-equip-row:hover{border-color:var(--gold);background:rgba(255,255,255,.75);transform:translateY(-1px)}
.bag-equip-row.quality-白{--row-color:#bdb4a3}
.bag-equip-row.quality-绿{--row-color:#6a9f6a}
.bag-equip-row.quality-蓝{--row-color:#6a8fc0}
.bag-equip-row.quality-紫{--row-color:#9b7bb5}
.bag-equip-row.quality-橙{--row-color:#c9a060}
.bag-equip-row.quality-极品{--row-color:#c4a44a}
.bag-equip-row.quality-王器{--row-color:#5a9f8f}
.bag-equip-row.quality-圣器{--row-color:#8a8ab0}
.bag-equip-row.quality-神器{--row-color:#c45a5a}
.bag-equip-row.quality-仙器{--row-color:#5aa8c0}
.bag-equip-row.quality-混沌{--row-color:#9b70c0}
.bag-equip-row.quality-鸿蒙{--row-color:#c77ab0}
.bag-equip-row{border-left:3px solid var(--row-color,rgba(180,165,140,.4))}
.ber-icon{font-size:22px;flex:none}
.ber-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ber-name{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px}
.ber-wuji{font-size:9px;background:rgba(252,243,217,.9);color:#b8860b;padding:1px 4px;border-radius:6px;border:1px solid #e8c46a}
.ber-attrs{font-size:11px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ber-actions{display:flex;gap:4px;flex:none}
.ber-actions .btn{font-size:11px;padding:3px 7px;min-width:32px}
.ber-lock{font-size:10px}
.ber-dur{font-size:9px;background:#fff7e6;color:#e8954c;padding:1px 4px;border-radius:6px;border:1px solid #e8954c}
.ber-dur.broken{background:var(--cinnabar);color:#fff;border-color:var(--cinnabar)}
.ber-tags{display:inline-flex;gap:3px;align-items:center;flex-wrap:wrap}
.ber-tag{font-size:9px;padding:1px 4px;border-radius:5px;white-space:nowrap;line-height:1.2;border:1px solid rgba(0,0,0,.1)}
.ber-tag.wuji{background:#fdf3d8;color:#b8860b}
.ber-tag.tech{background:#e8f0ff;color:#4a6fc0}
.ber-tag.effect{background:#f0e8ff;color:#7b4ab5}
.ber-tag.set{background:#e8f7f0;color:#4a9b6a}
.ber-tag.absorb{background:#fff0e8;color:#b86a3a}
.ber-cmp{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:10px;margin-top:2px}
.ber-cp-diff{font-weight:700}
.ber-cp-diff.up{color:#4a9b5a}
.ber-cp-diff.down{color:var(--cinnabar)}
.ber-cp-diff.same{color:#888}
.ber-cmp-sep{color:rgba(0,0,0,.2)}
.ber-diff{white-space:nowrap}
.ber-diff.up{color:#4a9b5a}
.ber-diff.down{color:var(--cinnabar)}

.bag-mat-row-compact{display:flex;align-items:center;gap:8px;padding:8px 10px;background:rgba(255,255,255,.55);border:1px solid rgba(180,165,140,.4);border-radius:10px}
.bag-mat-row-compact .bag-mat-info{flex:1;display:flex;align-items:center;gap:7px;min-width:0}
.bag-mat-row-compact .bag-mat-icon{font-size:18px}
.bag-mat-row-compact .bag-mat-name{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bag-mat-row-compact .bag-mat-q{font-size:10px;color:var(--ink-soft);background:rgba(0,0,0,.06);padding:1px 5px;border-radius:8px;white-space:nowrap}
.bag-mat-row-compact .bag-mat-right{font-size:12px;color:var(--ink-soft);white-space:nowrap;display:flex;align-items:center;gap:6px}
.bag-mat-row-compact .bag-mat-right .btn{font-size:11px;padding:3px 10px}
.bag-more-hint{text-align:center;font-size:12px;color:var(--ink-soft);padding:8px 0;opacity:.85}
.bag-more-hint::before{content:"↓ "}
.equip-top-actions{display:flex;gap:8px}
.equip-top-actions .btn{flex:1;font-size:12px;padding:5px 10px}

/* 江湖版图：去掉横幅，区域列表紧凑单行 */
.content.view-map .panel{padding:10px;margin-bottom:8px}
.content.view-map .panel h2{font-size:16px;margin-bottom:8px}
.content.view-map .region-list{display:flex;flex-direction:column;gap:3px}
.content.view-map .region-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:3px 8px;border-radius:6px;background:rgba(255,255,255,.45);border:1px solid rgba(180,165,140,.4);border-left:3px solid var(--ink-faint);cursor:pointer;transition:.15s}
.content.view-map .region-row.boss{border-left-color:var(--cinnabar)}
.content.view-map .region-row.farmable{border-left-color:var(--jade);background:rgba(250,255,250,.55)}
.content.view-map .region-row.best{box-shadow:0 0 0 1px var(--gold) inset,var(--shadow)}
.content.view-map .region-row.toohard{opacity:.72}
.content.view-map .region-row .rr-left{display:flex;align-items:center;gap:6px;min-width:0;flex:1}
.content.view-map .region-row .rr-ico{font-size:14px}
.content.view-map .region-row .rr-name{font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.content.view-map .region-row .rr-best{background:#fcf3d9;color:#c9a227;font-size:8px;padding:0 4px;border-radius:8px}
.content.view-map .region-row .rr-right{display:flex;align-items:center;gap:6px;flex:none;white-space:nowrap}
.content.view-map .region-row .rr-tag{font-size:9px;color:var(--ink-soft);background:rgba(255,255,255,.55);padding:0 5px;border-radius:8px}
.content.view-map .region-row .rr-lv{font-size:10px;color:var(--ink-soft);min-width:32px;text-align:right}

/* 成就页：竹林背景 + 三分类进度 + 详情弹窗 */
.content.view-ach{padding:0 0 66px}
/* 成就首页：水墨仙侠 */
.content.view-achievements{padding:0;display:flex;flex-direction:column;overflow:hidden}
body.view-achievements .auto-fab{display:none}
.ach-ink-view{flex:1;min-height:0;display:flex;flex-direction:column;position:relative;overflow:hidden;background:linear-gradient(180deg,#eef3ef 0%,#f5f1e6 40%,#e8e0d2 100%)}
.aiv-landscape{position:absolute;inset:0;z-index:0;pointer-events:none}
.aiv-landscape svg{width:100%;height:100%}
.aiv-crane{position:absolute;top:10%;right:10%;font-size:34px;z-index:1;opacity:.8;filter:drop-shadow(0 2px 3px rgba(0,0,0,.1));animation:craneFly 8s ease-in-out infinite}
.aiv-header{flex:none;position:relative;z-index:2;display:flex;align-items:center;justify-content:center;padding:12px 16px 8px}
.aiv-back{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:rgba(255,253,247,.7);color:var(--ink);font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow);-webkit-tap-highlight-color:transparent}
.aiv-back:active{transform:translateY(-50%) scale(.95)}
.aiv-title{font-size:18px;font-weight:800;letter-spacing:3px;color:var(--ink);font-family:'Ma Shan Zheng',cursive;display:flex;align-items:center;gap:10px}
.aiv-line{flex:1;width:42px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.aiv-header-gap{width:34px}
.aiv-hero{flex:none;margin:0 16px 10px;position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:18px;padding:18px 20px;border-radius:var(--radius);background:rgba(255,253,247,.72);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(3px)}
.aiv-hero-main,.aiv-hero-side{display:flex;flex-direction:column;align-items:center;gap:4px}
.aiv-hero-divider{width:1px;align-self:stretch;background:linear-gradient(180deg,transparent,var(--line),transparent)}
.aiv-hero-label{font-size:11px;color:var(--ink-soft);letter-spacing:1px}
.aiv-hero-num{font-size:28px;font-weight:800;color:var(--ink);font-family:'Ma Shan Zheng',cursive;display:flex;align-items:baseline;gap:4px}
.aiv-hero-num b{font-size:36px;color:var(--cinnabar-2)}
.aiv-hero-num span{font-size:15px;color:var(--ink-faint)}
.aiv-hero-pct{font-size:28px;font-weight:800;color:var(--gold);font-family:'Ma Shan Zheng',cursive}
.aiv-hero-pct small{font-size:14px;margin-left:2px}
.aiv-grid{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:10px;padding:0 16px 10px;position:relative;z-index:2}
.aiv-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:14px 12px 12px;border-radius:var(--radius);background:rgba(255,253,247,.68);border:1px solid var(--line);box-shadow:var(--shadow);cursor:pointer;overflow:hidden;transition:.15s;-webkit-tap-highlight-color:transparent}
.aiv-card:active{transform:scale(.98)}
.aiv-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--card-accent);opacity:.8}
.aiv-slaying{--card-accent:#c0392b}
.aiv-gathering{--card-accent:#2f9e87}
.aiv-forging{--card-accent:#b8860b}
.aiv-knowledge{--card-accent:#3a7bd5}
.aiv-card-top{display:flex;align-items:center;gap:6px}
.aiv-card-ico{font-size:22px;line-height:1;opacity:.85}
.aiv-card-name{font-size:15px;font-weight:700;letter-spacing:2px;color:var(--ink);flex:1;min-width:0}
.aiv-card-count{font-size:11px;color:var(--ink-faint);background:rgba(0,0,0,.05);padding:2px 6px;border-radius:8px}
.aiv-card-mid{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:8px 0 10px}
.aiv-card-pct{font-size:38px;font-weight:800;font-family:'Ma Shan Zheng',cursive;line-height:1;letter-spacing:-1px}
.aiv-card-pct small{font-size:14px;margin-left:2px;font-family:inherit}
.aiv-card-sub{font-size:10px;color:var(--ink-faint);letter-spacing:1px}
.aiv-card-bar{height:5px;background:rgba(0,0,0,.08);border-radius:3px;overflow:hidden}
.aiv-card-fill{height:100%;border-radius:3px;transition:width .4s ease}
.aiv-footer{flex:none;display:flex;gap:12px;padding:0 16px 16px;position:relative;z-index:2}
.aiv-foot-btn{flex:1;padding:12px 10px;border-radius:24px;border:1px solid var(--line);background:rgba(255,253,247,.82);color:var(--ink);font-size:14px;font-weight:700;letter-spacing:2px;cursor:pointer;box-shadow:var(--shadow);transition:.15s;-webkit-tap-highlight-color:transparent}
.aiv-foot-btn:active{transform:scale(.97)}
.aiv-foot-btn.primary{background:linear-gradient(180deg,var(--cinnabar-2),#8f2626);color:#fff;border-color:rgba(168,50,50,.4);box-shadow:0 4px 12px rgba(168,50,50,.25)}
body.lang-en .aiv-card-name{font-size:13px;letter-spacing:0}
body.lang-en .aiv-card-sub{font-size:9px;letter-spacing:0}
body.lang-en .aiv-foot-btn{font-size:12px;letter-spacing:0}

/* 成就总览弹窗 */
.ach-overview-overlay{align-items:center;justify-content:flex-end;padding:0;z-index:110}
.ach-overview-overlay .overlay-backdrop{background:rgba(0,0,0,.45)}
.ach-overview-card{width:100%;height:88vh;max-height:720px;background:linear-gradient(180deg,#faf8f2,#f5f0e4);border-radius:20px 20px 0 0;box-shadow:0 -6px 24px rgba(0,0,0,.2);display:flex;flex-direction:column;overflow:hidden;animation:slideUp .25s ease}
.ach-ov-header{flex:none;display:flex;align-items:center;justify-content:center;position:relative;padding:14px 16px;border-bottom:1px solid rgba(180,165,140,.25);background:rgba(255,255,255,.5)}
.ach-ov-title{font-size:17px;font-weight:800;letter-spacing:2px;color:var(--ink)}
.ach-ov-close{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;border:none;background:rgba(180,165,140,.2);color:var(--ink);font-size:18px;cursor:pointer}
.ach-ov-body{flex:1;min-height:0;overflow-y:auto;padding:12px 16px 16px}
.ach-ov-prestige{background:rgba(255,255,255,.7);border:1px solid rgba(180,165,140,.3);border-radius:12px;padding:12px;margin-bottom:10px}
.ach-ov-pres-main{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.ach-ov-pres-badge{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.4));box-shadow:0 0 0 2px var(--pc),0 2px 8px rgba(0,0,0,.1)}
.ach-ov-pres-info{flex:1;min-width:0}
.ach-ov-pres-name{font-size:14px;font-weight:700;color:var(--pc)}
.ach-ov-pres-track{height:6px;background:rgba(0,0,0,.08);border-radius:3px;overflow:hidden;margin-top:5px}
.ach-ov-pres-fill{height:100%;border-radius:3px}
.ach-ov-pres-val{font-size:16px;font-weight:700;color:var(--ink);text-align:right;flex:none}
.ach-ov-pres-val small{display:block;font-size:9px;color:var(--ink-soft);font-weight:400}
.ach-ov-pres-tip{font-size:11px;color:var(--ink-soft)}
.ach-ov-body .ach-cat-tabs{flex-wrap:wrap;gap:6px}
.ach-ov-body .ach-cat-tabs .bag-main-tab{flex:none;white-space:nowrap;padding:6px 10px;font-size:12px;border-radius:14px;background:rgba(255,255,255,.7);border:1px solid rgba(180,165,140,.3)}
.ach-ov-body .ach-cat-tabs .bag-main-tab.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.ach-ov-body .ach-grid{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.ach-ov-body .ach-tile{padding:12px 4px;border-radius:10px;gap:5px}
.ach-ov-body .ach-tile .ach-tile-ico{font-size:26px}
.ach-ov-body .ach-tile .ach-tile-name{font-size:12px}
.ach-ov-body .ach-tile .ach-tile-tier{font-size:10px}
.ach-ov-body .ach-tile .ach-tile-bar{height:4px;margin-top:3px}

/* 成就详情弹窗 */
.ach-detail-overlay{align-items:center;justify-content:center;padding:16px;z-index:120;background:rgba(0,0,0,.55)}
.ach-detail-card{position:relative;width:min(380px,92vw);max-height:88vh;background:linear-gradient(180deg,#faf8f2,#f0ebe0);border-radius:20px;border:1px solid rgba(180,165,140,.5);box-shadow:0 12px 40px rgba(0,0,0,.35);padding:24px 20px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden;animation:popIn .25s ease}
.ach-detail-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 844' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='dsky' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%235a6a6a'/%3E%3Cstop offset='45%25' stop-color='%236a7a7a'/%3E%3Cstop offset='100%25' stop-color='%234a5a5a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='390' height='844' fill='url(%23dsky)'/%3E%3Cpath d='M-40 380 q60-80 140-40 t160-30 t170 50 v484 h-470 z' fill='%233a4a4a' opacity='.6'/%3E%3Cpath d='M-40 460 q80-60 160-30 t180-10 t110 40 v384 h-450 z' fill='%232a3a3a' opacity='.5'/%3E%3Cpath d='M0 844 v-80 q80-50 180 0 t210-30 v110 z' fill='%231a2a2a' opacity='.4'/%3E%3C/svg%3E") no-repeat center/cover;opacity:.25}
.ach-detail-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(250,248,242,.85) 0,rgba(250,248,242,.65) 55%,rgba(250,248,242,.85) 100%)}
.ach-detail-crane{position:absolute;top:6%;right:10%;font-size:34px;opacity:.7;animation:craneFly 6s ease-in-out infinite;z-index:0}
.ach-detail-close{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;border:none;background:rgba(180,165,140,.25);color:var(--ink);font-size:18px;cursor:pointer;z-index:2}
.ach-detail-head{position:relative;z-index:1;display:flex;align-items:center;gap:10px;margin-bottom:6px}
.ach-detail-title{font-size:18px;font-weight:800;letter-spacing:3px;color:var(--ink)}
.ach-detail-deco{color:rgba(180,165,140,.7);font-size:12px}
.ach-detail-icon{position:relative;z-index:1;width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:38px;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.5));box-shadow:0 0 0 3px var(--c),0 6px 18px rgba(0,0,0,.12);margin:8px 0 6px}
.ach-detail-name{position:relative;z-index:1;font-size:20px;font-weight:800}
.ach-detail-tier{position:relative;z-index:1;font-size:12px;color:var(--ink-soft);margin-bottom:10px}
.ach-detail-desc{position:relative;z-index:1;background:rgba(255,255,255,.65);border:1px solid rgba(180,165,140,.35);border-radius:12px;padding:12px 14px;font-size:13px;color:var(--ink);line-height:1.7;text-align:left;width:100%;margin-bottom:10px}
.ach-detail-prog{position:relative;z-index:1;width:100%;margin-bottom:10px}
.ach-detail-bar{height:8px;background:rgba(0,0,0,.08);border-radius:4px;overflow:hidden}
.ach-detail-fill{height:100%;background:linear-gradient(90deg,#c0392b,#e8954c);border-radius:4px}
.ach-detail-prog-txt{font-size:11px;color:var(--ink-soft);margin-top:3px}
.ach-detail-reward{position:relative;z-index:1;background:rgba(255,255,255,.65);border:1px solid rgba(180,165,140,.35);border-radius:12px;padding:10px 12px;font-size:12px;color:var(--ink);line-height:1.8;text-align:left;width:100%;margin-bottom:12px}
.ach-detail-actions{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;gap:8px}
.ach-detail-btn{width:100%;padding:11px 20px;border-radius:22px;border:1px solid rgba(180,165,140,.6);background:rgba(255,255,255,.8);color:var(--ink);font-size:14px;font-weight:700;letter-spacing:1px;cursor:pointer;transition:.15s}
.ach-detail-btn.primary{background:linear-gradient(180deg,#c0392b,#a32d2d);color:#fff;border-color:rgba(168,50,50,.4);box-shadow:0 3px 10px rgba(168,50,50,.25)}
.ach-detail-btn:hover{transform:translateY(-1px)}

@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes popIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}

/* 设置：压白边 */
.content.view-settings .panel{padding:12px;margin-bottom:10px}
.content.view-settings .settings-section{padding:10px 12px;margin-bottom:10px;border-radius:10px}
.content.view-settings .settings-section h3{margin-bottom:8px;font-size:14px}
.content.view-settings .settings-row{padding:6px 0;font-size:13px}
.content.view-settings .settings-actions{margin-top:6px}
.content.view-settings .settings-actions .btn{padding:8px 10px;font-size:13px}

/* 比武场：面板和对手卡片压紧凑 */
.content.view-arena .panel{padding:10px;margin-bottom:8px}
.content.view-arena .panel > p.muted{font-size:12px;margin-bottom:8px}
.content.view-arena .arena-tabs{margin-bottom:8px}
.content.view-arena .grid-2{gap:8px}
.content.view-arena .item-card{padding:8px}
.content.view-arena .item-card .iname{font-size:13px;margin-bottom:2px}
.content.view-arena .item-card .imeta{font-size:11px;line-height:1.4;margin-bottom:4px}
.content.view-arena .item-card .iactions{margin-top:4px}
.content.view-arena .item-card .btn{padding:4px 8px;font-size:11px}
.content.view-arena .cp-cmp{margin:4px 0}
.content.view-arena .cp-line{font-size:10px}



/* ============================================================
   角色页新版紧凑属性面板（参考修仙手游：双栏属性 + 圆形标签 + 资源条）
   ============================================================ */

/* 顶部资源条（金币 / 声望 / 荣誉） */
.char-res{display:flex;align-items:center;gap:6px;margin:3px 0 4px;flex-wrap:wrap}
.cres{display:inline-flex;align-items:center;gap:3px;background:rgba(255,255,255,.55);border:1px solid rgba(180,165,140,.35);border-radius:12px;padding:3px 8px;font-size:12px;color:#5a5046}
.cres b{font-size:11px}
.cres.gold b{color:#b8860b}
.cres.prestige b{color:#9b7bb5}
.cres.honor b{color:#c45a5a}

/* 属性卡片 */
.char-attr-card{background:rgba(255,253,247,.6);border:1px solid rgba(180,165,140,.35);border-radius:12px;padding:8px 10px;box-shadow:var(--shadow)}
.char-attr-head{font-size:13px;font-weight:700;color:var(--cinnabar);margin-bottom:6px;padding-left:6px;border-left:3px solid var(--gold);letter-spacing:1px}
.char-attr-table{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.attr-col{display:flex;flex-direction:column;gap:4px}
.attr-row{display:flex;align-items:center;gap:6px;background:var(--card);border:1px solid rgba(180,165,140,.25);border-radius:8px;padding:4px 8px}
.attr-icon{flex:none;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.2)}
.attr-row.atk .attr-icon{background:linear-gradient(135deg,#d9534f,#b03030)}
.attr-row.def .attr-icon{background:linear-gradient(135deg,#5a8fc0,#3a6790)}
.attr-row.spd .attr-icon{background:linear-gradient(135deg,#6a9f6a,#3f7a3f)}
.attr-row.crit .attr-icon{background:linear-gradient(135deg,#e89a4c,#c06a20)}
.attr-row.dodge .attr-icon{background:linear-gradient(135deg,#8a8ab0,#5e5e8a)}
.attr-row.hit .attr-icon{background:linear-gradient(135deg,#9b7bb5,#6e4a85)}
.attr-row.hp .attr-icon{background:linear-gradient(135deg,#c45a5a,#9e3030)}
.attr-row.mp .attr-icon{background:linear-gradient(135deg,#5aa8c0,#2e7a94)}
.attr-name{flex:1;font-size:12px;color:var(--ink-soft)}
.attr-val{font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap}

/* 根骨 1×4 */
.char-roots{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.root-cell{background:rgba(255,253,247,.55);border:1px solid rgba(180,165,140,.3);border-radius:10px;padding:6px 2px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px}
.root-icon{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff}
.root-icon.root-体{background:linear-gradient(135deg,#c45a5a,#9e3030)}
.root-icon.root-力{background:linear-gradient(135deg,#d9534f,#b03030)}
.root-icon.root-敏{background:linear-gradient(135deg,#6a9f6a,#3f7a3f)}
.root-icon.root-耐{background:linear-gradient(135deg,#5a8fc0,#3a6790)}
.root-val{font-size:13px;font-weight:700;color:var(--ink)}
.root-stat{font-size:10px;color:var(--ink-soft)}

/* 底部快捷信息 */
.char-quick-info{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.char-quick-info .chip{font-size:11px;padding:3px 8px}

/* ============================================================
   手机端：角色页新版面板放大 + 紧凑不滚动
   ============================================================ */
@media(max-width:768px){
  .char-res{gap:6px;margin:0}
  .cres{font-size:12px;padding:3px 8px;border-radius:12px;gap:4px}
  .cres b{font-size:11px}
  .char-attr-card{padding:14px 16px;border-radius:14px;background:rgba(255,253,247,.65)}
  .char-attr-head{font-size:14px;margin-bottom:12px}
  .char-attr-table{gap:10px}
  .attr-col{gap:8px}
  .attr-row{padding:10px 12px;border-radius:12px;gap:8px}
  .attr-icon{width:24px;height:24px;font-size:12px}
  .attr-name{font-size:13px}
  .attr-val{font-size:15px;font-weight:700}
  .char-roots{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:20px}
  .root-cell{padding:12px 8px;border-radius:12px;gap:4px;background:rgba(255,253,247,.55)}
  .root-icon{width:26px;height:26px;font-size:13px}
  .root-val{font-size:15px}
  .root-stat{font-size:11px}
  .char-quick-info{gap:6px;margin-top:4px;justify-content:center}
  .char-quick-info .chip{font-size:11px;padding:4px 9px;border-radius:12px}
}


/* ============================================================
   称号 Tab 分页(每页固定数量，整屏不滚动)
   ============================================================ */
.title-pager{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px;padding-top:6px;border-top:1px dashed rgba(180,165,140,.35)}
.pager-btn{background:var(--card);border:1px solid rgba(180,165,140,.45);border-radius:8px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--ink);cursor:pointer;line-height:1}
.pager-btn:hover:not(:disabled){background:var(--gold);color:#fff;border-color:var(--gold)}
.pager-btn:disabled,.pager-btn.disabled{opacity:.35;cursor:not-allowed}
.pager-info{font-size:12px;color:var(--ink-soft);font-weight:700;min-width:40px;text-align:center}
.title-tags .tag{margin:0}

@media(max-width:768px){
  .title-main{padding:12px 14px;margin-bottom:8px}
  .title-other{margin-top:4px}
  .title-tags{gap:6px;margin-top:4px}
  .title-tags .tag{padding:5px 9px;font-size:12px}
  .title-pager{margin-top:6px;padding-top:4px;gap:8px}
  .pager-btn{width:32px;height:32px;font-size:18px;border-radius:10px}
  .pager-info{font-size:13px}
}


/* ============================================================
   通用全屏详情层（主框架不滚动，详情内部可滚动）
   用于信息多的功能：主屏只显示概要，点「查看全部」弹此层看完整
   ============================================================ */
.detail-layer{position:fixed;inset:0;background:rgba(20,16,12,.55);z-index:9999;display:flex;align-items:flex-end;justify-content:center}
.detail-layer.hidden{display:none}
.detail-panel{width:100%;max-width:480px;max-height:88vh;background:var(--bg);display:flex;flex-direction:column;border-radius:16px 16px 0 0;box-shadow:0 -6px 24px rgba(0,0,0,.3);overflow:hidden;animation:detailUp .18s ease-out}
@keyframes detailUp{from{transform:translateY(40px);opacity:.6}to{transform:translateY(0);opacity:1}}
.detail-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(180,165,140,.3);background:var(--card);flex:none}
.detail-title{font-size:16px;font-weight:700;color:var(--cinnabar);display:flex;align-items:center}
.detail-count{font-size:12px;color:var(--ink-soft);font-weight:400;margin-left:8px}
.detail-close{width:32px;height:32px;border-radius:50%;border:1px solid rgba(180,165,140,.4);background:var(--card);font-size:16px;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none}
.detail-close:hover{background:var(--gold);color:#fff;border-color:var(--gold)}
.detail-body{padding:12px 14px;overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1}

/* 「查看全部」按钮：主屏概要下方，点击弹详情层 */
.bag-more-btn,.map-more-btn,.ach-more-btn{display:block;width:100%;margin:8px 0 2px;padding:10px;border:1px dashed rgba(180,165,140,.5);border-radius:10px;background:rgba(255,253,247,.5);color:var(--cinnabar);font-size:13px;font-weight:600;cursor:pointer}
.bag-more-btn:hover,.map-more-btn:hover,.ach-more-btn:hover{background:rgba(201,162,39,.12);border-color:var(--gold)}

@media(max-width:768px){
  .detail-panel{max-height:90vh;border-radius:20px 20px 0 0}
  .detail-head{padding:16px 18px}
  .detail-title{font-size:17px}
  .detail-close{width:36px;height:36px;font-size:18px}
  .detail-body{padding:14px 16px}
  .bag-more-btn,.map-more-btn,.ach-more-btn{padding:12px;font-size:14px}
}

/* ============================================================
   角色详情页：水墨仙侠风格（参考修仙手游）
   ============================================================ */
.char-detail-view{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;gap:0;padding:0;position:relative;background:linear-gradient(180deg,#f0f6f5 0%,#faf6ec 45%,#f2ece0 100%)}
body.view-character .auto-fab{display:none}
body.view-bag .auto-fab{display:none}

/* 角色立绘区 */
.char-detail-hero{position:relative;flex:1;min-height:0;max-height:200px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cdh-ink-bg{position:absolute;inset:0;z-index:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 260' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='sky' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23f0f6f5'/%3E%3Cstop offset='50%25' stop-color='%23faf6ec'/%3E%3Cstop offset='100%25' stop-color='%23e8e6dc'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='390' height='260' fill='url(%23sky)'/%3E%3Cpath d='M-40,200 Q50,145 140,188 T320,165 T430,200 L430,260 L-40,260 Z' fill='%238fa8a8' opacity='.2'/%3E%3Cpath d='M25,175 L60,140 L95,175 L95,220 L25,220 Z' fill='%23b8c8c8' opacity='.28'/%3E%3Cpath d='M15,138 L60,108 L105,138 Z' fill='%23a8b8b8' opacity='.32'/%3E%3Crect x='38' y='182' width='8' height='16' fill='%2398a8a8' opacity='.4'/%3E%3Crect x='74' y='182' width='8' height='16' fill='%2398a8a8' opacity='.4'/%3E%3Cpath d='M295,175 L330,140 L365,175 L365,220 L295,220 Z' fill='%23b8c8c8' opacity='.28'/%3E%3Cpath d='M285,138 L330,108 L375,138 Z' fill='%23a8b8b8' opacity='.32'/%3E%3Crect x='308' y='182' width='8' height='16' fill='%2398a8a8' opacity='.4'/%3E%3Crect x='344' y='182' width='8' height='16' fill='%2398a8a8' opacity='.4'/%3E%3Cellipse cx='75' cy='75' rx='38' ry='16' fill='%23fff' opacity='.5'/%3E%3Cellipse cx='115' cy='85' rx='25' ry='12' fill='%23fff' opacity='.4'/%3E%3Cellipse cx='315' cy='68' rx='32' ry='14' fill='%23fff' opacity='.45'/%3E%3Cpath d='M-40,260 L-40,228 Q120,200 260,232 T430,218 L430,260 Z' fill='%23c0d0d0' opacity='.18'/%3E%3C/svg%3E") no-repeat center/cover;opacity:.85}
.cdh-aura{position:absolute;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(212,168,67,.18) 0%,transparent 70%);z-index:1;animation:auraPulse 3s ease-in-out infinite}
@keyframes auraPulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.08);opacity:.9}}
.cdh-avatar{position:relative;z-index:2;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#fff7e8,#e7dcc6);border:3px solid var(--gold);box-shadow:0 6px 22px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;font-size:58px;line-height:1;transition:.3s}
.cdh-avatar:hover{transform:scale(1.03)}
.cdh-ink-name{display:none}
.cdh-crane{position:absolute;top:50%;right:18px;transform:translateY(-50%);z-index:2;font-size:26px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.12));opacity:.85;animation:craneBob 3.5s ease-in-out infinite}
@keyframes craneBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* 名字区 */
.char-detail-name{flex:none;text-align:center;padding:8px 16px 6px}
.cdn-name{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:2px;font-family:'Ma Shan Zheng',serif}
.cdn-sub{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:4px;font-size:12px;color:var(--ink-soft);flex-wrap:wrap}
.cdn-realm{font-weight:700}
.cdn-lv{background:var(--cinnabar);color:#fff;padding:1px 8px;border-radius:10px;font-size:11px}

/* 进度条卡片 */
.char-detail-card{flex:none;display:flex;flex-direction:column;align-items:stretch;gap:5px;margin:0 16px;padding:12px 14px;background:rgba(255,255,255,.85);border:1px solid rgba(180,165,140,.25);border-radius:14px;box-shadow:0 2px 8px rgba(0,0,0,.06);backdrop-filter:blur(6px)}
.cdc-res{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:2px;padding:0 2px}
.cdc-res .cdh-res-item{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;background:rgba(255,255,255,.55);border-radius:8px;padding:5px 0;font-size:11px;color:#5a5046}
.cdc-res .cdh-res-item b{font-size:14px}
.cdc-res .cdh-res-val{font-weight:700;font-size:11px;letter-spacing:.3px}
.cdc-res .cdh-res-item.gold b{color:#b8860b}
.cdc-res .cdh-res-item.prestige b{color:#7b6bb5}
.cdc-res .cdh-res-item.honor b{color:#c45a5a}
.cdc-bar{height:10px;background:rgba(0,0,0,.1);border-radius:5px;overflow:hidden}
.cdc-fill{height:100%;background:linear-gradient(90deg,var(--cinnabar),#e08080);border-radius:5px;transition:width .4s ease}
.cdc-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-soft)}
.cdc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.cdc-stats span{display:flex;flex-direction:column;align-items:center;font-size:10px;color:var(--ink-soft);background:rgba(255,255,255,.5);border-radius:6px;padding:4px 0}
.cdc-stats b{font-size:13px;color:var(--ink);font-weight:700}
.cdc-stats em{font-style:normal}
.cdc-stats .cdc-attr{font-size:10px;color:var(--cinnabar);font-weight:700}

/* 功能按钮 */
.char-detail-actions{flex:none;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px 16px 6px}
.cda-btn{position:relative;display:flex;align-items:center;justify-content:center;min-height:46px;padding:9px 2px;border:1px solid rgba(180,165,140,.35);border-radius:12px;background:rgba(255,253,247,.7);box-shadow:0 2px 6px rgba(0,0,0,.05);cursor:pointer;transition:.15s;-webkit-tap-highlight-color:transparent}
.cda-btn:hover{transform:translateY(-2px);background:rgba(255,253,247,.8);border-color:var(--gold)}
.cda-orb{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.cda-orb.cda-po{background:linear-gradient(135deg,#8a6bc9,#5e3fa3)}
.cda-orb.cda-zhuang{background:linear-gradient(135deg,#e0a04f,#c07025)}
.cda-orb.cda-gong{background:linear-gradient(135deg,#c45a5a,#9e3030)}
.cda-orb.cda-wei{background:linear-gradient(135deg,#4a9c8a,#2e6d5e)}
.cda-dot{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;border-radius:50%;background:var(--cinnabar);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 5px rgba(0,0,0,.2);border:2px solid #fff}

/* 底部 */
.char-detail-footer{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 16px 18px;position:relative;min-height:84px}
.cdh-start{width:100%;padding:12px 20px;border-radius:26px;border:none;background:linear-gradient(180deg,#a65b52,#8a4a42);color:#fff8f3;font-size:16px;font-weight:700;letter-spacing:4px;cursor:pointer;box-shadow:0 3px 10px rgba(100,55,45,.22);transition:.15s;-webkit-tap-highlight-color:transparent;position:relative}
.cdh-start:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(100,55,45,.3)}
.cdh-start::after{content:'';position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);width:200px;height:24px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 34' preserveAspectRatio='xMidYMax slice'%3E%3Cpath d='M0,34 Q30,5 65,22 T130,15 T195,24 T260,12 T325,22 T390,10 L390,34 Z' fill='rgba(138,74,66,.35)'/%3E%3C/svg%3E") no-repeat center bottom;background-size:contain;opacity:.85;pointer-events:none}
.cdh-footer-deco{display:none}

@media(max-width:768px){
  .char-detail-hero{min-height:160px;max-height:200px}
  .cdh-avatar{width:130px;height:130px;font-size:64px}
  .cdh-aura{width:190px;height:190px}
  .cdn-name{font-size:24px}
  .cdn-sub{font-size:13px}
  .char-detail-card{margin:0 14px;padding:12px}
  .char-detail-actions{padding:10px 14px 6px;gap:8px}
  .cdh-start{padding:14px 20px;font-size:17px}
}

/* ============================================================
   江湖地图页：水墨山水 + 弯曲路径 + 圆形区域图钉
   ============================================================ */
.content.view-map{padding:0;background:transparent;display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}
.map-ink-view{flex:1;min-height:0;display:flex;flex-direction:column;background:linear-gradient(180deg,#e8f2f2 0%,#f5f0e4 35%,#e0d8c8 100%);position:relative;overflow:hidden}
.miv-canvas{flex:1;min-height:0;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}
.miv-bg{position:absolute;inset:0;z-index:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 800' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='sky' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23e8f2f2'/%3E%3Cstop offset='35%25' stop-color='%23f5f0e4'/%3E%3Cstop offset='70%25' stop-color='%23d8e0d8'/%3E%3Cstop offset='100%25' stop-color='%23c8d0c8'/%3E%3C/linearGradient%3E%3ClinearGradient id='water' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='rgba(120,160,160,0.45)'/%3E%3Cstop offset='100%25' stop-color='rgba(170,200,195,0.25)'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='390' height='800' fill='url(%23sky)'/%3E%3C!-- 仙云 --%3E%3Cellipse cx='80' cy='80' rx='48' ry='16' fill='%23fff' opacity='.55'/%3E%3Cellipse cx='130' cy='100' rx='32' ry='12' fill='%23fff' opacity='.45'/%3E%3Cellipse cx='310' cy='130' rx='45' ry='15' fill='%23fff' opacity='.5'/%3E%3Cellipse cx='60' cy='280' rx='35' ry='12' fill='%23fff' opacity='.4'/%3E%3Cellipse cx='330' cy='320' rx='38' ry='13' fill='%23fff' opacity='.4'/%3E%3Cellipse cx='50' cy='520' rx='40' ry='14' fill='%23fff' opacity='.4'/%3E%3Cellipse cx='340' cy='600' rx='35' ry='12' fill='%23fff' opacity='.4'/%3E%3C!-- 远山三层 --%3E%3Cpath d='M-40,200 Q50,130 150,180 T320,150 T430,200 L430,800 L-40,800 Z' fill='%238fa8a8' opacity='.25'/%3E%3Cpath d='M-40,300 Q60,230 160,280 T330,250 T430,300 L430,800 L-40,800 Z' fill='%237a9a98' opacity='.32'/%3E%3Cpath d='M-40,420 Q70,360 170,400 T340,370 T430,420 L430,800 L-40,800 Z' fill='%235a8078' opacity='.38'/%3E%3C!-- 中段湖面 --%3E%3Cpath d='M-40,500 Q120,470 260,510 T430,490 L430,560 Q260,580 120,560 T-40,580 Z' fill='url(%23water)' opacity='.7'/%3E%3C!-- 近山/岛 --%3E%3Cpath d='M-40,620 Q60,580 180,610 T350,600 T430,640 L430,800 L-40,800 Z' fill='%234a6b65' opacity='.4'/%3E%3Cpath d='M-40,720 Q80,680 200,720 T430,700 L430,800 L-40,800 Z' fill='%233d5c5c' opacity='.35'/%3E%3C!-- 装饰树 --%3E%3Ccircle cx='50' cy='400' r='3' fill='%235a7e58' opacity='.55'/%3E%3Ccircle cx='340' cy='420' r='3' fill='%235a7e58' opacity='.55'/%3E%3Ccircle cx='40' cy='680' r='3' fill='%235a7e58' opacity='.5'/%3E%3Ccircle cx='350' cy='700' r='3' fill='%235a7e58' opacity='.5'/%3E%3C/svg%3E") no-repeat center/cover;min-height:600px}
.miv-path{position:absolute;inset:0;width:100%;height:100%;min-height:600px;z-index:1;pointer-events:none;opacity:.6}
.miv-crane{position:absolute;top:6%;right:14%;font-size:34px;z-index:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.1));opacity:.8;animation:craneFly 6s ease-in-out infinite}
@keyframes craneFly{0%,100%{transform:translate(0,0) rotate(-5deg)}50%{transform:translate(-10px,-6px) rotate(5deg)}}
.miv-traveller{position:absolute;font-size:16px;z-index:1;opacity:.7;filter:drop-shadow(0 1px 2px rgba(0,0,0,.15))}
.miv-traveller{left:18%;bottom:18%;animation:travWalk 4s ease-in-out infinite}
.miv-traveller-2{left:78%;bottom:8%;animation:travWalk 5s ease-in-out infinite reverse}
@keyframes travWalk{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.map-pin{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;z-index:2;transition:transform .15s;-webkit-tap-highlight-color:transparent;min-width:60px}
.map-pin:hover{transform:translate(-50%,-50%) scale(1.08)}
.map-pin:active{transform:translate(-50%,-50%) scale(0.96)}
.mp-orb{width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff7e8,#d8c8a8);border:2px solid var(--gold);box-shadow:0 3px 10px rgba(0,0,0,.22);display:flex;align-items:center;justify-content:center;position:relative;transition:.2s}
.mp-ico{font-size:22px;line-height:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.15))}
.map-pin.pin-safe .mp-orb{background:radial-gradient(circle at 35% 30%,#f0fff0,#a8c8a8);border-color:#4a8a4a}
.map-pin.pin-boss .mp-orb{background:radial-gradient(circle at 35% 30%,#fff0e8,#c89088);border-color:var(--cinnabar)}
.map-pin.pin-farmable .mp-orb{box-shadow:0 0 0 2px #4a8a4a,0 3px 10px rgba(0,0,0,.22)}
.map-pin.pin-toohard{opacity:.55}
.map-pin.pin-toohard .mp-orb{filter:grayscale(.4)}
.map-pin.pin-best .mp-orb{box-shadow:0 0 0 3px var(--gold),0 4px 14px rgba(201,162,39,.5);animation:pinPulse 2s ease-in-out infinite}
@keyframes pinPulse{0%,100%{box-shadow:0 0 0 3px var(--gold),0 4px 14px rgba(201,162,39,.5)}50%{box-shadow:0 0 0 5px var(--gold),0 4px 18px rgba(201,162,39,.7)}}
.mp-name{font-size:12px;font-weight:700;color:var(--ink);text-shadow:0 1px 2px rgba(255,255,255,.85);white-space:nowrap;background:rgba(255,253,247,.78);padding:2px 6px;border-radius:8px;border:1px solid rgba(180,165,140,.4);max-width:140px;overflow:hidden;text-overflow:ellipsis;display:inline-block}
.mp-lv{font-size:9px;color:var(--ink-soft);background:rgba(255,255,255,.7);padding:1px 5px;border-radius:6px;white-space:nowrap;border:1px solid rgba(180,165,140,.3);display:inline-block;max-width:140px;overflow:hidden;text-overflow:ellipsis}
.mp-info{position:absolute;top:100%;margin-top:5px;display:flex;flex-direction:column;align-items:flex-end;gap:3px;pointer-events:none;white-space:nowrap}
.mp-info[style*="text-align:center"]{align-items:center}
.mp-info[style*="text-align:left"]{align-items:flex-start}
.mp-info[style*="text-align:right"]{align-items:flex-end}
.miv-legend{flex:none;display:flex;justify-content:center;align-items:center;gap:14px;padding:6px 12px;background:rgba(255,253,247,.85);border-top:1px solid rgba(180,165,140,.3);font-size:11px;color:var(--ink-soft);position:relative;z-index:3;flex-wrap:wrap}
.miv-leg{display:flex;align-items:center;gap:4px}
.miv-leg b{width:12px;height:12px;border-radius:50%;display:inline-block;border:1.5px solid;flex:none}
.leg-wild{background:radial-gradient(circle at 35% 30%,#fff7e8,#d8c8a8);border-color:var(--gold)}
.leg-boss{background:radial-gradient(circle at 35% 30%,#fff0e8,#c89088);border-color:var(--cinnabar)}
.leg-safe{background:radial-gradient(circle at 35% 30%,#f0fff0,#a8c8a8);border-color:#4a8a4a}
.leg-best{background:radial-gradient(circle at 35% 30%,#fff7e8,#c9a227);border-color:var(--gold)}
body.view-map .auto-fab{bottom:120px}
body.lang-en .mp-name{max-width:130px;font-size:11px}
body.lang-en .mp-lv{max-width:120px}

/* ============================================================
   区域详情页：水墨仙侠
   ============================================================ */
.content.view-region{padding:0 0 66px!important;background:transparent;display:flex;flex-direction:column;overflow:hidden}
.region-ink-view{flex:1;min-height:0;display:flex;flex-direction:column;position:relative;overflow:hidden;background:linear-gradient(180deg,#e8f2f2 0%,#f5f0e4 35%,#e0d8c8 100%)}
.riv-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 844' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='rsky' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23e8f2f2'/%3E%3Cstop offset='50%25' stop-color='%23f5f0e4'/%3E%3Cstop offset='100%25' stop-color='%23e0d8c8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='390' height='844' fill='url(%23rsky)'/%3E%3Cpath d='M-20,200 Q60,140 140,190 T280,160 T420,210 L420,844 L-20,844 Z' fill='%237a9a8a' opacity='.18'/%3E%3Cpath d='M-20,340 Q80,260 180,310 T320,280 T420,340 L420,844 L-20,844 Z' fill='%236a8a7a' opacity='.24'/%3E%3Cpath d='M-20,520 Q90,440 190,490 T330,460 T420,520 L420,844 L-20,844 Z' fill='%235a7a6a' opacity='.3'/%3E%3C/svg%3E") no-repeat center/cover;opacity:.6}
.riv-crane{position:absolute;top:6%;right:10%;font-size:34px;z-index:1;opacity:.8;animation:craneFly 8s ease-in-out infinite;pointer-events:none}
.riv-line{flex:none;width:30px;height:1px;background:linear-gradient(90deg,transparent,rgba(139,95,33,.5),transparent)}
.riv-main{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;padding:12px 12px 0;position:relative;z-index:2;overflow:hidden}
.riv-hero{flex:none;position:relative;display:flex;align-items:center;gap:14px;padding:16px;border-radius:20px;background:rgba(255,255,255,.55);border:1px solid rgba(180,165,140,.35);box-shadow:0 4px 14px rgba(0,0,0,.08);backdrop-filter:blur(3px)}
.riv-aura{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(184,147,39,.25) 0%,transparent 70%);filter:blur(8px);z-index:0}
.riv-icon{position:relative;width:64px;height:64px;border-radius:50%;background:linear-gradient(180deg,#faf8f2,#ede8d8);border:1px solid rgba(180,165,140,.5);display:flex;align-items:center;justify-content:center;font-size:32px;box-shadow:0 3px 10px rgba(0,0,0,.1);z-index:1}
.riv-info{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;z-index:1}
.riv-name{font-size:18px;font-weight:800;color:var(--ink);letter-spacing:1px}
.riv-type{font-size:13px;color:var(--cinnabar);font-weight:700}
.riv-desc{font-size:12px;color:var(--ink-soft);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.riv-actions{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.riv-action{padding:10px 4px;border-radius:18px;border:1px solid rgba(180,165,140,.6);background:linear-gradient(180deg,#faf8f2,#ede8d8);color:var(--ink);font-size:13px;font-weight:700;letter-spacing:1px;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.08);transition:.15s;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;justify-content:center;gap:4px}
.riv-action:active{transform:scale(.98)}
.riv-action.primary{background:linear-gradient(180deg,#c0392b,#a32d2d);color:#fff;border-color:var(--cinnabar);box-shadow:0 3px 10px rgba(168,50,50,.3)}
.riv-action.active{background:linear-gradient(180deg,#5a8a66,#4a7a56);color:#fff;border-color:#4a7a56;box-shadow:0 3px 10px rgba(90,138,102,.3)}
.riv-action.tag{opacity:.75;background:rgba(255,255,255,.45);color:var(--ink-soft);cursor:default}
.riv-monsters{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:8px;padding-bottom:12px}
.riv-section-title{flex:none;text-align:center;font-size:14px;font-weight:800;color:var(--ink);letter-spacing:2px;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:2px}
.riv-monster-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.riv-monster-card{padding:10px;border-radius:16px;background:rgba(255,255,255,.55);border:1px solid rgba(180,165,140,.35);box-shadow:0 3px 10px rgba(0,0,0,.06);display:flex;flex-direction:column;gap:5px;transition:.15s}
.riv-monster-card:active{transform:scale(.98)}
.riv-monster-card.elite{border-color:rgba(184,147,39,.55);background:rgba(255,252,240,.65)}
.riv-monster-card.boss{border-color:var(--cinnabar);background:rgba(255,240,240,.65)}
.rmc-top{display:flex;align-items:center;gap:8px;min-height:0}
.rmc-icon{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.7);border:1px solid rgba(180,165,140,.4);display:flex;align-items:center;justify-content:center;font-size:16px;flex:none}
.rmc-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.rmc-name{font-size:13px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rmc-lv{font-size:11px;color:var(--ink-soft)}
.rmc-btn{padding:5px 10px;border-radius:14px;border:none;background:var(--cinnabar);color:#fff;font-size:12px;font-weight:700;cursor:pointer;flex:none}
.rmc-btn.gold{background:var(--gold)}
.rmc-row{display:flex;gap:6px;flex-wrap:wrap;font-size:11px;color:var(--ink)}
.rmc-row.muted{color:var(--ink-soft)}
.riv-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--ink-soft);font-size:14px;padding:30px 20px;text-align:center}
.riv-boss-card{padding:16px;border-radius:20px;background:rgba(255,255,255,.6);border:1px solid rgba(168,50,50,.3);box-shadow:0 4px 14px rgba(0,0,0,.08);display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.riv-boss-icon{width:72px;height:72px;border-radius:50%;background:linear-gradient(180deg,#fff0f0,#f5e0e0);border:1px solid rgba(168,50,50,.3);display:flex;align-items:center;justify-content:center;font-size:40px}
.riv-boss-name{font-size:18px;font-weight:800;color:var(--ink)}
.riv-boss-name span{font-size:13px;color:var(--cinnabar);font-weight:700;margin-left:6px}
.riv-boss-stats{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;font-size:13px;color:var(--ink)}
.riv-boss-reward{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;font-size:12px;color:var(--ink-soft)}
.riv-boss-drops{font-size:12px;color:var(--gold);font-weight:700}
.riv-boss-note{font-size:12px;color:var(--ink-soft)}
.riv-boss-action{margin-top:4px;width:100%}
.riv-boss-btn{width:100%;padding:12px;border-radius:20px;border:1px solid rgba(180,165,140,.6);background:linear-gradient(180deg,#faf8f2,#ede8d8);color:var(--ink);font-size:14px;font-weight:700;cursor:pointer}
.riv-boss-btn.cinnabar{background:linear-gradient(180deg,#c0392b,#a32d2d);color:#fff;border-color:var(--cinnabar);box-shadow:0 3px 10px rgba(168,50,50,.3)}
body.lang-en .riv-desc{-webkit-line-clamp:1}
body.lang-en .riv-action{font-size:12px;letter-spacing:0}
body.lang-en .rmc-name{font-size:12px}
body.lang-en .rmc-lv{font-size:10px}

/* ============================================================
   矿洞探险页：水墨山水 + 山体矿洞入口 + 洞穴采集场景
   ============================================================ */
.content.view-mine{padding:0 0 80px!important;background:transparent;display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}
.mine-ink-view{flex:1;min-height:0;display:flex;flex-direction:column;position:relative;overflow:hidden;background:#f0f4ec}
.mine-mountain-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 844' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='msky' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23e8f2e8'/%3E%3Cstop offset='50%25' stop-color='%23f5f0e4'/%3E%3Cstop offset='100%25' stop-color='%23d8e0d0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='390' height='844' fill='url(%23msky)'/%3E%3Cellipse cx='80' cy='80' rx='48' ry='16' fill='%23fff' opacity='.55'/%3E%3Cellipse cx='130' cy='100' rx='32' ry='12' fill='%23fff' opacity='.45'/%3E%3Cellipse cx='310' cy='130' rx='45' ry='15' fill='%23fff' opacity='.5'/%3E%3Cellipse cx='60' cy='300' rx='35' ry='12' fill='%23fff' opacity='.4'/%3E%3Cellipse cx='340' cy='340' rx='38' ry='13' fill='%23fff' opacity='.4'/%3E%3Cellipse cx='50' cy='560' rx='40' ry='14' fill='%23fff' opacity='.4'/%3E%3Cpath d='M-40,220 Q50,150 150,200 T320,170 T430,220 L430,844 L-40,844 Z' fill='%236a9a7a' opacity='.22'/%3E%3Cpath d='M-40,340 Q60,260 160,310 T330,280 T430,340 L430,844 L-40,844 Z' fill='%235a8a6a' opacity='.28'/%3E%3Cpath d='M-40,480 Q70,400 170,450 T340,420 T430,480 L430,844 L-40,844 Z' fill='%234a7a5a' opacity='.32'/%3E%3Cpath d='M-40,844 L-40,760 Q120,720 260,760 T430,740 L430,844 Z' fill='%235a7a5a' opacity='.25'/%3E%3C/svg%3E") no-repeat center/cover}
.mine-mountain-bg::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 844' preserveAspectRatio='xMidYMid slice'%3E%3Cpath d='M-20,180 Q60,120 140,170 T300,150 T410,190 L410,844 L-20,844 Z' fill='%234a7a5a' opacity='.12'/%3E%3Cpath d='M-20,300 Q80,240 170,290 T330,270 T410,310 L410,844 L-20,844 Z' fill='%233a6a4a' opacity='.14'/%3E%3Cpath d='M-20,420 Q100,360 190,410 T350,390 T410,430 L410,844 L-20,844 Z' fill='%232a5a3a' opacity='.16'/%3E%3C/svg%3E") no-repeat center/cover;pointer-events:none;z-index:0}
.mine-mountain-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.4) 0,rgba(255,255,255,.1) 40%,rgba(230,240,230,.35) 100%);pointer-events:none;z-index:1}
.mine-crane{position:absolute;top:8%;right:12%;font-size:38px;z-index:1;opacity:.85;filter:drop-shadow(0 2px 3px rgba(0,0,0,.1));animation:craneFly 7s ease-in-out infinite}
.mine-cloud{position:absolute;background:rgba(255,255,255,.55);border-radius:50%;filter:blur(8px);z-index:1;pointer-events:none}
.mine-cloud-1{width:120px;height:34px;left:-10%;top:28%;animation:cloudDrift 10s ease-in-out infinite}
.mine-cloud-2{width:90px;height:28px;right:-5%;top:55%;animation:cloudDrift 12s ease-in-out infinite reverse}
@keyframes cloudDrift{0%,100%{transform:translateX(0)}50%{transform:translateX(20px)}}
@keyframes mineGlow{0%,100%{opacity:.65;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.15)}}
@keyframes oreShine{0%,100%{filter:drop-shadow(0 1px 2px rgba(0,0,0,.2)) brightness(1)}50%{filter:drop-shadow(0 0 6px rgba(120,210,240,.8)) brightness(1.25)}}
@keyframes oreFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-8px) rotate(8deg)}}
.mine-header{flex:none;padding:14px 16px 8px;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;z-index:2;background:rgba(255,255,255,.35);border-bottom:1px solid rgba(180,165,140,.25);backdrop-filter:blur(4px)}
.mine-title{font-size:22px;font-weight:800;letter-spacing:4px;color:var(--ink);font-family:'Ma Shan Zheng',cursive;display:flex;align-items:center;gap:10px;text-shadow:0 2px 4px rgba(255,255,255,.8)}
.mine-line{flex:none;width:30px;height:1px;background:linear-gradient(90deg,transparent,rgba(139,95,33,.5),transparent)}
.mine-sub{font-size:11px;color:var(--ink-soft);text-align:center;background:rgba(255,255,255,.5);padding:2px 10px;border-radius:10px}
.mine-canvas{flex:1;min-height:0;position:relative;z-index:2;overflow:hidden}
.mine-canvas::before{content:'✦';position:absolute;left:8%;top:12%;font-size:14px;color:rgba(120,210,240,.6);animation:oreFloat 6s ease-in-out infinite}
.mine-canvas::after{content:'✦';position:absolute;right:12%;top:22%;font-size:12px;color:rgba(140,200,120,.55);animation:oreFloat 7s ease-in-out infinite 1.2s}
.mine-cave{position:absolute;transform:translate(-50%,-50%);width:86px;height:86px;display:flex;align-items:center;justify-content:center;z-index:3;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s}
.mine-cave:hover{transform:translate(-50%,-50%) scale(1.06)}
.mine-cave:active{transform:translate(-50%,-50%) scale(.96)}
.mine-cave-inner{position:relative;width:70px;height:56px}
.mine-hill{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:70px;height:52px;background:linear-gradient(180deg,#7aaa7a 0%,#5a9a6a 25%,#4a7a4a 70%,#3a6a3a 100%);border-radius:35px 35px 6px 6px;box-shadow:0 5px 12px rgba(0,0,0,.2),inset 0 -6px 10px rgba(0,0,0,.15)}
.mine-hill::before{content:'';position:absolute;top:0;left:0;right:0;height:55%;background:linear-gradient(180deg,rgba(255,255,255,.18),transparent);border-radius:35px 35px 0 0;pointer-events:none}
.mine-hill::after{content:'';position:absolute;top:8px;left:10px;width:20px;height:14px;background:linear-gradient(180deg,#8aba8a,#6a9a6a);border-radius:10px 10px 0 0;opacity:.75;box-shadow:inset 0 1px 2px rgba(255,255,255,.25)}
.mine-mouth{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:26px;height:22px;background:radial-gradient(circle at 50% 30%,#4a5a4a,#0a1a0a 75%);border-radius:13px 13px 7px 7px;box-shadow:inset 0 3px 8px rgba(0,0,0,.7),0 1px 2px rgba(255,255,255,.1)}
.mine-glow{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:26px;height:16px;background:radial-gradient(ellipse at center,rgba(120,210,240,.55) 0%,rgba(120,210,240,.15) 50%,rgba(120,210,240,0) 72%);border-radius:50%;z-index:2;opacity:.8;animation:mineGlow 2.2s ease-in-out infinite;pointer-events:none}
.mine-ore{position:absolute;top:-6px;left:50%;transform:translateX(-50%);font-size:14px;z-index:4;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));animation:oreShine 2.5s ease-in-out infinite}
.mine-cave.locked .mine-ore{filter:grayscale(1);opacity:.7}
.mine-stone{position:absolute;right:-12px;top:50%;transform:translateY(-50%);width:20px;height:54px;background:linear-gradient(180deg,#f2eee2,#d8d4c8);border:1px solid #b8b4a8;border-radius:2px;display:flex;align-items:center;justify-content:center;box-shadow:1px 1px 4px rgba(0,0,0,.18),inset 0 1px 1px rgba(255,255,255,.5);padding:2px 0}
.mine-stone-text{font-size:10px;font-weight:700;color:#3a3628;writing-mode:vertical-rl;text-orientation:upright;letter-spacing:1px;line-height:1}
.mine-stone-lock{font-size:8px;color:var(--cinnabar);margin-top:2px;writing-mode:vertical-rl;text-orientation:upright}
.mine-best{position:absolute;top:-4px;left:50%;transform:translateX(-50%);font-size:9px;font-weight:700;color:#5a4010;background:#fcf3d9;border:1px solid var(--gold);padding:1px 6px;border-radius:8px;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.mine-cave.locked{opacity:.45;filter:grayscale(.6);cursor:not-allowed}
.mine-cave.best .mine-hill{box-shadow:0 0 0 2px var(--gold),0 4px 14px rgba(201,162,39,.4),inset 0 -6px 10px rgba(0,0,0,.12)}
.mine-cave.best .mine-glow{background:radial-gradient(ellipse at center,rgba(240,200,80,.5) 0%,rgba(240,200,80,.12) 50%,rgba(240,200,80,0) 72%)}
.mine-cave.best .mine-ore{animation:oreShine 1.4s ease-in-out infinite}
.mine-deco-track{flex:none;text-align:center;font-size:12px;letter-spacing:4px;color:rgba(90,80,60,.45);padding:2px 0 6px;position:relative;z-index:2;text-shadow:0 1px 1px rgba(255,255,255,.5)}
.mine-footer{flex:none;display:flex;justify-content:center;gap:12px;padding:0 20px 12px;position:relative;z-index:2}
.mine-btn{flex:1;max-width:150px;padding:12px 8px;border-radius:24px;border:1px solid rgba(180,165,140,.6);background:linear-gradient(180deg,#faf8f2,#ede8d8);color:var(--ink);font-size:13px;font-weight:700;letter-spacing:1px;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.1);transition:.15s;-webkit-tap-highlight-color:transparent}
.mine-btn:hover{background:linear-gradient(180deg,#fff,#f5f0e4);transform:translateY(-1px)}
.mine-btn:disabled{opacity:.45;cursor:not-allowed}
.mine-btn.primary{background:linear-gradient(180deg,var(--cinnabar),#a32d2d);color:#fff;border-color:var(--cinnabar);box-shadow:0 4px 12px rgba(168,50,50,.3)}
.mine-btn.primary:hover{background:linear-gradient(180deg,#d04a4a,#b83a3a);box-shadow:0 5px 14px rgba(168,50,50,.4)}

/* 矿洞采集场景 · 特效水墨版 */
.mining-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#e8e2d4,#d8d2c4);backdrop-filter:blur(8px)}
.mining-scene{position:relative;width:100%;height:100%;max-width:520px;max-height:100vh;overflow:hidden;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;padding:0 0 20px}
.mining-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 844' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='msky' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23d8d2c4'/%3E%3Cstop offset='55%25' stop-color='%23e5dfd0'/%3E%3Cstop offset='100%25' stop-color='%23c8c2b4'/%3E%3C/linearGradient%3E%3ClinearGradient id='mglow' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='rgba(160,220,240,0)'/%3E%3Cstop offset='100%25' stop-color='rgba(160,220,240,.28)'/%3E%3C/linearGradient%3E%3Cfilter id='mblur'%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='390' height='844' fill='url(%23msky)'/%3E%3Cpath d='M0,120 Q70,80 140,115 T280,100 T390,130 L390,0 L0,0 Z' fill='%23b8b2a4' opacity='.55'/%3E%3Cpath d='M0,260 Q90,200 180,255 T340,230 T390,270 L390,844 L0,844 Z' fill='%23a8a294' opacity='.42'/%3E%3Cpath d='M0,420 Q110,360 220,410 T390,400 L390,844 L0,844 Z' fill='%2398968a' opacity='.32'/%3E%3Cpath d='M-30,620 L50,570 L120,640 L-30,740 Z' fill='%238a8478' opacity='.35'/%3E%3Cpath d='M420,620 L340,570 L270,640 L420,740 Z' fill='%238a8478' opacity='.35'/%3E%3Cpath d='M60,500 L120,460 L180,500 L120,540 Z' fill='%2388c8d8' opacity='.55'/%3E%3Cpath d='M220,440 L260,410 L300,440 L260,470 Z' fill='%2388c8d8' opacity='.48'/%3E%3Cpath d='M140,600 L170,570 L200,600 L170,630 Z' fill='%2388c8d8' opacity='.52'/%3E%3Cpath d='M260,540 L285,515 L310,540 L285,565 Z' fill='%2398d8e8' opacity='.45'/%3E%3Cpath d='M20,720 Q40,640 80,680 T140,660 T200,700 L0,730 Z' fill='url(%23mglow)' filter='url(%23mblur)'/%3E%3Ccircle cx='50' cy='220' r='2' fill='%23a0e0f0' opacity='.7'/%3E%3Ccircle cx='340' cy='300' r='2.5' fill='%23a0e0f0' opacity='.6'/%3E%3Ccircle cx='80' cy='420' r='1.8' fill='%23a0e0f0' opacity='.65'/%3E%3Ccircle cx='310' cy='490' r='2' fill='%23a0e0f0' opacity='.55'/%3E%3Ccircle cx='120' cy='280' r='1.5' fill='%23b0e8f0' opacity='.6'/%3E%3Ccircle cx='280' cy='200' r='2' fill='%23b0e8f0' opacity='.55'/%3E%3C/svg%3E") center/cover no-repeat}
.mining-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle at 50% 45%,transparent 0%,transparent 35%,rgba(60,55,45,.18) 100%)}
.mining-cave-walls{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.mining-wall{position:absolute;top:0;bottom:0;width:56px;background:linear-gradient(180deg,#9a9488 0%,#7a7468 60%,#5a5448 100%);opacity:.35}
.mining-wall.left{left:0;border-radius:0 60% 0 0;transform:translateX(-18px)}
.mining-wall.right{right:0;border-radius:60% 0 0 0;transform:translateX(18px)}
.mining-wall::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0,transparent 14px,rgba(0,0,0,.08) 14px,rgba(0,0,0,.08) 16px);border-radius:inherit}
.mining-vein{position:absolute;width:18px;height:90px;background:linear-gradient(180deg,#88c8d8,#5a9a8a);border-radius:9px;opacity:.45;filter:blur(1px);box-shadow:0 0 10px rgba(120,210,240,.5)}
.mining-vein.vein-1{left:8%;top:28%;transform:rotate(-12deg);animation:veinShine 3.5s ease-in-out infinite}
.mining-vein.vein-2{right:10%;top:38%;transform:rotate(8deg);animation:veinShine 4s ease-in-out infinite 1s}
.mining-vein.vein-3{left:12%;top:55%;height:70px;transform:rotate(-6deg);animation:veinShine 3.8s ease-in-out infinite .5s}
.mining-light-rays{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.28) 12%,transparent 30%);opacity:.8;animation:rayShift 5s ease-in-out infinite}
.mining-light-rays::before{content:'';position:absolute;left:12%;top:0;width:70px;height:68%;background:linear-gradient(180deg,rgba(255,255,255,.22),transparent);filter:blur(14px);transform:rotate(12deg);transform-origin:top center;animation:raySwing 7s ease-in-out infinite}
.mining-light-rays::after{content:'';position:absolute;right:15%;top:0;width:90px;height:72%;background:linear-gradient(180deg,rgba(255,255,255,.18),transparent);filter:blur(16px);transform:rotate(-8deg);transform-origin:top center;animation:raySwing 6s ease-in-out infinite reverse}
.mining-particles{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.mining-particles::before{content:'✦';position:absolute;left:12%;top:24%;font-size:12px;color:rgba(120,210,240,.8);animation:particleFloat 6s ease-in-out infinite}
.mining-particles::after{content:'✦';position:absolute;right:16%;top:34%;font-size:14px;color:rgba(140,220,230,.7);animation:particleFloat 8s ease-in-out infinite 1.5s}
.mining-stones{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.mining-stones::before{content:'🪨';position:absolute;left:6%;bottom:22%;font-size:46px;opacity:.3;filter:blur(1px);animation:rockFloat 9s ease-in-out infinite}
.mining-stones::after{content:'🪨';position:absolute;right:8%;bottom:25%;font-size:40px;opacity:.28;filter:blur(1px);animation:rockFloat 11s ease-in-out infinite 2s}
.mining-mist{position:absolute;bottom:0;left:0;right:0;height:35%;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(255,255,255,.5) 60%,rgba(255,255,255,.65) 100%);animation:mistRise 4s ease-in-out infinite}
.mining-crane{position:absolute;top:5%;right:8%;font-size:30px;z-index:2;opacity:.8;animation:craneFly 8s ease-in-out infinite;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.1))}
.mining-header{flex:none;padding:14px 16px 8px;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;z-index:2}
.mining-close{position:absolute;left:16px;top:14px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(180,165,140,.6);background:rgba(255,255,255,.7);color:var(--ink);font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.mining-title{font-size:20px;font-weight:800;letter-spacing:4px;color:var(--ink);font-family:'Ma Shan Zheng',cursive;text-align:center;text-shadow:0 2px 6px rgba(255,255,255,.9)}
.mining-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;position:relative;z-index:2;margin:6px 0}
.mining-track{position:absolute;bottom:12%;left:50%;transform:translateX(-50%);width:min(340px,90vw);height:40px;z-index:2;pointer-events:none}
.mining-track-rail{position:absolute;top:6px;left:0;right:0;height:4px;background:linear-gradient(90deg,#6a5a48,#8a7a68,#6a5a48);border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.mining-track-sleeper{position:absolute;top:12px;width:36px;height:6px;background:#7a6a58;border-radius:2px;opacity:.85}
.mining-track-sleeper.s1{left:0}
.mining-track-sleeper.s2{left:33%}
.mining-track-sleeper.s3{left:66%}
.mining-track-sleeper.s4{right:0}
.mining-cart{position:absolute;bottom:16px;left:0;font-size:32px;animation:cartRoll 6s linear infinite;filter:drop-shadow(0 3px 4px rgba(0,0,0,.25))}
.mining-crystal{position:absolute;bottom:26%;font-size:52px;z-index:3;filter:drop-shadow(0 0 14px rgba(120,210,240,.8));animation:crystalShine 2.5s ease-in-out infinite}
.mining-ore-pile{position:absolute;bottom:18%;font-size:40px;z-index:2;opacity:.85;filter:drop-shadow(0 3px 5px rgba(0,0,0,.2));animation:orePileGlow 3s ease-in-out infinite}
.mining-ore-pile.left{left:18%;animation-delay:.3s}
.mining-ore-pile.right{right:18%;animation-delay:.8s}
.mining-lamp{position:absolute;bottom:34%;font-size:28px;z-index:2;opacity:.9;filter:drop-shadow(0 0 12px rgba(255,180,60,.7));animation:lampFlicker 2.2s ease-in-out infinite}
.mining-lamp.left{left:10%}
.mining-lamp.right{right:10%;animation-delay:1.1s}
.mining-floating-ores{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.mining-floating-ores span{position:absolute;font-size:20px;opacity:.75;filter:drop-shadow(0 2px 4px rgba(0,0,0,.15))}
.mining-floating-ores .fo-1{left:22%;top:22%;animation:floatOre 5s ease-in-out infinite}
.mining-floating-ores .fo-2{right:20%;top:28%;animation:floatOre 6s ease-in-out infinite .8s}
.mining-floating-ores .fo-3{left:30%;top:40%;animation:floatOre 5.5s ease-in-out infinite 1.5s}
.mining-floating-ores .fo-4{right:28%;top:46%;animation:floatOre 7s ease-in-out infinite .4s}
.mining-floating-ores .fo-5{left:45%;top:18%;font-size:14px;animation:floatOre 4.5s ease-in-out infinite 2s}
.mining-miners{position:relative;width:78px;height:78px;z-index:4;filter:drop-shadow(0 3px 5px rgba(0,0,0,.25));animation:diggerBounce .9s ease-in-out infinite}
.miner-body{position:absolute;left:0;bottom:0;font-size:52px;line-height:1;transform-origin:50% 100%;animation:minerBodySway .9s ease-in-out infinite}
.miner-pick{position:absolute;right:-6px;bottom:8px;font-size:40px;line-height:1;transform-origin:10% 90%;animation:pickSwing .9s ease-in-out infinite;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.mining-sparks{position:absolute;bottom:8px;left:86%;display:flex;gap:4px;opacity:0;animation:sparkBurst .9s ease-in-out infinite}
.mining-sparks span{font-size:14px;line-height:1;animation:sparkFly .9s ease-out infinite}
.mining-sparks span:nth-child(2){animation-delay:.12s}
.mining-sparks span:nth-child(3){animation-delay:.24s}
.mining-sparks span:nth-child(4){animation-delay:.36s}
.mining-glow{position:absolute;bottom:20%;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(160,220,240,.38) 0%,transparent 70%);z-index:1;animation:glowPulse 2.5s ease-in-out infinite}
.mining-ground-ring{position:absolute;bottom:16%;width:200px;height:44px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(160,220,240,.25) 0%,transparent 70%);z-index:1;animation:ringPulse 3s ease-in-out infinite;pointer-events:none}
.mining-panel{flex:none;padding:0 24px 28px;display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;z-index:2}
.mining-target{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:1px;background:rgba(255,255,255,.9);padding:8px 22px;border-radius:18px;border:1px solid rgba(180,165,140,.5);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.mining-bar{width:min(320px,80vw);height:10px;background:rgba(0,0,0,.12);border-radius:5px;overflow:hidden;border:1px solid rgba(180,165,140,.3)}
.mining-fill{height:100%;width:0%;background:linear-gradient(90deg,#5a9a8a,#8fd0c0);border-radius:5px}
.mining-actions{width:100%;display:flex;justify-content:center}
.mining-stop{padding:11px 32px;border-radius:22px;border:1px solid rgba(180,165,140,.5);background:linear-gradient(180deg,#c0392b,#a32d2d);color:#fff;font-size:14px;font-weight:700;letter-spacing:2px;cursor:pointer;box-shadow:0 3px 10px rgba(168,50,50,.3);transition:.15s;-webkit-tap-highlight-color:transparent}
.mining-stop:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(168,50,50,.4)}

@keyframes glowPulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.12);opacity:.9}}
@keyframes crystalShine{0%,100%{filter:drop-shadow(0 0 10px rgba(120,210,240,.5))}50%{filter:drop-shadow(0 0 26px rgba(120,210,240,.95))}}
@keyframes diggerBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px) translateX(-1px)}}
@keyframes minerBodySway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(5deg)}}
@keyframes pickSwing{0%,100%{transform:rotate(-40deg) translateY(4px)}50%{transform:rotate(55deg) translateY(-4px)}}
@keyframes sparkBurst{0%,45%{opacity:0}55%{opacity:1}75%,100%{opacity:0}}
@keyframes sparkFly{0%{transform:translate(0,0) scale(.7);opacity:1}100%{transform:translate(18px,-32px) scale(.2);opacity:0}}
@keyframes ringPulse{0%,100%{transform:scaleX(1) scaleY(1);opacity:.6}50%{transform:scaleX(1.15) scaleY(1.05);opacity:.9}}
@keyframes particleFloat{0%,100%{transform:translateY(0) translateX(0);opacity:.5}50%{transform:translateY(-24px) translateX(8px);opacity:.9}}
@keyframes rockFloat{0%,100%{transform:translateY(0) rotate(0deg);opacity:.2}50%{transform:translateY(-10px) rotate(2deg);opacity:.35}}
@keyframes mistRise{0%,100%{opacity:.55;transform:translateY(0)}50%{opacity:.75;transform:translateY(-6px)}}
@keyframes rayShift{0%,100%{opacity:.5}50%{opacity:.8}}
@keyframes raySwing{0%,100%{transform:rotate(10deg) scaleX(1)}50%{transform:rotate(20deg) scaleX(1.15)}}
@keyframes veinShine{0%,100%{opacity:.35;filter:blur(1px)}50%{opacity:.65;filter:blur(2px)}}
@keyframes orePileGlow{0%,100%{filter:drop-shadow(0 3px 5px rgba(0,0,0,.2))}50%{filter:drop-shadow(0 0 12px rgba(120,210,240,.5))}}
@keyframes lampFlicker{0%,100%{opacity:.9;filter:drop-shadow(0 0 12px rgba(255,180,60,.7))}50%{opacity:1;filter:drop-shadow(0 0 18px rgba(255,200,80,.9))}25%{opacity:.85}}
@keyframes cartRoll{0%{transform:translateX(-20px) scaleX(1)}49%{transform:translateX(calc(100% + 20px)) scaleX(1)}50%{transform:translateX(calc(100% + 20px)) scaleX(-1)}99%{transform:translateX(-20px) scaleX(-1)}100%{transform:translateX(-20px) scaleX(1)}}
@keyframes floatOre{0%,100%{transform:translateY(0) rotate(0deg);opacity:.75}50%{transform:translateY(-16px) rotate(8deg);opacity:1}}

@media(max-width:768px){
  .mining-title{font-size:24px;letter-spacing:5px}
  .mining-crystal{font-size:60px}
  .mining-miners{width:86px;height:86px}
  .miner-body{font-size:58px}
  .miner-pick{font-size:46px;right:-8px;bottom:10px}
  .mining-sparks span{font-size:16px}
  .mining-target{font-size:16px;padding:9px 24px}
  .mining-bar{height:12px}
  .mining-stop{padding:12px 36px;font-size:15px}
  .mining-glow{width:200px;height:200px}
  .mining-ground-ring{width:220px;height:48px}
  .mining-stones::before{font-size:52px}
  .mining-stones::after{font-size:46px}
  .mining-crane{font-size:34px}
  .mining-track{width:min(380px,92vw)}
  .mining-ore-pile{font-size:46px}
  .mining-lamp{font-size:32px}
}
body.lang-en .mining-title{font-size:18px;letter-spacing:2px}
body.lang-en .mining-target{font-size:13px;padding:8px 18px}

/* ---------- 锻造页：水墨熔炉风格（参考图 80e8f456c244af54e6bf4e1aa53c97d6.jpg） ---------- */
.content.view-craft{padding:0 0 66px!important;background:transparent;overflow:hidden}
body.view-craft .auto-fab{display:none}
.forge-ink-view{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;z-index:1}
.forge-ink-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 844' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='fsky' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23e8efef'/%3E%3Cstop offset='50%25' stop-color='%23d8e4e0'/%3E%3Cstop offset='100%25' stop-color='%23c8d5d0'/%3E%3C/linearGradient%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='390' height='844' fill='url(%23fsky)'/%3E%3Cpath d='M0 520 q70-60 150-20 t180-10 v354 h-390 z' fill='%239bb0a8' opacity='.35'/%3E%3Cpath d='M0 560 q90-40 180 0 t210 20 v264 h-390 z' fill='%237d9a8e' opacity='.3'/%3E%3Cpath d='M0 620 q100-20 200 10 t190 30 v184 h-390 z' fill='%235a7a70' opacity='.25'/%3E%3Cpath d='M-20 350 q60-80 120-40 t120-50 t140 30 v130 h-380 z' fill='%23a8b8b0' opacity='.3'/%3E%3Cpath d='M-40 400 q80-60 160-30 t130-40 t140 20 v100 h-430 z' fill='%238aa098' opacity='.25'/%3E%3Cpath d='M200 300 q-20-50-40-80 20 30 40 50 15-40 30-70 5 35 10 70 20-20 40-30 -15 30-30 50' fill='%236b8e5a' opacity='.25'/%3E%3Cpath d='M80 320 q-15-40-25-70 15 25 25 45 20-35 40-60 5 30 10 60' fill='%236b8e5a' opacity='.2'/%3E%3Cpath d='M300 280 q-10-30-20-55 10 20 20 35 15-25 30-45 5 20 10 45' fill='%236b8e5a' opacity='.2'/%3E%3C/svg%3E") center/cover no-repeat}
.forge-ink-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.15) 40%,rgba(255,255,255,.35) 100%);pointer-events:none}
.forge-mist{position:absolute;bottom:0;left:0;right:0;height:140px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.7));pointer-events:none;z-index:1}
.forge-crane{position:absolute;top:8%;right:12%;font-size:38px;z-index:1;opacity:.85;filter:drop-shadow(0 2px 3px rgba(0,0,0,.1));animation:craneFly 7s ease-in-out infinite}

.forge-bag-main-tabs{flex:none;display:flex;gap:6px;margin:6px 12px 4px;padding:3px;background:rgba(255,255,255,.5);border:1px solid rgba(180,165,140,.4);border-radius:14px;box-shadow:var(--shadow-sm);z-index:2}
.forge-bag-main-tabs .bag-main-tab{flex:1;min-width:0;min-height:32px;font-size:12px}

.forge-scene{flex:1;min-height:0;position:relative;z-index:2;display:flex;align-items:center;justify-content:center;margin:-6px 0}
.forge-furnace{position:relative;width:120px;height:120px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.3s;z-index:3}
.forge-furnace-bowl{position:absolute;inset:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:58px;background:radial-gradient(circle at 35% 35%,#5a4a30,#2b2215);border:4px solid var(--gold);box-shadow:0 0 28px rgba(201,162,39,.35),inset 0 0 30px rgba(0,0,0,.5);z-index:2;transition:box-shadow .25s}
.forge-furnace-bowl::before{content:'';position:absolute;inset:8px;border-radius:50%;border:2px dashed rgba(201,162,39,.45);animation:ringRotate 8s linear infinite}
.forge-furnace-bowl::after{content:'';position:absolute;inset:18px;border-radius:50%;border:1px solid rgba(255,255,255,.12);z-index:1}
.forge-furnace-flame{position:absolute;inset:18px;border-radius:50%;background:radial-gradient(circle at 50% 55%,#fff8ee 0%,#ffcd4d 18%,#ff8c2a 35%,#d85a30 55%,rgba(216,90,48,0) 72%);filter:blur(1px);animation:flamePulse 1.1s ease-in-out infinite;z-index:1}
.forge-furnace-hint{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);font-size:11px;color:var(--gold-2);background:rgba(0,0,0,.45);padding:2px 8px;border-radius:10px;pointer-events:none;z-index:4;white-space:nowrap;transition:opacity .25s}
.forge-furnace-hint.hide{opacity:0}
.forge-furnace-status{position:absolute;top:-22px;left:50%;transform:translateX(-50%) scale(.9);padding:6px 18px;background:linear-gradient(180deg,#ff6a30,#c92a1a);color:#fff;font-size:16px;font-weight:900;border-radius:18px;box-shadow:0 4px 16px rgba(255,90,48,.6),0 0 0 3px var(--gold) inset,0 0 0 5px rgba(255,90,48,.2);border:2px solid #fff5;text-shadow:0 0 8px rgba(255,255,255,.7),0 1px 2px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:10;white-space:nowrap;letter-spacing:3px}
.forge-furnace-status.show{opacity:1;transform:translateX(-50%) scale(1)}
.forge-furnace.forging .forge-furnace-status{animation:statusBounce .55s ease-in-out infinite}
@keyframes statusBounce{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.12) translateY(-3px)}}
@keyframes statusPulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.06)}}
/* 锻造全屏大横幅（fixed 顶部居中） */
.forge-banner{position:fixed;top:54px;left:50%;transform:translateX(-50%) scale(1);z-index:200;font-size:24px;font-weight:900;color:#fff;padding:10px 32px;background:linear-gradient(180deg,#ff8c2a,#d85a30);border:3px solid var(--gold);border-radius:26px;text-shadow:0 2px 8px rgba(0,0,0,.5),0 0 12px rgba(255,255,255,.4);box-shadow:0 6px 24px rgba(255,140,42,.7),0 0 0 3px rgba(255,255,255,.4);letter-spacing:6px;pointer-events:none;display:flex;align-items:center;gap:10px;animation:bannerPulse .55s ease-in-out infinite}
.forge-banner .b-icon{display:inline-block;font-size:22px;animation:bannerSpin .8s linear infinite}
.forge-banner .b-sub{font-size:12px;font-weight:500;letter-spacing:1px;background:rgba(0,0,0,.3);padding:2px 8px;border-radius:10px;margin-left:4px}
@keyframes bannerPulse{0%,100%{transform:translateX(-50%) scale(1);box-shadow:0 6px 24px rgba(255,140,42,.7),0 0 0 3px rgba(255,255,255,.4)}50%{transform:translateX(-50%) scale(1.08);box-shadow:0 8px 32px rgba(255,180,42,1),0 0 0 5px rgba(255,255,255,.7)}}
@keyframes bannerSpin{to{transform:rotate(360deg)}}
/* 火花飞溅 */
.forge-sparks{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:visible}
.forge-sparks .sp{position:absolute;width:6px;height:6px;background:#ffcd4d;border-radius:50%;box-shadow:0 0 8px #ff8c2a,0 0 14px #ff5a30;animation:sparkFly 1.1s ease-out infinite}
.forge-sparks .sp1{left:18%;top:8%;animation-delay:0s}
.forge-sparks .sp2{left:78%;top:6%;animation-delay:.3s;width:5px;height:5px;background:#ffe99a}
.forge-sparks .sp3{left:50%;top:0%;animation-delay:.6s;width:7px;height:7px;background:#ff8c2a}
.forge-sparks .sp4{left:30%;top:0%;animation-delay:.9s;width:4px;height:4px;background:#fff8ee}
.forge-sparks .sp5{left:65%;top:2%;animation-delay:.45s;width:5px;height:5px;background:#ffe14d}
@keyframes sparkFly{0%{transform:translate(0,0) scale(.3);opacity:0}15%{opacity:1}100%{transform:translate(var(--dx,30px),var(--dy,-70px)) scale(.6);opacity:0}}
/* 屏幕边缘火焰光晕（fixed 全屏） */
body.forging::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:199;background:radial-gradient(ellipse at 50% 100%,rgba(255,140,42,.18) 0%,rgba(255,90,32,.08) 25%,rgba(255,90,32,0) 60%);animation:edgeGlow 1.6s ease-in-out infinite}
body.forging::after{content:'';position:fixed;top:0;left:50%;transform:translateX(-50%);width:60%;max-width:420px;height:6px;background:linear-gradient(90deg,rgba(255,90,32,0),#ff8c2a,#ff5a30,#ff8c2a,rgba(255,90,32,0));border-radius:0 0 12px 12px;box-shadow:0 0 20px rgba(255,140,42,.8);pointer-events:none;z-index:199;animation:edgeBar .55s ease-in-out infinite}
@keyframes edgeGlow{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes edgeBar{0%,100%{opacity:.7;height:6px}50%{opacity:1;height:9px}}
.forge-furnace:hover{transform:scale(1.04)}
.forge-furnace:active{transform:scale(.98)}
.forge-furnace.forging .forge-furnace-flame{animation:flameRoar .35s ease-in-out infinite;background:radial-gradient(circle at 50% 55%,#fff 0%,#ffe14d 12%,#ff6a00 25%,#ff2a00 45%,rgba(255,42,0,0) 70%)}
.forge-furnace.forging .forge-furnace-bowl{box-shadow:0 0 60px rgba(255,140,42,.85),0 0 0 4px rgba(255,90,48,.4),inset 0 0 30px rgba(0,0,0,.5);animation:cruciblePulseStrong .55s ease-in-out infinite}
@keyframes cruciblePulseStrong{0%,100%{transform:scale(1);box-shadow:0 0 50px rgba(255,140,42,.7),0 0 0 4px rgba(255,90,48,.3),inset 0 0 30px rgba(0,0,0,.5)}50%{transform:scale(1.07);box-shadow:0 0 80px rgba(255,180,42,1),0 0 0 6px rgba(255,90,48,.6),inset 0 0 40px rgba(0,0,0,.5)}}

.forge-orbit{position:absolute;width:100%;height:100%;max-width:280px;max-height:280px;pointer-events:none;z-index:2}
.forge-slot{position:absolute;left:50%;top:50%;width:50px;height:50px;margin:-25px 0 0 -25px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:rgba(255,253,247,.92);border:1px solid rgba(180,165,140,.5);border-radius:14px;box-shadow:0 3px 10px rgba(0,0,0,.08);cursor:pointer;pointer-events:auto;transition:.15s;-webkit-tap-highlight-color:transparent;transform:rotate(var(--a)) translateX(108px) rotate(calc(-1 * var(--a)))}
.forge-slot:hover{transform:rotate(var(--a)) translateX(108px) rotate(calc(-1 * var(--a))) scale(1.08);border-color:var(--gold);box-shadow:0 5px 14px rgba(201,162,39,.25)}
.forge-slot:active{transform:rotate(var(--a)) translateX(108px) rotate(calc(-1 * var(--a))) scale(.95)}
.forge-slot.on{background:rgba(255,248,230,.95);border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset,0 4px 12px rgba(201,162,39,.2)}
.forge-slot-icon{font-size:24px;line-height:1}
.forge-slot-name{font-size:9px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:50px;text-align:center}
.forge-slot-qty{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;background:var(--cinnabar);color:#fff;border-radius:9px;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 5px rgba(0,0,0,.15)}
.forge-slot-empty{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:13px;text-align:center;padding:10px;background:rgba(255,255,255,.6);border-radius:10px}

.forge-status{flex:none;position:relative;z-index:2;display:flex;flex-direction:column;gap:4px;padding:0 16px 4px}
.forge-temp-strip{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.55);border:1px solid rgba(180,165,140,.4);border-radius:10px;padding:4px 10px}
.forge-temp-name{flex:none;font-size:12px;color:var(--cinnabar);font-weight:700;min-width:40px}
.forge-temp-track{flex:1;height:8px;background:var(--paper-2);border-radius:4px;overflow:hidden}
.forge-temp-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,#854f0b,#d85a30,#c9a227,#fff8ee);transition:width .3s}
.forge-selected{display:none}
.forge-sel-chip{display:none}
.forge-ink-view .forge-probs{font-size:12px;line-height:1.4}
.forge-ink-view .forge-prob-summary{display:flex;align-items:center;justify-content:space-between;gap:8px;background:rgba(255,255,255,.55);border:1px solid rgba(180,165,140,.4);border-radius:10px;padding:5px 10px}
.forge-ink-view .forge-prob-summary .forge-prob-meta{display:flex;align-items:center;gap:6px;min-width:0;flex:1}
.forge-ink-view .forge-prob-summary .forge-mat-tier{flex:none;font-size:12px;color:var(--ink);font-weight:500;white-space:nowrap}
.forge-ink-view .forge-prob-summary .forge-heat-name{flex:none;font-size:12px;color:var(--cinnabar);font-weight:700;white-space:nowrap}
.forge-ink-view .forge-prob-summary .muted{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}
.forge-ink-view .forge-prob-summary .prob-toggle{flex:none;font-size:11px;padding:3px 10px;border-radius:10px;background:var(--paper);border:1px solid var(--line);color:var(--ink-soft);cursor:pointer}
.forge-ink-view .forge-prob-summary .prob-toggle:hover{border-color:var(--gold);background:var(--paper-2)}

.forge-locks{flex:none;position:relative;z-index:2;padding:0 16px 4px}
.forge-locks .forge-lock-row{display:flex;gap:8px;align-items:stretch;flex-wrap:nowrap;background:rgba(255,255,255,.55);border:1px solid rgba(180,165,140,.4);border-radius:10px;padding:5px 8px}
.forge-locks .forge-lock{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.forge-locks .forge-lock label{font-size:10px;color:var(--ink-soft);white-space:nowrap}
.forge-locks .part-chips,.forge-locks .level-chips{display:flex;flex-wrap:wrap;gap:3px}
.forge-locks .part-chip,.forge-locks .level-chip{padding:2px 7px;font-size:10px;border:1px solid rgba(180,165,140,.5);background:rgba(255,255,255,.7);border-radius:10px;color:var(--ink);cursor:pointer;transition:.15s}
.forge-locks .part-chip.on,.forge-locks .level-chip.on{background:var(--cinnabar);color:#fff;border-color:var(--cinnabar)}
.forge-locks .part-chip:hover,.forge-locks .level-chip:hover{border-color:var(--gold)}

.forge-actions{flex:none;position:relative;z-index:2;display:flex;align-items:center;gap:10px;padding:0 16px 12px}
.forge-auto-btn{flex:1;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:linear-gradient(180deg,#fdf8e8,#f5ecd0);border:2px solid var(--gold);border-radius:14px;color:#5a4010;cursor:pointer;box-shadow:0 4px 12px rgba(201,162,39,.2);transition:.15s;-webkit-tap-highlight-color:transparent}
.forge-auto-btn:disabled{opacity:.5;cursor:not-allowed}
.forge-auto-btn:active:not(:disabled){transform:scale(.97)}
.forge-auto-btn .fauto-main{font-size:15px;font-weight:700}
.forge-auto-btn .fauto-sub{font-size:10px;opacity:.8}
.forge-quick-btn{flex:1;height:48px;display:flex;align-items:center;justify-content:center;gap:6px;background:linear-gradient(180deg,var(--cinnabar),#a32d2d);border:none;border-radius:14px;color:#fff;font-size:15px;font-weight:700;letter-spacing:2px;cursor:pointer;box-shadow:0 5px 16px rgba(168,50,50,.35);transition:.15s;-webkit-tap-highlight-color:transparent}
.forge-quick-btn:disabled{opacity:.55;cursor:not-allowed}
.forge-quick-btn:active:not(:disabled){transform:scale(.97);box-shadow:0 3px 10px rgba(168,50,50,.3)}
.forge-quick-btn::before{content:'🔨';font-size:18px}
.forge-quick-btn.looping{background:linear-gradient(180deg,#6e2626,#3a1313);box-shadow:0 0 0 2px var(--gold) inset,0 5px 18px rgba(201,162,39,.5);animation:forge-loop-pulse 1.2s ease-in-out infinite}
.forge-quick-btn.looping::before{content:'⏹';font-size:18px}
@keyframes forge-loop-pulse{0%,100%{box-shadow:0 0 0 2px var(--gold) inset,0 5px 18px rgba(201,162,39,.5)}50%{box-shadow:0 0 0 4px var(--gold) inset,0 5px 24px rgba(201,162,39,.85)}}

.forge-progress-wrap{width:100%;height:4px;background:rgba(180,165,140,.25);border-radius:2px;overflow:hidden;margin:0 16px 8px;flex:none;position:relative;z-index:2;max-width:calc(100% - 32px)}
.forge-progress-bar{height:100%;width:0%;background:linear-gradient(90deg,#854f0b,#d85a30,#c9a227);border-radius:0 2px 2px 0;transition:width 1.8s ease-out}

.forge-history-body{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;padding:0 16px 10px}

/* 锻造动画关键帧 */
@keyframes flamePulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.08);opacity:1}}
@keyframes flameRoar{0%,100%{transform:scale(1);opacity:.95}50%{transform:scale(1.15);opacity:1}}
@keyframes ringRotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes cruciblePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}

/* 英文模式适配 */
body.lang-en .forge-furnace-status{font-size:10px;padding:2px 8px}
body.lang-en .forge-bag-main-tabs .bag-main-tab .ttxt{font-size:10px}
body.lang-en .forge-locks .part-chip,body.lang-en .forge-locks .level-chip{font-size:9px;padding:3px 6px}
body.lang-en .forge-auto-btn .fauto-main{font-size:12px}
body.lang-en .forge-quick-btn{font-size:13px;letter-spacing:0}

/* 移动端小屏适配 */
@media (max-width:400px){
  .forge-furnace{width:108px;height:108px}
  .forge-furnace-bowl{font-size:52px}
  .forge-furnace-hint{font-size:9px;bottom:16px}
  .forge-furnace-status{font-size:10px;padding:2px 7px;top:-6px}
  .forge-orbit{max-width:252px;max-height:252px}
  .forge-slot{width:46px;height:46px;margin:-23px 0 0 -23px;transform:rotate(var(--a)) translateX(98px) rotate(calc(-1 * var(--a)))}
  .forge-slot:hover,.forge-slot:active,.forge-slot.on{transform:rotate(var(--a)) translateX(98px) rotate(calc(-1 * var(--a)))}
  .forge-slot-icon{font-size:18px}
  .forge-slot-name{font-size:8px;max-width:40px}
  .forge-forging-label{font-size:24px}
  .forge-actions{padding:0 14px 12px}
  .forge-quick-btn{font-size:14px}
}
@media (max-height:700px){
  .forge-scene{margin:-10px 0}
  .forge-status{padding:0 14px 3px;gap:3px}
  .forge-locks{padding:0 14px 3px}
  .forge-locks .forge-lock-row{padding:4px 6px}
  .forge-actions{padding:0 14px 10px}
  .forge-actions .forge-auto-btn,.forge-actions .forge-quick-btn{height:46px}
  .forge-ink-view .forge-prob-summary{padding:4px 8px}
  .forge-ink-view .forge-prob-summary .forge-mat-tier,.forge-ink-view .forge-prob-summary .forge-heat-name{font-size:11px}
  .forge-ink-view .forge-prob-summary .muted{font-size:10px}
}

/* ---------- 装备详情页：水墨熔剑风格（参考图 4ded41c09558ca1356848289b9efcfa7.jpg） ---------- */
.equip-detail-overlay{padding:0!important;background:transparent!important}
.equip-detail-panel{position:relative;width:100%;height:100%;max-width:none;max-height:none;border-radius:0;display:flex;flex-direction:column;overflow:hidden;background:transparent;animation:edFadeIn .35s ease-out}
.equip-detail-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 844' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='esky' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23c8d5e0'/%3E%3Cstop offset='45%25' stop-color='%23a8bcc8'/%3E%3Cstop offset='100%25' stop-color='%238a9da8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='390' height='844' fill='url(%23esky)'/%3E%3Cpath d='M0 480 q80-70 170-30 t220-20 v414 h-390 z' fill='%237a8fa0' opacity='.3'/%3E%3Cpath d='M0 540 q100-50 200-10 t190 10 v304 h-390 z' fill='%235a7a8a' opacity='.25'/%3E%3Cpath d='M0 610 q120-30 240 0 t150 20 v214 h-390 z' fill='%234a6a7a' opacity='.2'/%3E%3Cpath d='M-30 360 q70-90 140-50 t130-60 t150 40 v130 h-420 z' fill='%237a8a90' opacity='.25'/%3E%3Cpath d='M-40 410 q90-70 180-40 t150-50 t160 30 v100 h-490 z' fill='%235a7a80' opacity='.2'/%3E%3Cellipse cx='195' cy='720' rx='260' ry='40' fill='%233a5a6a' opacity='.15'/%3E%3Cellipse cx='195' cy='740' rx='220' ry='30' fill='%233a5a6a' opacity='.12'/%3E%3Cpath d='M150 525 q45 15 90 0' stroke='%235a5a5a' stroke-width='2' fill='none' opacity='.6'/%3E%3Ccircle cx='175' cy='522' r='3' fill='%233a3a3a' opacity='.7'/%3E%3Ccircle cx='215' cy='522' r='3' fill='%233a3a3a' opacity='.7'/%3E%3Cpath d='M30 760 q10-25 20-50 8 25 18 50' fill='%235a8a66' opacity='.2'/%3E%3Cpath d='M340 760 q-8-25-16-50-8 25-18 50' fill='%235a8a66' opacity='.2'/%3E%3Cpath d='M60 280 q-8-20-15-40 8 15 15 30 12-20 25-35 4 18 8 35' fill='%236b8e5a' opacity='.2'/%3E%3Cpath d='M320 250 q-6-18-12-33 6 12 12 25 10-18 22-32 3 15 6 30' fill='%236b8e5a' opacity='.18'/%3E%3C/svg%3E") center/cover no-repeat}
.equip-detail-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,.1) 45%,rgba(255,255,255,.25) 100%);pointer-events:none}
.equip-detail-mist{position:absolute;bottom:0;left:0;right:0;height:180px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.6) 60%,rgba(255,255,255,.85));pointer-events:none;z-index:1}
.equip-detail-crane{position:absolute;top:7%;right:10%;font-size:42px;z-index:1;opacity:.85;filter:drop-shadow(0 2px 3px rgba(0,0,0,.1));animation:craneFly 8s ease-in-out infinite;pointer-events:none}
.equip-detail-bridge{position:absolute;bottom:18%;left:50%;transform:translateX(-50%);width:120px;height:50px;z-index:1;pointer-events:none;opacity:.65;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 50'%3E%3Cpath d='M10 30 q50 18 100 0' stroke='%235a5a5a' stroke-width='2' fill='none'/%3E%3Cpath d='M15 30 v-10 M35 35 v-10 M55 37 v-10 M75 35 v-10 M95 30 v-10' stroke='%235a5a5a' stroke-width='1'/%3E%3Ccircle cx='45' cy='25' r='3' fill='%233a3a3a'/%3E%3Ccircle cx='75' cy='25' r='3' fill='%233a3a3a'/%3E%3C/svg%3E") no-repeat center/contain}

.equip-detail-header{flex:none;position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:rgba(255,255,255,.5);border-bottom:1px solid rgba(180,165,140,.35);backdrop-filter:blur(4px)}
.equip-detail-user{display:flex;align-items:center;gap:10px;min-width:0}
.equip-detail-avatar{flex:none;width:46px;height:46px;border-radius:50%;background:var(--paper);border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;font-size:24px}
.equip-detail-user-info{flex:1;min-width:0}
.equip-detail-name-row{display:flex;align-items:center;gap:8px;min-width:0}
.equip-detail-name{font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.equip-detail-lv{font-size:11px;color:#fff;background:linear-gradient(180deg,var(--cinnabar),#a32d2d);padding:2px 7px;border-radius:10px;white-space:nowrap}
.equip-detail-power{font-size:12px;color:var(--ink-soft);margin-top:2px}
.equip-detail-currency{display:flex;align-items:center;gap:10px;flex:none}
.equip-detail-coin{display:flex;align-items:center;gap:6px}
.equip-detail-coin-ico{font-size:18px}
.equip-detail-coin-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2}
.equip-detail-coin-lbl{font-size:10px;color:var(--ink-faint)}
.equip-detail-coin b{font-size:13px;color:var(--ink)}
.equip-detail-close{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:none;background:rgba(255,255,255,.7);color:var(--ink);font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s;box-shadow:0 2px 6px rgba(0,0,0,.1)}
.equip-detail-close:hover{background:#fff;transform:translateY(-50%) scale(1.05)}
.equip-detail-close:active{transform:translateY(-50%) scale(.95)}

.equip-detail-hero{flex:1;min-height:0;position:relative;z-index:2;display:flex;align-items:center;justify-content:center;margin:-10px 0}
.equip-detail-aura{position:absolute;width:240px;height:240px;border-radius:50%;filter:blur(12px);animation:edAura 3s ease-in-out infinite}
.equip-detail-ring{position:absolute;border-radius:50%;border:2px solid rgba(100,180,255,.35);box-shadow:0 0 18px rgba(80,170,255,.25);pointer-events:none}
.equip-detail-ring.ring-1{width:220px;height:220px;animation:edRing1 7s linear infinite}
.equip-detail-ring.ring-2{width:180px;height:180px;border-style:dashed;animation:edRing2 10s linear infinite reverse}
.equip-detail-lightning{position:absolute;font-size:40px;z-index:3;opacity:0;filter:drop-shadow(0 0 10px #4dabf7);animation:edLightning 1.8s ease-in-out infinite;pointer-events:none}
.equip-detail-weapon{position:relative;z-index:4;font-size:110px;line-height:1;animation:edWeaponFloat 3.5s ease-in-out infinite;cursor:default;-webkit-tap-highlight-color:transparent}
.equip-detail-ripples{position:absolute;bottom:8%;left:50%;transform:translateX(-50%);width:160px;height:30px;background:radial-gradient(ellipse at 50% 50%,rgba(80,180,255,.35) 0%,transparent 60%);animation:edRipple 2s ease-out infinite;pointer-events:none}

.equip-detail-info{flex:none;position:relative;z-index:2;margin:0 16px 10px;padding:12px 14px;background:rgba(255,255,255,.65);border:1px solid rgba(180,165,140,.4);border-radius:16px;backdrop-filter:blur(4px);text-align:center;box-shadow:0 4px 16px rgba(40,30,15,.08)}
.equip-detail-item-name{font-size:18px;font-weight:700;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'Ma Shan Zheng',cursive}
.equip-detail-meta{font-size:11px;color:var(--ink-soft);margin-bottom:6px}
.equip-detail-attrs{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin-bottom:6px}
.ed-attr{font-size:11px;padding:3px 8px;background:var(--paper);border:1px solid var(--line);border-radius:10px;color:var(--ink-soft)}
.ed-attr b{color:var(--cinnabar);margin-right:2px}
.equip-detail-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin-bottom:6px}
.ed-tag{font-size:10px;padding:2px 7px;border-radius:9px;background:var(--paper);border:1px solid var(--line);color:var(--ink);white-space:nowrap}
.equip-detail-cp{font-size:13px;font-weight:700;color:var(--gold);letter-spacing:1px}
.ed-price{font-size:12px;color:var(--ink-soft);margin-top:6px;text-align:center}
.ed-price b{color:var(--gold);font-size:13px}
.ed-dur{position:relative;height:16px;background:var(--paper-2);border-radius:8px;overflow:hidden;margin-top:6px}
.ed-dur-fill{height:100%;border-radius:8px;transition:width .3s}
.ed-dur span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--ink)}

.equip-detail-actions{flex:none;position:relative;z-index:2;display:flex;align-items:center;gap:12px;padding:0 18px 10px}
.equip-detail-btn{flex:1;height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:none;border-radius:16px;color:#fff;font-weight:700;cursor:pointer;transition:.15s;-webkit-tap-highlight-color:transparent;box-shadow:0 6px 18px rgba(0,0,0,.2);position:relative;overflow:hidden}
.equip-detail-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.25),transparent);pointer-events:none}
.equip-detail-btn.enhance{background:linear-gradient(180deg,var(--cinnabar),#a32d2d)}
.equip-detail-btn.reforge{background:linear-gradient(180deg,#d4a843,#b8932f)}
.equip-detail-btn:disabled{opacity:.55;cursor:not-allowed}
.equip-detail-btn:active:not(:disabled){transform:scale(.97)}
.ed-btn-main{font-size:16px;letter-spacing:2px;font-family:'Ma Shan Zheng',cursive}
.ed-btn-sub{font-size:10px;opacity:.85;font-weight:400}

.equip-detail-secondary{flex:none;position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 18px 14px;flex-wrap:wrap}
.ed-sec-btn{padding:5px 12px;border:1px solid rgba(180,165,140,.5);background:rgba(255,255,255,.55);border-radius:12px;font-size:12px;color:var(--ink);cursor:pointer;transition:.15s;-webkit-tap-highlight-color:transparent}
.ed-sec-btn:hover{border-color:var(--gold);background:rgba(255,255,255,.75)}
.ed-sec-btn:active{transform:scale(.96)}
.ed-sec-btn:disabled{opacity:.5;cursor:not-allowed}
.ed-sec-btn.danger{color:var(--cinnabar);border-color:rgba(168,50,50,.35)}

.equip-detail-quality-row{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.ed-quality-badge{font-size:11px;font-weight:700;padding:2px 10px;border-radius:12px;white-space:nowrap}
.ed-level-badge{font-size:11px;color:var(--ink-soft)}
.equip-detail-cp .muted{font-size:11px;font-weight:400;color:var(--ink-soft);letter-spacing:0}
.ed-absorb{margin:10px 0 0;padding:10px 12px;background:linear-gradient(180deg,rgba(255,250,240,.9),rgba(255,246,235,.85));border:1px solid rgba(212,168,67,.35);border-radius:14px;position:relative;z-index:2}
.ed-absorb.worn{border-color:var(--cinnabar);background:linear-gradient(180deg,rgba(255,242,242,.92),rgba(255,235,235,.88))}
.ed-absorb-title{font-size:12px;font-weight:700;color:var(--cinnabar);margin-bottom:6px;letter-spacing:1px;font-family:'Ma Shan Zheng',cursive}
.ed-absorb-cap{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.ed-absorb-count{flex:none;font-size:11px;color:var(--ink);white-space:nowrap}
.ed-absorb-count b{color:var(--cinnabar);font-size:12px}
.ed-absorb-bar{flex:1;height:8px;background:var(--paper-2);border-radius:4px;overflow:hidden;min-width:80px}
.ed-absorb-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--cinnabar),#e86b6b);transition:width .3s}
.ed-absorb-bonus{font-size:11px;color:var(--gold);font-weight:700;margin-bottom:5px}
.ed-absorb-attrs{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
.ed-absorb-attr{font-size:11px;padding:3px 8px;background:rgba(255,255,255,.75);border:1px solid rgba(212,168,67,.4);border-radius:10px;color:var(--ink-soft)}
.ed-absorb-attr b{color:var(--cinnabar);margin-right:2px}
.ed-absorb-empty{font-size:11px;color:var(--ink-soft);padding:4px 0}

@media(max-width:420px){
  .ed-absorb{padding:8px 10px;margin-top:8px}
  .ed-absorb-cap{gap:6px}
  .ed-absorb-count{font-size:10px}
  .ed-absorb-attr{font-size:10px;padding:2px 6px}
}
.ed-tag-tech{background:#fbe9e7;color:#a83232;border-color:#e7b9b5}
.ed-tag-effect{background:#e8f0e9;color:#4a7c59;border-color:#b8d4bd}
.ed-tag-wuji{background:#fcf3d9;color:#c9a227;border-color:#ead69a}
.ed-tag-set{background:#f0e9f5;color:#7b4a9b;border-color:#d5c2df}
.ed-tag-worn{background:#e7f0fb;color:#2f6db0;border-color:#bcd5f0}
.ed-tag-absorb{background:#fff3e0;color:#d67c1b;border-color:#f0d0a0}
.ed-tag-owner{background:#e9ecef;color:#4a5568;border-color:#cbd5e0}

.ed-compare{margin-top:8px;padding:8px 10px;background:rgba(255,255,255,.55);border:1px solid rgba(180,165,140,.35);border-radius:14px;text-align:left}
.ed-cmp-title{font-size:12px;font-weight:700;color:var(--ink);margin-bottom:5px;text-align:center}
.ed-cmp-summary{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:6px;text-align:center;flex-wrap:wrap}
.ed-cmp-piece{font-size:10px;color:var(--ink-soft);line-height:1.25;max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-cmp-piece b{font-size:12px;color:var(--ink)}
.ed-cmp-arrow{font-size:14px;color:var(--gold)}
.ed-cmp-delta{font-size:14px;font-weight:700;min-width:48px}
.ed-cmp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:4px;margin-bottom:4px}
.ed-cmp-row{display:flex;align-items:center;justify-content:center;gap:4px;font-size:11px;padding:3px 4px;background:rgba(255,255,255,.55);border-radius:8px}
.ed-cmp-attr{flex:none;color:var(--ink-soft);min-width:18px;text-align:center}
.ed-cmp-old{flex:1;text-align:right;color:#888}
.ed-cmp-new{flex:1;text-align:left;color:var(--ink)}
.ed-cmp-diff{flex:none;font-weight:700;min-width:28px;text-align:center}
.ed-cmp-diff.up{color:var(--jade,#4a9b5a)}
.ed-cmp-diff.down{color:var(--cinnabar)}
.ed-cmp-diff.same{color:#999}
.ed-cmp-tip{font-size:11px;font-weight:700;text-align:center;margin-top:3px}

@keyframes edFadeIn{from{opacity:0;transform:scale(1.02)}to{opacity:1;transform:scale(1)}}
@keyframes edAura{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.12);opacity:1}}
@keyframes edRing1{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes edRing2{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
@keyframes edWeaponFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes edLightning{0%,90%,100%{opacity:0}92%{opacity:1;transform:scale(1.1)}94%{opacity:0;transform:scale(1)}96%{opacity:.7;transform:scale(1.05)}98%{opacity:0}}
@keyframes edRipple{0%{transform:translateX(-50%) scale(1);opacity:.6}100%{transform:translateX(-50%) scale(1.5);opacity:0}}

/* 英文模式适配 */
body.lang-en .ed-btn-main{font-size:14px;letter-spacing:0}
body.lang-en .ed-btn-sub{font-size:9px}
body.lang-en .equip-detail-item-name{font-size:16px}
body.lang-en .ed-sec-btn{font-size:11px;padding:5px 10px}

/* 移动端小屏适配 */
@media (max-width:400px){
  .equip-detail-avatar{width:40px;height:40px;font-size:20px}
  .equip-detail-name{font-size:14px}
  .equip-detail-lv{font-size:10px;padding:1px 6px}
  .equip-detail-power{font-size:11px}
  .equip-detail-coin b{font-size:12px}
  .equip-detail-weapon{font-size:90px}
  .equip-detail-aura{width:200px;height:200px}
  .equip-detail-ring.ring-1{width:190px;height:190px}
  .equip-detail-ring.ring-2{width:150px;height:150px}
  .equip-detail-info{padding:10px 12px;margin:0 12px 8px}
  .equip-detail-item-name{font-size:16px}
  .equip-detail-actions{padding:0 14px 8px}
  .equip-detail-btn{height:50px}
  .ed-btn-main{font-size:15px}
  .equip-detail-secondary{padding:0 14px 12px}
}
@media (max-height:700px){
  .equip-detail-hero{margin:-14px 0}
  .equip-detail-info{padding:10px 12px;margin-bottom:8px}
  .equip-detail-actions{padding:0 16px 8px}
  .equip-detail-secondary{padding:0 16px 10px}
}
@media (max-height:640px){
  .equip-detail-hero{margin:-18px 0}
  .equip-detail-weapon{font-size:80px}
  .equip-detail-aura{width:180px;height:180px}
  .equip-detail-ring.ring-1{width:170px;height:170px}
  .equip-detail-ring.ring-2{width:130px;height:130px}
}

/* ============================================================
   装备部位页：水墨仙侠 · 身体装备（参考 4d19a98d... 水墨风格）
   ============================================================ */
.content.view-inventory{padding:0 0 66px!important;background:transparent;display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}
body.view-inventory .auto-fab{display:none}
.equip-ink-view{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;background:linear-gradient(180deg,#f0f6f5 0%,#faf6ec 45%,#f2ece0 100%)}
.equip-ink-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 844' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='esky' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23e8f2f2'/%3E%3Cstop offset='40%25' stop-color='%23f5f0e4'/%3E%3Cstop offset='100%25' stop-color='%23c8d0c8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='390' height='844' fill='url(%23esky)'/%3E%3Cellipse cx='70' cy='90' rx='48' ry='16' fill='%23fff' opacity='.55'/%3E%3Cellipse cx='320' cy='120' rx='42' ry='14' fill='%23fff' opacity='.45'/%3E%3Cellipse cx='50' cy='300' rx='35' ry='12' fill='%23fff' opacity='.4'/%3E%3Cellipse cx='340' cy='340' rx='38' ry='13' fill='%23fff' opacity='.4'/%3E%3Cpath d='M-40,220 Q50,150 150,200 T320,170 T430,220 L430,844 L-40,844 Z' fill='%238fa8a8' opacity='.22'/%3E%3Cpath d='M-40,340 Q60,260 160,310 T330,280 T430,340 L430,844 L-40,844 Z' fill='%237a9a98' opacity='.28'/%3E%3Cpath d='M-40,480 Q70,400 170,450 T340,420 T430,480 L430,844 L-40,844 Z' fill='%235a8078' opacity='.32'/%3E%3C/svg%3E") no-repeat center/cover}
.equip-ink-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.15) 40%,rgba(255,255,255,.35) 100%);pointer-events:none}
.equip-ink-lake{position:absolute;left:0;right:0;bottom:0;height:22%;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(170,195,195,.55),rgba(140,175,175,.75))}
.equip-ink-lake::after{content:'';position:absolute;left:0;right:0;top:0;height:40%;background:repeating-radial-gradient(circle at 50% 0,rgba(255,255,255,.35) 0,transparent 14px,rgba(255,255,255,.18) 28px);animation:lakeRipple 4s linear infinite;pointer-events:none}
@keyframes lakeRipple{0%{background-position:0 0}100%{background-position:0 28px}}
.equip-ink-crane{position:absolute;top:6%;right:12%;font-size:34px;z-index:1;opacity:.8;filter:drop-shadow(0 2px 3px rgba(0,0,0,.1));animation:craneFly 6s ease-in-out infinite;pointer-events:none}
.eiv-header{flex:none;position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;background:rgba(255,255,255,.35);border-bottom:1px solid rgba(180,165,140,.3);backdrop-filter:blur(4px)}
.eiv-back{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid rgba(180,165,140,.5);background:rgba(255,255,255,.6);color:var(--ink);font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s;-webkit-tap-highlight-color:transparent}
.eiv-back:hover{background:rgba(255,255,255,.85);border-color:var(--gold)}
.eiv-title{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;font-size:18px;font-weight:800;letter-spacing:3px;color:var(--ink);font-family:'Ma Shan Zheng',cursive}
.eiv-line{flex:1;height:1px;max-width:60px;background:linear-gradient(90deg,transparent,rgba(139,95,33,.4),transparent)}
.eiv-currency{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink);flex:none}
.eiv-main{flex:1;min-height:0;position:relative;z-index:2;display:flex;align-items:center;justify-content:center;padding:8px 6px;gap:6px}
.eiv-slots-col{display:flex;flex-direction:column;justify-content:center;gap:8px;flex:0 0 70px;z-index:2}
.eiv-slot{width:64px;height:64px;border-radius:14px;background:rgba(255,253,247,.85);border:1px solid rgba(180,165,140,.5);box-shadow:0 3px 10px rgba(0,0,0,.08);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;transition:.15s;-webkit-tap-highlight-color:transparent;position:relative}
.eiv-slot:hover{transform:scale(1.05);border-color:var(--gold)}
.eiv-slot.empty{opacity:.75;background:rgba(255,255,255,.5);border-style:dashed}
.eiv-slot.empty .eiv-slot-ico{opacity:.5}
.eiv-slot-ico{font-size:26px;line-height:1}
.eiv-slot-name{font-size:9px;color:var(--ink-soft);max-width:58px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
.eiv-slot-q{font-size:8px;padding:0 4px;border-radius:6px;max-width:58px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;background:rgba(255,255,255,.5);margin-top:1px}
.eiv-slot-wuji{position:absolute;top:-4px;right:-4px;font-size:9px;background:var(--gold);color:#fff;border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 5px rgba(0,0,0,.15)}
.eiv-slot-dur{position:absolute;top:-4px;left:-4px;font-size:8px;background:var(--cinnabar);color:#fff;border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 5px rgba(0,0,0,.15)}
.eiv-center{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;z-index:1;padding:0 4px}
.eiv-aura{position:absolute;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(201,162,39,.2) 0%,rgba(255,255,255,.3) 40%,transparent 70%);animation:auraPulse 3s ease-in-out infinite;pointer-events:none}
@keyframes auraPulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.08);opacity:1}}
.eiv-figure{position:relative;z-index:2;width:min(170px,42vw);height:min(260px,52vh);display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 6px 12px rgba(0,0,0,.18))}
.eiv-figure svg{width:100%;height:100%}
.eiv-total-cp{position:absolute;bottom:6%;left:50%;transform:translateX(-50%);font-size:13px;font-weight:700;color:var(--ink);background:rgba(255,255,255,.78);padding:4px 12px;border-radius:12px;border:1px solid rgba(180,165,140,.4);white-space:nowrap;z-index:3;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.eiv-right{flex:0 0 110px;display:flex;flex-direction:column;gap:8px;z-index:2;min-height:0}
.eiv-body-panel{flex:1;min-height:0;background:rgba(255,255,255,.75);border:1px solid rgba(180,165,140,.4);border-radius:14px;padding:8px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.eiv-body-title{font-size:12px;font-weight:700;color:var(--cinnabar);text-align:center;letter-spacing:2px;margin-bottom:6px;border-bottom:1px solid rgba(180,165,140,.3);padding-bottom:4px;white-space:nowrap}
.eiv-body-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:4px;scrollbar-width:thin}
.eiv-body-list::-webkit-scrollbar{width:3px}
.eiv-body-list::-webkit-scrollbar-thumb{background:rgba(180,165,140,.4);border-radius:2px}
.eiv-body-row{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--ink-soft);padding:4px 6px;background:rgba(255,255,255,.5);border-radius:8px;min-height:24px;cursor:pointer;transition:.15s;-webkit-tap-highlight-color:transparent}
.eiv-body-row:hover{background:rgba(255,255,255,.9);border-color:var(--gold)}
.eiv-body-row.empty{opacity:.6}
.eiv-body-row b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--ink)}
.eiv-body-row span:first-child{font-size:14px;flex:none}
.eiv-body-row span:last-child{flex:none;font-size:9px}
.eiv-footer{flex:none;position:relative;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:0 12px 12px}
.eiv-foot-row{display:flex;justify-content:center;align-items:center;gap:10px}
.eiv-foot-row.batch .eiv-foot-btn,.eiv-foot-row.lock .eiv-foot-btn{flex:1;max-width:none;padding:10px 4px;font-size:12px;letter-spacing:1px}
.eiv-foot-btn.active{background:linear-gradient(180deg,#c0392b,#a32d2d);color:#fff;border-color:var(--cinnabar);box-shadow:0 3px 10px rgba(168,50,50,.35)}
.eiv-sel-wrap{display:flex;align-items:center;gap:3px;font-size:12px;color:var(--ink-soft);white-space:nowrap}
.eiv-sel{padding:9px 2px;border-radius:12px;border:1px solid rgba(180,165,140,.6);background:#faf8f2;color:var(--ink);font-size:12px;font-weight:700;text-align:center}
.eiv-foot-btn.gold{background:linear-gradient(180deg,#caa12f,#a8861f);color:#fff;border-color:#b8941f;box-shadow:0 3px 10px rgba(184,148,31,.3)}
.eiv-foot-btn.gold:hover{box-shadow:0 5px 14px rgba(184,148,31,.4)}
.eiv-foot-btn{flex:1;max-width:120px;padding:12px 6px;border-radius:22px;border:1px solid rgba(180,165,140,.6);background:linear-gradient(180deg,#faf8f2,#ede8d8);color:var(--ink);font-size:14px;font-weight:700;letter-spacing:2px;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.1);transition:.15s;-webkit-tap-highlight-color:transparent}
.eiv-foot-btn:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(0,0,0,.1)}
.eiv-foot-btn.primary{background:linear-gradient(180deg,#c0392b,#a32d2d);color:#fff;border-color:var(--cinnabar);box-shadow:0 3px 10px rgba(168,50,50,.3)}
.eiv-foot-btn.primary:hover{box-shadow:0 5px 14px rgba(168,50,50,.4)}
.eiv-main.aura-purple{--aura:#9b7bb5}
.eiv-main.aura-blue{--aura:#6a9fd0}
.eiv-main.aura-orange{--aura:#c9a060}
.eiv-main.aura-epic{--aura:#c4a44a}
.eiv-main.aura-king{--aura:#5a9f8f}
.eiv-main.aura-god{--aura:#9b7bb5}
.eiv-main.aura-immortal{--aura:#6a8fc0}
.eiv-main.aura-chaos{--aura:#c0392b}
.eiv-main.aura-hongmeng{--aura:#c4a44a}
.eiv-main[class*="aura-"] .eiv-aura{background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--aura) 22%,#fff) 0%,color-mix(in srgb,var(--aura) 10%,transparent) 40%,transparent 70%)}
.eiv-main[class*="aura-"] .eiv-figure{filter:drop-shadow(0 6px 14px rgba(0,0,0,.18)) drop-shadow(0 0 18px color-mix(in srgb,var(--aura) 20%,transparent))}
.eiv-main[class*="aura-"] .eiv-slot:not(.empty){border-color:color-mix(in srgb,var(--aura) 55%,rgba(180,165,140,.5))}
@media(max-width:768px){
  .eiv-title{font-size:16px;letter-spacing:2px}
  .eiv-currency{font-size:11px}
  .eiv-slots-col{flex:0 0 62px}
  .eiv-slot{width:58px;height:58px}
  .eiv-slot-ico{font-size:22px}
  .eiv-slot-name{font-size:8px}
  .eiv-slot-q{font-size:7px}
  .eiv-right{flex:0 0 96px}
  .eiv-figure{width:min(150px,40vw);height:min(220px,48vh)}
  .eiv-aura{width:200px;height:200px}
  .eiv-total-cp{font-size:12px;padding:3px 10px}
  .eiv-body-title{font-size:11px}
  .eiv-body-row{font-size:9px;min-height:22px;padding:3px 5px}
  .eiv-foot-btn{font-size:13px;letter-spacing:1px}
}
@media(max-width:360px){
  .eiv-slots-col{flex:0 0 56px}
  .eiv-slot{width:54px;height:54px}
  .eiv-slot-ico{font-size:20px}
  .eiv-right{flex:0 0 88px}
  .eiv-figure{width:min(130px,38vw);height:min(200px,46vh)}
}
body.lang-en .eiv-title{font-size:14px;letter-spacing:1px}
body.lang-en .eiv-currency span{letter-spacing:0}
body.lang-en .eiv-body-title{letter-spacing:0;font-size:10px}
body.lang-en .eiv-foot-btn{font-size:12px;letter-spacing:0}
body.lang-en .eiv-slot-name{font-size:7px}

/* ============ 设置页（水墨仙侠 / 可滚动避让导航栏） ============ */
.content.view-settings{padding:0!important;overflow-y:auto;-webkit-overflow-scrolling:touch;background:transparent}
.set-ink-view{display:flex;flex-direction:column;min-height:100%;position:relative;background:linear-gradient(160deg,#f5efe2 0%,#f0ece0 52%,#eef1ea 100%)}
.set-ink-view::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 10%,rgba(178,58,46,.06),transparent 45%),radial-gradient(circle at 10% 86%,rgba(60,90,120,.05),transparent 45%);pointer-events:none}
.siv-header{flex:none;position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px 10px;background:linear-gradient(180deg,rgba(245,239,226,.97),rgba(245,239,226,.82));backdrop-filter:blur(6px);border-bottom:1px solid rgba(180,165,140,.25)}
.siv-back{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:1px solid rgba(178,58,46,.3);background:rgba(255,255,255,.7);color:var(--cinnabar);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.siv-title{font-family:'Ma Shan Zheng',cursive;font-size:20px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:10px;letter-spacing:2px}
.siv-line{flex:none;width:28px;height:1px;background:linear-gradient(90deg,transparent,var(--cinnabar))}
.siv-title .siv-line:last-child{background:linear-gradient(90deg,var(--cinnabar),transparent)}
.siv-body{flex:1;padding:10px 14px 66px}
.siv-card{background:rgba(255,255,255,.82);border:1px solid rgba(180,165,140,.25);border-radius:12px;padding:10px 12px;margin-bottom:8px;box-shadow:0 2px 8px rgba(0,0,0,.05);backdrop-filter:blur(6px)}
.siv-card-label{font-family:'Ma Shan Zheng',cursive;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:6px;padding-left:8px;border-left:3px solid var(--cinnabar)}
.siv-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px dashed var(--line);font-size:13px}
.siv-row:last-child{border-bottom:none}
.siv-row input[type=range]{max-width:140px}
.siv-actions{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.siv-actions.account{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}
.siv-actions.account .btn{width:auto;min-width:0;padding:9px 4px;font-size:12px;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.siv-actions .btn{width:100%;padding:9px 6px;font-size:13px}
.siv-lang{display:flex;gap:6px}
.siv-lang .btn{flex:1;padding:7px 4px;font-size:12px;letter-spacing:0}
body.lang-en .siv-title,body.lang-en .siv-card-label{font-family:var(--font-ui,system-ui,sans-serif);letter-spacing:0;font-size:16px}
@media (max-width:768px){
  .siv-body{padding:8px 12px 70px}
  .siv-title{font-size:18px}
}

/* ============ 研学页（学识成就系统） ============ */
.content.view-study{padding:0!important;overflow-y:auto;-webkit-overflow-scrolling:touch;background:transparent}
.study-ink-view{display:flex;flex-direction:column;min-height:100%;position:relative;background:linear-gradient(160deg,#f5efe2 0%,#f0ece0 52%,#eef1ea 100%)}
.study-ink-view::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 8%,rgba(60,90,120,.06),transparent 45%),radial-gradient(circle at 12% 90%,rgba(178,58,46,.05),transparent 45%);pointer-events:none}
.study-header{flex:none;position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px 10px;background:linear-gradient(180deg,rgba(245,239,226,.97),rgba(245,239,226,.82));backdrop-filter:blur(6px);border-bottom:1px solid rgba(180,165,140,.25)}
.study-back{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:1px solid rgba(178,58,46,.3);background:rgba(255,255,255,.7);color:var(--cinnabar);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.study-title{font-family:'Ma Shan Zheng',cursive;font-size:20px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:10px;letter-spacing:2px}
.study-line{flex:none;width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--cinnabar))}
.study-title .study-line:last-child{background:linear-gradient(90deg,var(--cinnabar),transparent)}
.study-cur{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--ink);opacity:.8}
.study-body{flex:1;padding:10px 14px 70px}
.study-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.ss-item{background:rgba(255,255,255,.82);border:1px solid rgba(180,165,140,.25);border-radius:12px;padding:10px 6px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.ss-val{display:block;font-size:18px;font-weight:700;color:var(--cinnabar);font-family:'Ma Shan Zheng',cursive;line-height:1.2}
.ss-label{display:block;font-size:11px;color:var(--ink);opacity:.6;margin-top:2px}
.study-cats-label{font-family:'Ma Shan Zheng',cursive;font-size:14px;color:var(--ink);margin:4px 0 8px;padding-left:8px;border-left:3px solid var(--cinnabar)}
.study-sources{display:flex;flex-direction:column;gap:8px}
.study-src{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.82);border:1px solid rgba(180,165,140,.25);border-radius:12px;padding:12px;cursor:pointer;text-align:left;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.study-src:active{background:rgba(255,255,255,.95)}
.ss-ico{font-size:22px;flex:none}
.ss-name{font-weight:700;color:var(--ink);font-size:14px}
.ss-desc{font-size:11px;color:var(--ink);opacity:.6;margin-left:auto;text-align:right;max-width:52%}
/* 游历见闻卡片 */
.travel-card{background:linear-gradient(150deg,rgba(60,90,120,.09),rgba(255,255,255,.85));border:1px solid rgba(120,140,120,.3);border-radius:14px;padding:12px 14px;margin-bottom:12px;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.travel-card:active{background:linear-gradient(150deg,rgba(60,90,120,.14),rgba(255,255,255,.95))}
.travel-top{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--ink)}
.travel-ico{font-size:20px}
.travel-top b{font-weight:700}
.travel-cnt{margin-left:auto;font-size:16px;font-weight:700;color:var(--jade);font-family:'Ma Shan Zheng',cursive}
.travel-unlocked{font-size:11px;margin-top:6px}
.travel-prog{height:7px;background:rgba(120,140,120,.18);border-radius:4px;overflow:hidden;margin:8px 0 4px}
.travel-prog-fill{height:100%;background:linear-gradient(90deg,var(--jade),#7fae86);border-radius:4px;transition:width .4s}
.travel-next{font-size:11px}
.travel-next b{color:var(--cinnabar)}
.travel-hint{font-size:11px;margin-top:6px;opacity:.7}
/* 游历见闻录弹窗 */
.travel-log{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.tl-row{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.82);border:1px solid rgba(180,165,140,.25);border-radius:10px;padding:10px 12px}
.tl-row.lock{opacity:.62}
.tl-row.done{border-color:rgba(120,150,120,.45);background:rgba(120,150,120,.08)}
.tl-mark{font-size:16px;flex:none;width:22px;text-align:center}
.tl-main{flex:1;min-width:0}
.tl-name{font-weight:700;font-size:14px;color:var(--ink);display:flex;align-items:center;gap:8px}
.tl-need{font-size:11px;font-weight:400}
.tl-reward{font-size:11px;margin-top:2px}
.tl-state{flex:none;font-size:11px;color:var(--ink);opacity:.7}
.tl-ok{color:var(--jade);font-weight:700;opacity:1}
/* 科举答题 */
.quiz-q{font-size:15px;color:var(--ink);margin:8px 0 12px;line-height:1.5}
.quiz-opts{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.quiz-opt{background:rgba(255,255,255,.9);border:1px solid rgba(180,165,140,.4);border-radius:10px;padding:11px 12px;font-size:14px;color:var(--ink);cursor:pointer;text-align:left}
.quiz-opt:active{background:rgba(178,58,46,.1);border-color:var(--cinnabar)}
/* 典籍图鉴 */
.codex-list{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.codex-cat{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.82);border:1px solid rgba(180,165,140,.25);border-radius:10px;padding:10px 12px}
.cc-head{display:flex;align-items:center;gap:8px;font-size:14px}
.cc-ico{font-size:18px}
.codex-read{margin-top:8px}
.codex-entry{background:rgba(178,58,46,.06);border-left:3px solid var(--cinnabar);border-radius:8px;padding:10px 12px;font-size:13px;color:var(--ink);line-height:1.6}
.codex-entry b{color:var(--cinnabar)}
/* 拜访名士 */
.mentor-list{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.mentor-row{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.82);border:1px solid rgba(180,165,140,.25);border-radius:10px;padding:10px 12px;font-size:14px}
.mr-info{display:flex;align-items:center;gap:6px}
.mentor-talk{margin-top:8px}
.mentor-entry{background:rgba(60,90,120,.06);border-left:3px solid var(--jade);border-radius:8px;padding:10px 12px;font-size:13px;color:var(--ink);line-height:1.6}
.mentor-entry b{color:var(--jade)}
/* ====== 典籍图鉴 / 拜访名士 重设计（仿科举：总览 + 阅读/生平）====== */
.codex-cats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:12px 0}
.codex-cat{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.85);border:1px solid rgba(180,165,140,.3);border-radius:12px;padding:12px;cursor:pointer;text-align:left;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.codex-cat:active{background:rgba(255,255,255,.96)}
.codex-cat .cc-ico{font-size:18px}
.codex-cat .cc-name{flex:1}
.codex-cat .cc-prog{font-size:12px}
.codex-card{max-height:88vh;display:flex;flex-direction:column;overflow:hidden}
.codex-subhead{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.link-back{background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:8px;width:30px;height:30px;font-size:16px;line-height:1;cursor:pointer;flex:none}
.codex-entry-list{display:flex;flex-direction:column;gap:8px;overflow:auto;max-height:52vh;margin-bottom:10px;padding-right:2px}
.codex-entry-row{display:flex;align-items:center;justify-content:space-between;gap:8px;background:rgba(255,255,255,.82);border:1px solid rgba(180,165,140,.25);border-radius:10px;padding:11px 12px;cursor:pointer;text-align:left;font-size:14px}
.codex-entry-row.read{border-left:3px solid var(--jade)}
.codex-entry-row .cer-title{flex:1}
.codex-entry-row .cer-state{font-size:12px;flex:none}
.codex-read-panel{overflow:auto;max-height:52vh;margin-bottom:10px}
.codex-text{font-size:15px;line-height:1.9;color:var(--ink);text-align:left;background:rgba(178,58,46,.05);border-left:3px solid var(--cinnabar);border-radius:8px;padding:14px 16px;font-family:'Ma Shan Zheng',cursive}
.mentor-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:12px 0}
.mentor-card{display:flex;flex-direction:column;gap:4px;align-items:flex-start;background:rgba(255,255,255,.85);border:1px solid rgba(180,165,140,.3);border-radius:12px;padding:12px;cursor:pointer;text-align:left;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.mentor-card:active{background:rgba(255,255,255,.96)}
.mentor-card.done{border-left:3px solid var(--jade)}
.mentor-card .mc-state{font-size:12px}
.mentor-bio{overflow:auto;max-height:52vh;margin-bottom:10px}
.mentor-bio p{font-size:15px;line-height:1.9;color:var(--ink);text-align:left;background:rgba(60,90,120,.06);border-left:3px solid var(--jade);border-radius:8px;padding:14px 16px}
.codex-finish,.mentor-finish{width:100%}
.codex-tip,.mentor-tip{margin:8px 0;font-size:12px}
.codex-stat-grid,.mentor-stat-grid{margin-top:8px}
.codex-progress,.mentor-progress{margin:6px auto 2px}
body.lang-en .study-title{font-family:var(--font-ui,system-ui,sans-serif);letter-spacing:0;font-size:16px}

/* ===== 科举答题页 ===== */
.exam-ink-view{display:flex;flex-direction:column;min-height:100%;position:relative;background:linear-gradient(160deg,#f5efe2 0%,#f0ece0 52%,#eef1ea 100%)}
.exam-ink-view::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 8%,rgba(60,90,120,.06),transparent 45%),radial-gradient(circle at 12% 90%,rgba(178,58,46,.05),transparent 45%);pointer-events:none}
.exam-header{flex:none;position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px 10px;background:linear-gradient(180deg,rgba(245,239,226,.97),rgba(245,239,226,.82));backdrop-filter:blur(6px);border-bottom:1px solid rgba(180,165,140,.25)}
.exam-back{position:absolute;left:12px;font-size:18px;background:rgba(255,255,255,.7);border:1px solid rgba(180,165,140,.3);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.exam-title{font-family:'Ma Shan Zheng',cursive;font-size:20px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:10px;letter-spacing:2px}
.exam-line{flex:none;width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--cinnabar))}
.exam-title .exam-line:last-child{background:linear-gradient(90deg,var(--cinnabar),transparent)}
.exam-cur{position:absolute;right:12px;font-size:12px;color:var(--ink-soft)}
.exam-hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px 18px;text-align:center}
.exam-scroll{font-size:54px;filter:drop-shadow(0 4px 10px rgba(178,58,46,.2))}
.exam-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:420px}
.esg-item{background:rgba(255,255,255,.85);border:1px solid rgba(180,165,140,.3);border-radius:14px;padding:14px 6px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.esg-val{display:block;font-size:26px;font-weight:800;color:var(--cinnabar);line-height:1.1}
.esg-lbl{display:block;font-size:12px;color:var(--ink-soft);margin-top:3px}
.exam-progress{position:relative;width:100%;max-width:420px;height:18px;background:rgba(0,0,0,.08);border-radius:10px;overflow:hidden}
.exam-progress-fill{height:100%;background:linear-gradient(90deg,var(--jade),#6fc2a0);transition:width .3s;border-radius:10px}
.exam-progress-txt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#3a3a3a}
.exam-tip{font-size:12px;max-width:380px;line-height:1.6}
.exam-actions{display:flex;flex-direction:column;gap:10px;padding:0 18px 24px;max-width:420px;width:100%;margin:0 auto}
.exam-btn{width:100%;padding:13px;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;border:1px solid transparent;transition:.15s}
.exam-btn.primary{background:linear-gradient(180deg,var(--cinnabar),#a83232);color:#fff;box-shadow:0 4px 12px rgba(178,58,46,.3)}
.exam-btn.primary:active{transform:translateY(1px)}
.exam-btn.ghost{background:rgba(255,255,255,.7);color:var(--ink);border-color:rgba(180,165,140,.35)}
.exam-quiz{flex:1;display:flex;flex-direction:column;gap:16px;padding:20px 18px}
.exam-q{font-size:18px;font-weight:700;color:var(--ink);line-height:1.5;background:rgba(255,255,255,.8);border:1px solid rgba(180,165,140,.25);border-left:4px solid var(--cinnabar);border-radius:10px;padding:14px 16px;text-align:left}
.exam-opts{display:flex;flex-direction:column;gap:10px}
.quiz-opt{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:rgba(255,255,255,.82);border:1px solid rgba(180,165,140,.3);border-radius:12px;padding:14px 14px;font-size:15px;color:var(--ink);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.04);transition:.12s}
.quiz-opt:active{background:rgba(255,255,255,.95)}
.quiz-opt.correct{background:rgba(74,155,90,.18);border-color:var(--jade);color:#2f6b41;font-weight:700}
.quiz-opt.wrong{background:rgba(178,58,46,.12);border-color:var(--cinnabar);color:#a83232}
.exam-result{padding:10px 14px;border-radius:10px;font-size:14px;font-weight:700;text-align:center}
.exam-result.ok{background:rgba(74,155,90,.16);color:#2f6b41}
.exam-result.bad{background:rgba(178,58,46,.12);color:#a83232}
.exam-quiz-actions{display:flex;flex-direction:column;gap:10px;margin-top:4px}
body.lang-en .exam-title{font-family:var(--font-ui,system-ui,sans-serif);letter-spacing:0;font-size:16px}

/* ===== 社区页 ===== */
.content.view-community{padding:0!important;overflow:hidden;background:transparent}
.community-ink-view{display:flex;flex-direction:column;height:100%;position:relative;background:linear-gradient(160deg,#f5efe2 0%,#f0ece0 52%,#eef1ea 100%)}
.community-header{flex:none;position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px 10px;background:linear-gradient(180deg,rgba(245,239,226,.97),rgba(245,239,226,.82));backdrop-filter:blur(6px);border-bottom:1px solid rgba(180,165,140,.25)}
.comm-tabs{flex:none;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:10px 14px 8px}
.comm-tab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px;border-radius:12px;border:1px solid rgba(180,165,140,.25);background:rgba(255,255,255,.7);color:var(--ink);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.04)}
.comm-tab.on{border-color:var(--cinnabar);background:rgba(178,58,46,.1);color:var(--cinnabar);font-weight:600}
.comm-tab .ct-ico{font-size:20px;line-height:1}
.comm-tab .ct-txt{font-size:12px}
.community-content{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 14px 70px}
/* 复用旧视图（集市=viewTrade/榜单/动态）时，去掉其内部重复标题与面板外框，避免与社区 Tab 重复 */
.community-content .panel{margin:0;box-shadow:none;border:none;background:transparent;padding:0}
.community-content .panel > h2{display:none}
.community-content .panel > h3{color:var(--ink)}
.comm-friends{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:60px 20px;text-align:center;color:var(--ink);opacity:.75}
.news-stream{font-size:13px;line-height:1.7;border:1px solid rgba(180,165,140,.2);border-radius:12px;background:rgba(255,255,255,.6);padding:10px 12px}
.news-row{padding:6px 0;border-bottom:1px dashed var(--line)}
.news-row:last-child{border-bottom:none}
.news-row.epic{color:var(--cinnabar)}
.news-time{font-size:11px}
body.lang-en .community-content .panel > h3{font-family:var(--font-ui,system-ui,sans-serif);font-weight:600}

/* ===== 修仙境界页 ===== */
.content.view-realm{padding:0!important;overflow-y:auto;-webkit-overflow-scrolling:touch;background:linear-gradient(160deg,#f3eee1 0%,#eef0ea 50%,#ece9f0 100%)}
.realm-ink-view{display:flex;flex-direction:column;min-height:100%;position:relative;background:linear-gradient(160deg,#f3eee1 0%,#eef0ea 50%,#ece9f0 100%)}
.realm-ink-view::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 6%,rgba(90,70,130,.07),transparent 45%),radial-gradient(circle at 14% 92%,rgba(178,58,46,.05),transparent 45%);pointer-events:none}
.realm-loading{flex:1;display:flex;align-items:center;justify-content:center;font-family:'Ma Shan Zheng',cursive;font-size:20px;color:var(--ink-soft);letter-spacing:2px;min-height:60vh}
.realm-header{flex:none;position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px 10px;background:linear-gradient(180deg,rgba(243,238,225,.97),rgba(243,238,225,.82));backdrop-filter:blur(6px);border-bottom:1px solid rgba(180,165,140,.25)}
.realm-back{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:1px solid rgba(178,58,46,.3);background:rgba(255,255,255,.7);color:var(--cinnabar);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.realm-title{font-family:'Ma Shan Zheng',cursive;font-size:20px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:10px;letter-spacing:2px}
.realm-line{flex:none;width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--cinnabar))}
.realm-title .realm-line:last-child{background:linear-gradient(90deg,var(--cinnabar),transparent)}
.realm-pillbtn{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:3px;font-size:12px;padding:5px 10px;border-radius:14px;border:1px solid rgba(120,90,160,.35);background:rgba(255,255,255,.7);color:#6b4b9a;cursor:pointer}
.realm-pillbtn b{color:#6b4b9a;font-size:14px}
.realm-body{flex:1;padding:12px 14px 74px}
/* 当前境界横幅 */
.realm-banner{position:relative;text-align:center;padding:18px 12px 16px;margin-bottom:12px;border-radius:16px;border:1px solid rgba(180,165,140,.3);background:linear-gradient(180deg,rgba(255,253,247,.9),rgba(248,244,236,.7));overflow:hidden;box-shadow:0 3px 12px rgba(0,0,0,.06)}
.rb-halo{position:absolute;left:50%;top:44%;width:200px;height:200px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(184,147,47,.16),transparent 68%);pointer-events:none;animation:rbhalo 4s ease-in-out infinite}
@keyframes rbhalo{0%,100%{opacity:.6}50%{opacity:1}}
.rb-tier{position:relative;font-size:12px;color:var(--ink-faint);letter-spacing:2px}
.rb-name{position:relative;font-family:'Ma Shan Zheng',cursive;font-size:34px;font-weight:700;color:var(--cinnabar);line-height:1.1;margin:2px 0}
.rb-code{position:relative;font-size:13px;color:var(--ink-soft)}
.rb-avatars{position:relative;margin-top:8px;font-size:12px;color:var(--ink);opacity:.8}
.rb-avatars b{color:var(--gold);font-size:15px;font-family:'Ma Shan Zheng',cursive}
/* 八境阶梯 */
.realm-ladder{display:flex;gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:2px 2px 8px;margin-bottom:12px}
.realm-ladder::-webkit-scrollbar{height:3px}
.realm-ladder::-webkit-scrollbar-thumb{background:var(--line);border-radius:2px}
.rl-node{flex:none;width:52px;text-align:center;opacity:.55}
.rl-dot{width:32px;height:32px;margin:0 auto 3px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;border:1.5px solid var(--line);background:rgba(255,255,255,.6);color:var(--ink-soft)}
.rl-lbl{font-size:11px;color:var(--ink);white-space:nowrap}
.rl-av{font-size:9px;color:var(--ink-faint)}
.rl-done{opacity:.9}
.rl-done .rl-dot{border-color:var(--jade);color:var(--jade);background:rgba(90,138,102,.12)}
.rl-cur{opacity:1}
.rl-cur .rl-dot{border-color:var(--cinnabar);color:#fff;background:var(--cinnabar);box-shadow:0 0 0 3px rgba(178,58,46,.18);animation:rlpulse 1.8s ease-in-out infinite}
.rl-cur .rl-lbl{color:var(--cinnabar);font-weight:700}
@keyframes rlpulse{0%,100%{box-shadow:0 0 0 3px rgba(178,58,46,.18)}50%{box-shadow:0 0 0 6px rgba(178,58,46,.05)}}
/* 渡劫卡片 */
.realm-trib-card{background:rgba(255,253,247,.85);border:1px solid rgba(180,165,140,.3);border-radius:14px;padding:14px;margin-bottom:12px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.rt-head{font-family:'Ma Shan Zheng',cursive;font-size:17px;color:var(--ink);margin-bottom:10px;padding-left:8px;border-left:3px solid var(--cinnabar)}
.rt-sub{font-size:12px;color:var(--ink-faint);margin-left:6px}
.rt-gate{margin-bottom:9px}
.rt-gate-top{display:flex;justify-content:space-between;font-size:12px;color:var(--ink);margin-bottom:4px}
.rt-gate.no .rt-gate-top{color:var(--cinnabar)}
.rt-gate.ok .rt-gate-top{color:var(--jade)}
.rt-bar{height:8px;background:rgba(180,165,140,.2);border-radius:5px;overflow:hidden}
.rt-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--gold),var(--cinnabar))}
.rt-gate.ok .rt-fill{background:linear-gradient(90deg,var(--jade),#7cb389)}
.rt-tip{font-size:12px;line-height:1.6;padding:8px 10px;border-radius:8px;margin:8px 0 4px}
.rt-tip.warn{background:rgba(184,147,47,.1);color:#8a6d1f;border:1px solid rgba(184,147,47,.25)}
.rt-tip.danger{background:rgba(178,58,46,.09);color:var(--cinnabar);border:1px solid rgba(178,58,46,.25)}
.rt-tip.ok{background:rgba(90,138,102,.1);color:var(--jade);border:1px solid rgba(90,138,102,.25)}
.rt-tip b{font-weight:700}
.rt-btn{width:100%;margin-top:8px;padding:12px;border-radius:10px;border:none;font-size:15px;font-weight:700;letter-spacing:2px;color:#fff;cursor:pointer;background:linear-gradient(135deg,#c0392b,#8e2820);box-shadow:0 4px 12px rgba(178,58,46,.3)}
.rt-btn.pill{background:linear-gradient(135deg,#7b52b0,#5a3a8a);box-shadow:0 4px 12px rgba(120,80,160,.3)}
.rt-btn:disabled{background:rgba(150,140,125,.4);color:rgba(255,255,255,.7);box-shadow:none;cursor:not-allowed}
.rt-max{text-align:center;font-family:'Ma Shan Zheng',cursive;font-size:18px;color:var(--gold);letter-spacing:2px;padding:12px 0}
/* 化身派遣 */
.realm-avatar-card{background:rgba(255,253,247,.85);border:1px solid rgba(180,165,140,.3);border-radius:14px;padding:14px;margin-bottom:12px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.ra-head{display:flex;align-items:center;font-family:'Ma Shan Zheng',cursive;font-size:16px;color:var(--ink);padding-left:8px;border-left:3px solid var(--gold)}
.ra-cfg{margin-left:auto;font-size:12px;padding:5px 12px;border-radius:14px;border:1px solid var(--gold);background:rgba(184,147,47,.1);color:var(--gold);font-weight:700;cursor:pointer;font-family:inherit}
.ra-sum{font-size:12px;color:var(--ink-soft);margin:8px 0}
.ra-sum b{color:var(--cinnabar)}
.ra-lines{display:flex;flex-direction:column;gap:6px}
.ra-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;background:rgba(255,255,255,.6);border:1px solid rgba(180,165,140,.2);font-size:13px}
.ra-ico{font-size:16px;flex:none}
.ra-lbl{color:var(--ink);min-width:40px}
.ra-cnt{margin-left:auto;color:var(--ink);font-weight:700}
.ra-rate{min-width:76px;text-align:right;color:var(--jade);font-size:12px}
.ra-acc{flex-basis:100%;font-size:11px;color:var(--ink-faint);margin-top:2px;padding-top:4px;border-top:1px dashed rgba(180,165,140,.28)}
.ra-note{font-size:11px;color:var(--ink-faint);margin-top:8px;line-height:1.5}
/* 挑战天道 */
.realm-tian-card{background:rgba(178,58,46,.04);border:1px solid rgba(178,58,46,.2);border-radius:14px;padding:14px;margin-bottom:12px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.rtian-head{display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:15px;font-weight:700;color:var(--cinnabar);user-select:none}
.rtian-arrow{font-size:12px;color:var(--ink-soft);transition:transform .2s}
.rtian-body{padding-top:10px}
.rtian-sum{font-size:13px;color:var(--ink);line-height:1.6;margin-bottom:6px}
.rtian-hint{font-size:11px;margin-bottom:10px}
.rtian-btn{width:100%}
@keyframes spin{to{transform:rotate(360deg)}}
/* 天道选阶网格 */
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}
.tgrid-cell{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;background:rgba(255,255,255,.85);border:1px solid rgba(180,165,140,.3);border-radius:12px;padding:10px 4px;cursor:pointer;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.05);transition:.15s}
.tgrid-cell:active{transform:scale(.97)}
.tgrid-cell.tgrid-ok{border-color:var(--jade);background:rgba(60,180,90,.07)}
.tgrid-cell.tgrid-go{border-color:var(--gold);background:rgba(201,162,39,.08)}
.tgrid-cell.tgrid-lock{opacity:.5}
.tc-t{font-size:10px;color:var(--ink-soft)}
.tc-code{font-size:14px;font-weight:700;color:var(--ink)}
.tc-q{font-size:10px;color:var(--ink-soft)}
.tc-cp{font-size:10px}
.tc-badge{position:absolute;top:-5px;right:-5px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.tgrid-ok .tc-badge{background:var(--jade);color:#fff}
.tgrid-go .tc-badge{background:var(--gold);color:#fff}
.tgrid-lock .tc-badge{background:#9e978c;color:#fff}
.tc-drop{position:absolute;top:-4px;left:-4px;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;background:var(--cinnabar);box-shadow:0 0 6px rgba(168,50,50,.6)}
/* 渡劫弹窗内容 */
.trib-modal{padding:4px 2px}
.tm-target{text-align:center;font-size:16px;color:var(--ink);line-height:1.5;margin-bottom:12px}
.tm-target b{color:var(--cinnabar);font-family:'Ma Shan Zheng',cursive;font-size:20px}
.tm-target .muted{font-size:12px;color:var(--ink-faint)}
.tm-gates{display:flex;gap:8px;margin-bottom:12px}
.tm-gate{flex:1;text-align:center;padding:8px;border-radius:9px;font-size:13px;border:1px solid var(--line)}
.tm-gate.ok{color:var(--jade);background:rgba(90,138,102,.1);border-color:rgba(90,138,102,.3)}
.tm-gate.no{color:var(--cinnabar);background:rgba(178,58,46,.08);border-color:rgba(178,58,46,.3)}
.tm-warn{font-size:13px;line-height:1.6;color:var(--cinnabar);background:rgba(178,58,46,.08);border:1px solid rgba(178,58,46,.25);border-radius:9px;padding:10px 12px;margin-bottom:12px}
.tm-warn b{font-weight:700}
.tm-ok{font-size:13px;color:var(--jade);text-align:center;margin-bottom:12px}
.tm-btns{display:flex;gap:10px}
.tm-btns .btn{flex:1}
/* 化身调配弹窗 */
.disp-modal{padding:4px 2px}
.disp-sum{text-align:center;font-size:14px;color:var(--ink);margin-bottom:12px}
.disp-sum b{color:var(--cinnabar);font-size:16px}
.disp-sum b.over{color:#d4342a}
.disp-lines{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.disp-line{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.6);border:1px solid rgba(180,165,140,.25)}
.dl-ico{font-size:18px;flex:none}
.dl-name{font-size:13px;color:var(--ink);display:flex;flex-direction:column;line-height:1.3}
.dl-metric{font-size:10px;color:var(--ink-faint)}
.dl-rate{margin-left:auto;font-size:11px;color:var(--jade);min-width:70px;text-align:right}
.dl-step{display:flex;align-items:center;gap:8px;flex:none}
.dl-btn{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:18px;line-height:1;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center}
.dl-btn:active{background:rgba(178,58,46,.1)}
.dl-cnt{min-width:24px;text-align:center;font-weight:700;color:var(--ink)}
.disp-quick{display:flex;gap:6px;justify-content:center;margin-bottom:12px}
.disp-btns{display:flex;gap:10px}
.disp-btns .btn{flex:1}
/* 天劫丹图鉴弹窗 */
.pill-modal{padding:2px}
.pill-hero{text-align:center;margin-bottom:12px}
.pill-orb{font-size:44px;animation:pillfloat 3s ease-in-out infinite}
@keyframes pillfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.pill-title{font-family:'Ma Shan Zheng',cursive;font-size:24px;color:#6b4b9a;letter-spacing:3px}
.pill-have{font-size:12px;color:var(--ink-soft);margin-top:2px}
.pill-have b{color:#6b4b9a;font-size:15px}
.pill-lore{font-size:12px;line-height:1.8;color:var(--ink-soft);background:rgba(120,90,160,.06);border-left:3px solid #7b52b0;border-radius:8px;padding:10px 12px;margin-bottom:10px;text-indent:2em}
.pill-rarity{text-align:center;font-size:11px;color:#8a6d1f;letter-spacing:1px;margin-bottom:12px}
.pill-src-label{font-family:'Ma Shan Zheng',cursive;font-size:14px;color:var(--ink);margin-bottom:8px;padding-left:8px;border-left:3px solid #7b52b0}
.pill-srcs{display:flex;flex-direction:column;gap:8px}
.pill-src{background:rgba(255,255,255,.7);border:1px solid rgba(180,165,140,.25);border-radius:10px;padding:10px 12px}
.ps-top{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--ink)}
.ps-top b{font-weight:700}
.ps-tag{font-size:10px;padding:2px 8px;border-radius:10px;background:rgba(120,90,160,.12);color:#6b4b9a;font-weight:700}
.ps-cond{font-size:11px;color:var(--ink-soft);margin:4px 0}
.ps-rate{font-size:11px;color:var(--ink-faint)}
.ps-rate b{color:var(--cinnabar)}
/* 渡劫演出全屏层 */
.trib-overlay{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(circle at 50% 30%,rgba(40,30,60,.5),rgba(10,8,18,.92))}
.trib-overlay.fadeout{opacity:0;transition:opacity .6s}
.trib-sky{position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(90,70,140,.4),transparent 60%)}
.trib-cloud{position:absolute;top:0;left:0;right:0;height:38%;background:radial-gradient(ellipse at 50% 0%,rgba(60,50,90,.9),rgba(30,24,48,.4) 70%,transparent);animation:tcloud 3s ease-in-out infinite}
@keyframes tcloud{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.08);opacity:1}}
.trib-figure{position:relative;font-size:64px;z-index:3;filter:drop-shadow(0 0 12px rgba(180,160,255,.6));animation:tfig 1.4s ease-in-out infinite}
@keyframes tfig{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.04)}}
.trib-bolt{position:absolute;top:8%;width:4px;height:0;background:linear-gradient(180deg,#fff,#b39cff,transparent);box-shadow:0 0 14px #b39cff,0 0 30px #7b52ff;opacity:0}
.trib-overlay.charging .trib-bolt-1{left:38%;animation:tbolt 0.9s linear infinite;animation-delay:.1s}
.trib-overlay.charging .trib-bolt-2{left:52%;animation:tbolt 0.9s linear infinite;animation-delay:.45s}
.trib-overlay.charging .trib-bolt-3{left:60%;animation:tbolt 0.9s linear infinite;animation-delay:.7s}
@keyframes tbolt{0%{height:0;opacity:0}20%{height:44%;opacity:1}40%{opacity:.3}60%{opacity:1}100%{height:44%;opacity:0}}
.trib-word{position:relative;z-index:3;margin-top:24px;font-family:'Ma Shan Zheng',cursive;font-size:24px;color:#eee;text-align:center;line-height:1.5;letter-spacing:2px;text-shadow:0 0 12px rgba(180,160,255,.7)}
.trib-word b{color:#ffd76a;font-size:30px}
.tw-sub{font-size:15px;color:#e5b3ad;font-family:var(--font-ui,system-ui);letter-spacing:0}
.trib-overlay.success{background:radial-gradient(circle at 50% 40%,rgba(184,147,47,.4),rgba(20,16,10,.92))}
.trib-overlay.success .trib-cloud{background:radial-gradient(ellipse at 50% 20%,rgba(255,220,120,.5),transparent 70%);animation:none}
.trib-overlay.success .trib-figure{animation:tsucc 1.6s ease-in-out infinite;filter:drop-shadow(0 0 20px rgba(255,215,110,.9))}
@keyframes tsucc{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.trib-overlay.fail{background:radial-gradient(circle at 50% 30%,rgba(140,40,30,.45),rgba(15,8,8,.92))}
.trib-overlay.fail .trib-figure{animation:tfail .5s ease-out}
@keyframes tfail{0%{transform:scale(1.2);opacity:1}50%{transform:scale(.9) rotate(-4deg)}100%{transform:scale(1)}}
/* 英文模式字体 */
body.lang-en .realm-title,body.lang-en .rb-name,body.lang-en .rt-head,body.lang-en .ra-head,body.lang-en .pill-title,body.lang-en .pill-src-label{font-family:var(--font-ui,system-ui,sans-serif);letter-spacing:0}
/* ---------- 社区发帖框 ---------- */
.comm-post{background:rgba(255,255,255,.55);border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:6px}
.comm-post-input{width:100%;min-height:54px;resize:vertical;border:1px solid var(--line);border-radius:8px;padding:8px;font-size:13px;font-family:inherit;background:#fff;box-sizing:border-box}
.comm-post-input:focus{outline:none;border-color:var(--gold)}
.comm-post-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
@media (max-width:380px){
  .comm-post-foot{flex-direction:column;align-items:stretch}
  .comm-post-foot .btn{width:100%}
}
/* ---------- 区域聊天室 ---------- */
.chat-stream{font-size:13px;line-height:1.7;border:1px solid rgba(180,165,140,.2);border-radius:12px;background:rgba(255,255,255,.6);padding:10px 12px}
.chat-row{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px dashed var(--line)}
.chat-row:last-child{border-bottom:none}
.chat-row.me{background:rgba(178,58,46,.06);margin:0 -12px;padding:6px 12px;border-radius:8px}
.chat-msg{word-break:break-word;flex:1}
.chat-time{font-size:11px;white-space:nowrap}

/* ---------- 拍卖上架弹窗 ---------- */
.auction-list-modal h4{margin:14px 0 8px;font-size:15px;color:var(--cinnabar);border-left:3px solid var(--cinnabar);padding-left:8px}
.auction-list-grid{display:flex;flex-direction:column;gap:8px}
.auction-list-row{display:grid;grid-template-columns:1fr 90px 64px;align-items:center;gap:8px;padding:8px;border-radius:8px;background:rgba(255,255,255,.5);border:1px solid var(--line)}
.al-info{min-width:0}
.al-name{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.al-meta{font-size:11px;color:var(--muted)}
.al-price input{border:1px solid var(--line);border-radius:6px;padding:4px 6px;font-size:13px;background:#fff}
.al-action .btn{width:100%;padding:4px 0;font-size:12px}
.quality-白 .al-name{color:var(--q-white,#888)}
.quality-绿 .al-name{color:var(--q-green,#2e7d32)}
.quality-蓝 .al-name{color:var(--q-blue,#1976d2)}
.quality-紫 .al-name{color:var(--q-purple,#7b1fa2)}
.quality-橙 .al-name{color:var(--q-orange,#e65100)}
.quality-极品 .al-name,.quality-王器 .al-name,.quality-圣器 .al-name,.quality-神器 .al-name,.quality-仙器 .al-name,.quality-混沌 .al-name,.quality-鸿蒙 .al-name{color:var(--q-epic,#b71c1c)}
@media (max-width:380px){
  .auction-list-row{grid-template-columns:1fr 80px 56px}
  .al-name{font-size:13px}
}