/* ===================================================================
   三国·战略版  —  墨金国风设计系统
   墨底 / 描金 / 朱印 / 宋题
   =================================================================== */

:root{
  /* 暖纸层（指尖无双向：米纸底 + 奶油木面板） */
  --ink-0:#f0e3c4;  --ink-1:#f6ecd4;  --ink-2:#fdf6e2;
  --panel-1:#fffdf2; --panel-2:#f9efd6; --panel-3:#efddae;
  /* 金 */
  --gold-lt:#f8ecc0; --gold:#e0c076; --gold-dk:#9c7a3a; --gold-dp:#6b511f;
  /* 朱 / 玉 */
  --cinnabar:#b8402f; --jade:#5f9e79; --azure:#5b8dd9; --violet:#a678d8;
  /* 字 */
  --tx:#4a3418; --tx-2:#8a6d3f; --tx-3:#a6906a; --tx-4:#c4af85;
  /* 线 */
  --line:rgba(160,110,35,.30); --line-2:rgba(160,110,35,.55);
  /* 字体 */
  --f-title:"STZhongsong","华文中宋","STKaiti","KaiTi","Songti SC","SimSun",serif;
  --f-body:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Helvetica Neue",Arial,sans-serif;
  /* 圆角：卡通用大圆角 */
  --r-s:10px; --r-m:14px; --r-l:18px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--ink-0);
  font-family:var(--f-body);color:var(--tx);user-select:none;font-size:14px}
button{font-family:inherit;cursor:pointer;border:none;outline:none;background:none;color:inherit}
input{font-family:inherit}
.hidden{display:none!important}
::selection{background:rgba(224,192,118,.35)}

/* 全局绢布颗粒 */
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ============================== 通用组件 ============================== */

/* 按钮：浮雕金属质感 */
.btn{position:relative;padding:8px 18px;border-radius:var(--r-s);font-size:13px;letter-spacing:1px;
  color:var(--tx);
  background:linear-gradient(180deg,var(--panel-1) 0%,var(--panel-3) 100%);
  border:2px solid var(--line-2);
  box-shadow:inset 0 1px 0 rgba(255,252,235,.8), inset 0 -2px 0 rgba(150,105,40,.18), 0 2px 0 rgba(150,105,40,.35), 0 3px 7px rgba(120,84,30,.22);
  transition:transform .12s, box-shadow .12s, background .15s;}
.btn:hover{background:linear-gradient(180deg,#fffdf4 0%,#f4e4bd 100%);
  border-color:rgba(200,150,60,.9);transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,252,235,.9), 0 3px 0 rgba(150,105,40,.35), 0 5px 12px rgba(120,84,30,.28)}
.btn:active{transform:translateY(1px);
  box-shadow:inset 0 2px 5px rgba(140,100,40,.35);}
.btn:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.7);transform:none}

/* 金按钮 */
.btn-gold{background:linear-gradient(180deg,#f4dd92 0%,#d8b04e 48%,#9c7a36 100%);
  border-color:#f8ecc0;color:#2b1c05;font-weight:700;
  text-shadow:0 1px 0 rgba(255,242,205,.55);
  box-shadow:inset 0 1px 0 rgba(255,250,225,.7), inset 0 -2px 0 rgba(90,60,10,.4), 0 2px 0 #6b511f, 0 4px 12px rgba(120,84,30,.32)}
.btn-gold:hover{background:linear-gradient(180deg,#fae6a8 0%,#dcb04a 48%,#a5761f 100%);
  box-shadow:inset 0 1px 0 rgba(255,252,235,.85), 0 3px 0 #6b511f, 0 6px 16px rgba(224,192,118,.32)}
.btn-gold:active{box-shadow:inset 0 2px 6px rgba(90,60,10,.55)}
.btn-sm{padding:5px 12px;font-size:12px}
/* 幽灵按钮：已达上限 */
.btn-ghost{background:linear-gradient(180deg,rgba(255,251,238,.7) 0%,rgba(240,222,180,.78) 100%);
  border-color:rgba(216,178,94,.3);color:var(--tx-3);font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,228,170,.06)}

/* 面板 */
.panel{background:linear-gradient(165deg,var(--panel-1),#15110d);
  border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:inset 0 1px 0 rgba(255,228,170,.06), 0 3px 10px rgba(120,84,30,.30)}

/* 印章（汉字徽标） */
.seal{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  font-family:var(--f-title);font-weight:700;color:#2a1c06;-webkit-text-fill-color:#2a1c06;
  text-shadow:0 1px 0 rgba(255,245,215,.45);
  background:radial-gradient(circle at 34% 26%,#f6e2a6,#d6ab40 62%,#9a7430);
  border:1px solid rgba(255,240,200,.5);
  box-shadow:inset 0 1px 0 rgba(255,250,225,.6), 0 1px 3px rgba(120,84,30,.32)}

/* ============================== 启动页 ============================== */
.boot{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(ellipse 70% 50% at 50% 22%,rgba(224,192,118,.13),transparent 70%),
    radial-gradient(ellipse 90% 70% at 50% 110%,rgba(184,64,47,.10),transparent 70%),
    linear-gradient(180deg,#f2e3c0 0%,#f0e3c4 100%);
  animation:fadein .5s}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.boot-inner{text-align:center;max-width:820px;padding:24px;position:relative;z-index:1}

.boot-title{margin:0 0 10px;font-family:var(--f-title);font-weight:700;
  font-size:52px;letter-spacing:14px;text-indent:14px;
  background:linear-gradient(180deg,#fff3d0 0%,#e8c66e 45%,#b8893a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(120,84,30,.40)) drop-shadow(0 0 22px rgba(224,192,118,.42))}
.boot-sub{margin:0 0 8px;font-family:var(--f-title);font-size:14px;letter-spacing:8px;
  text-indent:8px;color:var(--tx-3)}
.boot-rule{width:300px;height:1px;margin:0 auto 14px;
  background:linear-gradient(90deg,transparent,var(--gold-dk) 20%,var(--gold-lt) 50%,var(--gold-dk) 80%,transparent);
  position:relative}
.boot-rule::after{content:'◆';position:absolute;left:50%;top:-7px;transform:translateX(-50%) rotate(45deg);
  font-size:8px;color:var(--gold);background:#0f0d0a;padding:0 5px;line-height:1}

.boot-form{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:14px}
.boot-input{width:280px;padding:11px 16px;border-radius:var(--r-s);
  background:linear-gradient(180deg,#fffdf4,#f6ecd2);color:var(--tx);
  border:1px solid rgba(216,178,94,.3);font-size:14px;text-align:center;outline:none;
  box-shadow:inset 0 2px 6px rgba(120,84,30,.40);transition:.15s;letter-spacing:2px}
.boot-input:focus{border-color:var(--gold);box-shadow:inset 0 2px 6px rgba(120,84,30,.40), 0 0 0 3px rgba(224,192,118,.14)}
.boot-input::placeholder{color:var(--tx-4);letter-spacing:1px}
.boot-input.sm{width:190px;font-size:12px;padding:7px 12px;letter-spacing:0}

/* 势力选择：军旗卡 */
.boot-forces{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.force-card{width:152px;padding:20px 12px 14px;border-radius:var(--r-s);cursor:pointer;
  position:relative;transition:transform .18s cubic-bezier(.2,.9,.3,1.2), box-shadow .18s, border-color .18s;
  background:linear-gradient(170deg,#2b2118 0%,#f6ecd4 100%);
  border:1px solid rgba(216,178,94,.2);
  box-shadow:inset 0 1px 0 rgba(255,228,170,.05), 0 3px 8px rgba(120,84,30,.30)}
.force-card:hover{transform:translateY(-4px);border-color:rgba(224,192,118,.6);
  box-shadow:0 8px 20px rgba(120,84,30,.35)}
.force-card.sel{border-color:#8a6215;transform:translateY(-5px);
  box-shadow:0 0 0 1px rgba(248,236,192,.35), 0 0 26px rgba(224,192,118,.35), 0 10px 22px rgba(120,84,30,.35)}
.force-card.sel::after{content:'✓';position:absolute;right:-7px;top:-7px;width:22px;height:22px;
  line-height:22px;text-align:center;border-radius:50%;font-size:12px;font-weight:800;color:#2b1c05;
  background:linear-gradient(180deg,#f4dd92,#cea63a);
  box-shadow:0 2px 6px rgba(120,84,30,.35), inset 0 1px 0 rgba(255,250,225,.7)}
.fc-char{font-family:var(--f-title);font-size:46px;line-height:1;font-weight:700;margin-bottom:8px;
  text-shadow:0 2px 0 rgba(120,84,30,.35)}
.fc-name{font-family:var(--f-title);font-size:16px;font-weight:700;letter-spacing:4px;color:var(--tx)}
.fc-desc{font-size:11px;color:var(--tx-3);margin-top:7px;line-height:1.7}
.force-wei .fc-char{color:#6f9ee6}.force-shu .fc-char{color:#79c06d}
.force-wu .fc-char{color:#e88a6c}.force-qun .fc-char{color:#dcb34f}

.boot-srv{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--tx-3);letter-spacing:1px}
.big-btn{padding:13px 52px;font-size:17px;letter-spacing:8px;text-indent:8px;font-family:var(--f-title);font-weight:700}
.boot-status{min-height:20px;font-size:12px;color:var(--tx-3);white-space:pre-line;margin-bottom:6px;letter-spacing:1px}
.boot-status.ok{color:var(--jade)}
.boot-status.bad{color:#e08a72}
.boot-tip{font-size:11.5px;color:var(--tx-4);line-height:1.9;margin-top:6px}

/* ---- 启动页第一屏：注册 / 登录 入口 ---- */
.entry-cards{display:flex;flex-direction:column;gap:12px;align-items:center;margin:20px 0 14px}
.entry-card{position:relative;overflow:hidden;
  display:flex;align-items:center;gap:14px;width:min(430px,88vw);padding:14px 16px;
  text-align:left;cursor:pointer;color:var(--tx);
  border-radius:var(--r-m);border:1px solid rgba(216,178,94,.22);
  background:linear-gradient(165deg,#2b2118 0%,#f6ecd4 100%);
  box-shadow:inset 0 1px 0 rgba(255,228,170,.05),0 3px 10px rgba(120,84,30,0.42);
  transition:transform .16s cubic-bezier(.2,.9,.3,1.2),border-color .16s,box-shadow .16s}
/* 左侧光条：hover 时点亮，作为「可进入」的指向 */
.entry-card::before{content:'';position:absolute;left:0;top:14%;bottom:14%;width:3px;
  border-radius:0 3px 3px 0;opacity:0;transition:opacity .18s;
  background:linear-gradient(180deg,var(--gold-lt),var(--gold-dk))}
.entry-card:hover::before{opacity:1}
.entry-card:hover{transform:translateY(-2px);border-color:rgba(224,192,118,.6);
  box-shadow:0 10px 22px rgba(120,84,30,.35)}
.entry-card:active{transform:translateY(0)}
.ec-ico{flex:0 0 44px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-title);font-size:23px;font-weight:700;border-radius:6px;
  background:radial-gradient(circle at 32% 28%,#46351d,#1a140d);
  border:1px solid rgba(224,192,118,.35);color:#f4dd92;
  box-shadow:inset 0 1px 0 rgba(255,236,190,.14),0 2px 6px rgba(120,84,30,.30)}
.ec-ico svg{width:26px;height:26px;display:block;filter:drop-shadow(0 1px 2px rgba(120,84,30,.35))}
.ec-new .ec-ico{color:#ffd76a}
.ec-new:hover::before{background:linear-gradient(180deg,#ffe9a8,#cea63a)}
.ec-old .ec-ico{color:#8fb8f0;background:radial-gradient(circle at 32% 28%,#26374f,#12161c);
  border-color:rgba(143,184,240,.38)}
.ec-old:hover::before{background:linear-gradient(180deg,#cfe0ff,#3f6ba8)}
.ec-txt{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.ec-txt b{font-family:var(--f-title);font-size:16px;font-weight:700;letter-spacing:3px}
.ec-txt i{font-style:normal;font-size:11.5px;color:var(--tx-4);letter-spacing:.5px;line-height:1.5}
.ec-arrow{flex:0 0 auto;font-size:26px;line-height:1;color:var(--gold-dk)}

.entry-resume{display:flex;flex-direction:column;align-items:center;gap:9px;
  width:min(430px,88vw);margin:16px auto 4px;padding:14px 16px;
  border-radius:var(--r-m);border:1px dashed rgba(224,192,118,.42);
  background:linear-gradient(165deg,rgba(224,192,118,.10),rgba(120,84,30,0.24))}
.er-top{display:flex;align-items:center;gap:11px}
.er-face{width:38px;height:38px;border-radius:5px;overflow:hidden;flex:0 0 38px;
  display:inline-flex;align-items:center;justify-content:center;
  background:#241b12;border:1px solid rgba(224,192,118,.42)}
.er-mid{text-align:left}
.er-name{font-family:var(--f-title);font-size:17px;font-weight:700;letter-spacing:2px;color:#8a6215}
.er-desc{font-size:11px;color:var(--tx-4);letter-spacing:.5px;margin-top:2px}
.er-btn{padding:9px 36px;letter-spacing:5px;text-indent:5px}
.er-forget{background:none;border:none;cursor:pointer;font-size:11px;color:var(--tx-4);
  letter-spacing:1px;text-decoration:underline dotted;text-underline-offset:3px}
.er-forget:hover{color:#e08a72}

/* ---- 启动页第二屏：注册名 + 口令 ---- */
.bf-head{position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.bf-titles{display:flex;flex-direction:column;gap:4px}
.bf-back{position:absolute;left:-6px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:22px;line-height:1;
  color:#8a6215;background:linear-gradient(180deg,rgba(255,251,238,.94),rgba(243,226,188,.94));
  border:1px solid rgba(216,178,94,.32);transition:.15s}
.bf-back:hover{color:#fff3d0;border-color:var(--gold);transform:translateY(-50%) scale(1.06)}
.bf-title{margin:0;font-family:var(--f-title);font-weight:700;font-size:26px;letter-spacing:8px;
  text-indent:8px;color:#8a6215;text-shadow:0 2px 0 rgba(120,84,30,.35)}
.bf-sub{font-size:11.5px;color:var(--tx-4);letter-spacing:1px}
.bf-srv{font-size:11px;color:var(--tx-4);letter-spacing:1px}
.bf-srv b{color:var(--tx-3);font-weight:600}
/* 注册分两步：右上角标出进度，让「下一步」不是凭空多出来的一屏 */
.bf-step{position:absolute;right:-6px;top:50%;transform:translateY(-50%);
  font-family:var(--f-title);font-size:12px;letter-spacing:2px;color:var(--gold);
  padding:3px 10px;border-radius:999px;border:1px solid rgba(216,178,94,.32);
  background:linear-gradient(180deg,rgba(255,251,238,.94),rgba(243,226,188,.94))}
.bf-note{margin:0;max-width:min(520px,86vw);font-size:11.5px;line-height:1.8;
  color:var(--tx-4);text-align:center;letter-spacing:.5px}
.bf-note b{color:#e7ca6a;font-weight:600}

/* ---- 续玩中 ---- */
.br-ring{width:46px;height:46px;margin:0 auto 14px;border-radius:50%;
  border:3px solid rgba(224,192,118,.18);border-top-color:#8a6215;
  animation:brspin .9s linear infinite}
@keyframes brspin{to{transform:rotate(360deg)}}
#bootResume .btn{margin-top:14px}

/* ============================== 主框架 ============================== */
.game{display:flex;flex-direction:column;height:100%;position:relative;z-index:1}

/* ---- 顶栏 ---- */
.topbar{height:54px;flex:0 0 54px;display:flex;align-items:center;justify-content:space-between;
  padding:0 12px;position:relative;z-index:20;
  background:linear-gradient(180deg,#fffdf2 0%,#f2e3c0 100%);
  box-shadow:0 2px 14px rgba(120,84,30,.40)}
.topbar::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(216,178,94,.15) 8%,var(--gold) 50%,rgba(216,178,94,.15) 92%,transparent);
  box-shadow:0 0 10px rgba(224,192,118,.4)}

.tb-left{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.force-badge{width:34px;height:34px;line-height:32px;text-align:center;border-radius:var(--r-s);
  font-family:var(--f-title);font-size:20px;font-weight:700;
  background:linear-gradient(180deg,#f7e9c8,#efdcae);border:1px solid var(--line-2);
  box-shadow:inset 0 1px 0 rgba(255,228,170,.12)}
.tb-name{font-family:var(--f-title);font-size:15px;font-weight:700;letter-spacing:2px;
  background:linear-gradient(180deg,#fff2d2,#e6c878);-webkit-background-clip:text;background-clip:text;color:transparent}
.tb-power{font-size:11px;color:var(--tx-3);letter-spacing:1px}
.tb-power b{color:#8a6215;font-weight:700}

/* 资源玉牌 */
.tb-res{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;flex:1;padding:0 8px}
.res-item{display:flex;align-items:center;gap:6px;font-size:12px;padding:3px 11px 3px 3px;
  border-radius:20px;background:linear-gradient(180deg,rgba(255,251,238,.9),rgba(242,224,186,.9));
  border:1px solid rgba(216,178,94,.25);box-shadow:inset 0 1px 0 rgba(255,228,170,.07)}
.res-item i{width:21px;height:21px;line-height:19px;text-align:center;border-radius:50%;
  font-style:normal;font-size:11px;font-family:var(--f-title);font-weight:700;color:#2a1c06;
  background:radial-gradient(circle at 34% 28%,#f6e2a6,#d6ab40 62%,#9a7430);
  border:1px solid rgba(255,240,200,.45);box-shadow:inset 0 1px 0 rgba(255,250,225,.6)}
.res-item b{color:#6b4a14;font-weight:700;letter-spacing:.5px;font-variant-numeric:tabular-nums}
.sp-item i{background:radial-gradient(circle at 34% 28%,#bfe6cf,#5fa87a 62%,#3d7a55);color:#0c2014}
.sp-item b{color:#bfe9d2}
/* 战法养成行 */
.sk-line{display:flex;align-items:flex-start;gap:8px;padding:7px 0;border-bottom:1px dashed rgba(216,178,94,.16)}
.sk-line:last-child{border-bottom:none}
.sk-info{flex:1;min-width:0}
.sk-info .lv{font-size:11px;color:#8a6215;margin-left:4px}
.sk-info .sk-d{display:block;font-size:11.5px;color:var(--tx-3);line-height:1.5;margin-top:2px}

.tb-right{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.net-pill,.online-pill{font-size:11px;padding:3px 10px;border-radius:11px;letter-spacing:1px;
  background:rgba(120,84,30,0.30);border:1px solid rgba(216,178,94,.22);color:var(--tx-3)}
.net-pill.ok{color:var(--jade);border-color:rgba(95,158,121,.5)}
.net-pill.bad{color:#e08a72;border-color:rgba(184,64,47,.5)}
.online-pill b{color:#8a6215}
.icon-btn{width:30px;height:30px;border-radius:var(--r-s);font-size:14px;color:var(--tx-2);
  background:linear-gradient(180deg,#f9eecf,#efdcae);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,228,170,.08)}
.icon-btn:hover{color:#8a6215;border-color:var(--line-2)}
/* 每日登录礼包按钮：常驻描金 + 呼吸光晕；可领取时升级为强脉冲 + 跳动红点 */
.gift-btn{
  position:relative;font-style:normal;
  width:34px;height:34px;margin-left:3px;
  color:#e7c878;
  background:linear-gradient(180deg,#3a2f1a,#241c10);
  border:1.5px solid rgba(224,192,118,.55);
  box-shadow:inset 0 1px 0 rgba(255,228,170,.18),0 0 6px rgba(224,192,118,.30);
  animation:giftIdle 2.6s ease-in-out infinite;   /* 常驻呼吸光晕，区别于普通图标 */
}
.gift-btn .lf-ch{font-style:normal;font-weight:700;font-size:15px;text-shadow:0 0 7px rgba(224,192,118,.65)}
.gift-btn:hover{color:#fff3cf;border-color:rgba(224,192,118,.85)}
/* 常驻：缓慢呼吸光晕 */
@keyframes giftIdle{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,228,170,.18),0 0 5px rgba(224,192,118,.25)}
  50%{box-shadow:inset 0 1px 0 rgba(255,228,170,.28),0 0 13px rgba(224,192,118,.6)}
}
/* 可领取：强脉冲 + 放大 + 跳动红点 */
.gift-btn.has-gift{
  color:#fff3cf;
  background:linear-gradient(180deg,#5e4616,#3a2c0c);
  border-color:rgba(255,214,120,.95);
  animation:giftPulse 1.1s ease-in-out infinite;
}
@keyframes giftPulse{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,228,170,.3),0 0 9px rgba(255,200,90,.55);transform:scale(1)}
  50%{box-shadow:inset 0 1px 0 rgba(255,228,170,.55),0 0 20px rgba(255,200,90,1);transform:scale(1.09)}
}
.gift-btn.has-gift .gift-dot{
  display:block!important;position:absolute;top:-4px;right:-4px;width:11px;height:11px;
  border-radius:50%;background:#ff4d3a;border:1.5px solid #2b1c05;
  animation:giftDot 1.1s ease-in-out infinite;
}
@keyframes giftDot{
  0%,100%{transform:scale(1);box-shadow:0 0 4px rgba(255,77,58,.85)}
  50%{transform:scale(1.4);box-shadow:0 0 10px rgba(255,77,58,1)}
}
/* 已领取（今日已领）：保留描金底色表明功能仍在，但去动画/红点，免打扰 */
.gift-btn.claimed{
  color:#bda05f;border-color:rgba(224,192,118,.32);
  box-shadow:inset 0 1px 0 rgba(255,228,170,.1);
  animation:none;
}
.gift-btn.claimed .gift-dot{display:none!important}
@media (prefers-reduced-motion: reduce){
  .gift-btn{animation:none}
  .gift-btn.has-gift{animation:none}
  .gift-btn.has-gift .gift-dot{animation:none}
}
/* 每日登录礼包弹窗：六宫格军资清单 */
.gift-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0 4px}
.gift-row{display:flex;align-items:center;gap:7px;padding:9px 11px;border-radius:var(--r-s);
  background:linear-gradient(170deg,rgba(250,240,214,0.61),rgba(250,240,214,0.64));
  border:1px solid rgba(224,192,118,.14)}
.gift-row b{font-size:14px;color:var(--tx)}
.gift-row .gift-nm{margin-left:auto;font-size:11px;color:var(--tx-3)}
.gift-row.gift-gold{border-color:rgba(224,192,118,.4);background:linear-gradient(170deg,rgba(250,240,214,0.64),rgba(252,244,222,0.85))}

/* ============================== 视图容器 ============================== */
.stage{flex:1;position:relative;overflow:hidden;background:var(--ink-0)}
.view{position:absolute;inset:0}
.view-map canvas{display:block;width:100%;height:100%}

/* 视图背景：所有内页统一绢面。
 * 内页同时用 --wd-w 让位：天下抽屉展开时会整块盖住左侧，若内页仍从 x=0 铺开，
 * 武将/部队等网格的前几列会被抽屉压住，看起来就像「卡片叠在一起」。 */
.view-city,.view-hero,.view-rank,.view-team,.view-recruit,.view-log,.view-world,.view-skill,.view-ally{
  left:var(--wd-w,0px);
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%,rgba(224,192,118,.07),transparent 65%),
    linear-gradient(180deg,#1d1711 0%,#0b0a08 100%)}

/* ---- 地图 HUD ---- */
.map-hud{position:absolute;inset:0;pointer-events:none;padding:12px}
.hud-box{position:absolute;left:12px;top:12px;min-width:212px;max-width:290px;padding:12px 14px;
  border-radius:var(--r-m);pointer-events:auto;font-size:12px;line-height:1.75;
  background:linear-gradient(165deg,rgba(252,244,222,0.91),rgba(252,244,222,0.91));
  border:1px solid var(--line-2);
  box-shadow:inset 0 1px 0 rgba(255,228,170,.09), 0 6px 22px rgba(120,84,30,.40);
  backdrop-filter:blur(3px)}
.hud-box h4{margin:0 0 9px;padding-bottom:7px;font-family:var(--f-title);font-size:15px;letter-spacing:2px;
  color:#8a6215;border-bottom:1px solid rgba(216,178,94,.22);
  overflow:hidden} /* 长君主名 + 折叠钮会溢出 1~3px，裁掉即可，不可撑破信息框 */
/* 折叠：标题右侧三角，收起后只留一行标题，小屏不再遮挡地图 */
.hud-box h4 .hb-fold{float:right;cursor:pointer;pointer-events:auto;user-select:none;
  color:#8a6215;font-size:12px;line-height:1;padding:2px 3px;margin:-2px -3px 0 0;opacity:.8}
.hud-box h4 .hb-fold:hover{opacity:1;color:#fff3d0}
.hud-box.folded>*:not(h4){display:none}
.hud-box.folded{min-width:0;width:auto;max-width:none;padding:9px 12px}
.hud-box.folded h4{margin:0;padding-bottom:0;border-bottom:none;white-space:nowrap}
.hud-box .row{display:flex;justify-content:space-between;gap:12px;color:var(--tx-3)}
.hud-box .row b{color:var(--tx);font-weight:600}
.hud-box a{color:var(--azure);text-decoration:none;border-bottom:1px dotted rgba(91,141,217,.5)}
/* 疆域总览：领地占用条 + 州属小签 */
.hud-box .land-bar{height:5px;margin:5px 0 8px;border-radius:3px;overflow:hidden;
  background:rgba(120,84,30,.32);box-shadow:inset 0 1px 2px rgba(120,84,30,.40)}
.hud-box .land-bar i{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,#9c7a3a,#f4dd92);box-shadow:0 0 6px rgba(224,192,118,.55)}
.hud-box .land-pv{display:flex;flex-wrap:wrap;gap:4px;margin:7px 0 3px}
.hud-box .pv-chip{display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border-radius:9px;
  font-size:11px;color:var(--tx-2);cursor:pointer;transition:.13s;
  border:1px solid rgba(216,178,94,.28);background:rgba(120,84,30,0.26)}
.hud-box .pv-chip i{font-style:normal;font-size:10px;color:#8a6215;font-variant-numeric:tabular-nums}
.hud-box .pv-chip:hover{color:var(--tx);border-color:#8a6215;background:rgba(224,192,118,.18)}

.hud-right{position:absolute;right:12px;bottom:12px;display:flex;flex-direction:column;gap:9px;pointer-events:auto}
.round-btn{width:38px;height:38px;border-radius:50%;font-size:19px;color:#8a6215;
  background:linear-gradient(180deg,rgba(255,251,238,.96),rgba(243,226,188,.96));
  border:1px solid var(--line-2);font-family:var(--f-title);
  box-shadow:inset 0 1px 0 rgba(255,228,170,.12), 0 3px 9px rgba(120,84,30,.35);transition:.14s}
.round-btn:hover{color:#fff3d0;border-color:var(--gold);transform:scale(1.06)}
.round-btn:active{transform:scale(.94)}

/* 悬停提示 */
.map-tip{position:absolute;z-index:30;max-width:180px;padding:7px 10px;pointer-events:none;
  border-radius:var(--r-s);font-size:11px;line-height:1.6;color:var(--tx);
  background:linear-gradient(180deg,rgba(252,246,228,.97),rgba(242,226,188,.97));
  border:1px solid var(--line-2);box-shadow:0 4px 14px rgba(120,84,30,.35)}
.map-tip b{color:#8a6215;font-family:var(--f-title);letter-spacing:1px}
.map-tip .tip-co{color:var(--tx-3);font-size:10px;font-weight:400}

/* 地形图例 */
/* 图例放在按钮列左侧：否则展开时会盖住右下角的缩放 / 回到主城按钮，点了没反应 */
.map-legend{position:absolute;right:58px;bottom:12px;width:152px;padding:10px 12px;border-radius:var(--r-m);
  pointer-events:auto;font-size:11px;background:linear-gradient(180deg,rgba(252,246,228,.97),rgba(242,226,188,.97));
  border:1px solid var(--line-2);box-shadow:0 6px 20px rgba(120,84,30,.40)}
.map-legend .lg-title{font-family:var(--f-title);letter-spacing:2px;color:#8a6215;
  font-size:12px;margin-bottom:7px;padding-bottom:5px;border-bottom:1px solid rgba(216,178,94,.2)}
.map-legend .lg-note{font-size:10px;line-height:1.4;color:var(--tx-3);margin:-3px 0 6px}
.map-legend .lg-row{display:flex;align-items:center;gap:8px;padding:2.5px 0;color:var(--tx-2)}
.map-legend .lg-ico{width:18px;height:18px;border-radius:4px;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-title);font-size:11px;color:#fff8e6;border:1px solid rgba(120,84,30,0.30);flex:none}
.map-legend .lg-nm{letter-spacing:.5px}
.map-legend .lg-row.clickable{cursor:pointer;transition:background .12s}
.map-legend .lg-row.clickable:hover{background:rgba(255,215,106,.12)}
.map-legend .lg-row.active{background:rgba(255,215,106,.22);border-radius:5px;box-shadow:inset 0 0 0 1px var(--gold)}
.map-legend .lg-bands{display:flex;flex-wrap:wrap;gap:4px 8px;margin-top:7px;padding-top:6px;
  border-top:1px dashed rgba(255,215,106,.22)}
.map-legend .lg-band{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;color:var(--tx-3)}
.map-legend .lg-band i{width:10px;height:10px;border-radius:2px;display:inline-block;
  box-shadow:0 0 0 1px rgba(120,84,30,.35) inset}
.map-legend .lg-clear{margin-top:7px;padding-top:7px;border-top:1px dashed rgba(255,215,106,.28);color:#ffb4a8;cursor:pointer;font-size:12px;letter-spacing:1px}
.map-legend .lg-clear:hover{color:#ffd76a}

/* 图层开关面板：与图例共用右下角位置，外观沿用 .map-legend，只补开关自己的行样式 */
.map-layers .ly-row{display:flex;align-items:center;gap:8px;padding:3px 4px;color:var(--tx-3);cursor:pointer;
  border-radius:5px;transition:background .12s}
.map-layers .ly-row:hover{background:rgba(255,215,106,.12)}
.map-layers .ly-row.on{color:var(--tx)}
.map-layers .ly-tick{width:15px;height:15px;flex:none;border-radius:3px;display:flex;align-items:center;
  justify-content:center;font-size:10px;line-height:1;color:#2a1c06;border:1px solid rgba(216,178,94,.34);
  background:rgba(120,84,30,0.30)}
.map-layers .ly-row.on .ly-tick{background:linear-gradient(180deg,#f4dd92,#d8b25e);border-color:#f4dd92}
.map-layers .ly-nm{letter-spacing:1px}
.map-layers .ly-reset{margin-top:8px;padding-top:7px;border-top:1px dashed rgba(255,215,106,.28);
  color:#f4dd92;cursor:pointer;font-size:11.5px;letter-spacing:1px;text-align:center}
.map-layers .ly-reset:hover{color:#fff3d0}
/* 带内联 SVG 的圆形按钮需自己居中（其余按钮用的是 .ico 背景图） */
.round-btn.rb-svg{display:flex;align-items:center;justify-content:center}
.round-btn.rb-svg svg{display:block;pointer-events:none}
.map-search{position:absolute;right:12px;top:176px;display:flex;gap:6px;pointer-events:auto;z-index:25}
.map-search .ms-input{width:96px;height:32px;padding:0 8px;border-radius:8px;border:1px solid rgba(255,215,106,.4);
  background:rgba(255,251,238,.85);color:#4a3418;font-size:13px;outline:none}
.map-search .ms-input::placeholder{color:rgba(243,232,207,.45)}
.map-search .ms-btn{width:38px;height:32px;border-radius:8px;border:1px solid var(--gold);
  background:linear-gradient(180deg,#f7e9c6,#eeda9e);color:#8a6215;font-size:12px;cursor:pointer}
.map-search .ms-btn:hover{color:#fff3d0}

.march-bar{position:absolute;left:12px;bottom:12px;right:64px;display:flex;gap:8px;flex-wrap:wrap;pointer-events:auto}
.march-chip{display:flex;align-items:center;gap:8px;font-size:11px;padding:5px 11px;border-radius:var(--r-m);
  background:linear-gradient(180deg,rgba(252,246,228,.95),rgba(242,226,188,.95));
  border:1px solid var(--line-2);box-shadow:0 3px 10px rgba(120,84,30,.32)}
.march-chip .bar{width:60px;height:5px;border-radius:3px;overflow:hidden;background:rgba(120,84,30,.35);
  box-shadow:inset 0 1px 2px rgba(120,84,30,.40)}
.march-chip .bar i{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,#9c7a3a,#f4dd92);box-shadow:0 0 6px rgba(224,192,118,.6)}
.march-chip .t{color:var(--tx-3);font-variant-numeric:tabular-nums;min-width:38px;text-align:right}
.march-chip.stn{border-color:rgba(127,224,160,.5)}
/* 占领中：朱金描边 + 进度条同色，与「驻守」绿色区分 */
.march-chip.occ{border-color:rgba(232,168,124,.55)}
.march-chip.occ .bar i{background:linear-gradient(90deg,#e8a87c,#ffd76a)}
.march-chip.stn .mini-btn{margin-left:6px;padding:1px 8px;font-size:10px;border-radius:6px;cursor:pointer;
  color:#0f1a12;background:linear-gradient(180deg,#9fe7bd,#5fc08c);border:none}
.march-chip.stn .mini-btn:hover{filter:brightness(1.08)}
/* 占领中 / 驻守 chip 可点击定位 */
.march-chip.occ,.march-chip.stn{cursor:pointer}
.march-chip.occ:hover,.march-chip.stn:hover{filter:brightness(1.12)}
/* 部队页状态 chip：占领中朱金 */
.chip.occ{border-color:rgba(232,168,124,.6);color:#e8a87c;background:rgba(232,168,124,.08)}
/* 驻守部队面板：占领倒计时进度条 */
.occ-prog{height:6px;border-radius:3px;background:rgba(250,240,214,0.57);overflow:hidden;margin:6px 0 2px}
.occ-prog i{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,#c8963e,#ffd76a);box-shadow:0 0 6px rgba(232,176,74,.5);
  transition:width .9s linear}

/* 小地图：卷轴框 */
.map-mini{position:absolute;right:12px;top:12px;width:156px;height:156px;border-radius:var(--r-s);
  overflow:hidden;border:1px solid var(--line-2);background:var(--ink-0);pointer-events:auto;
  box-shadow:0 6px 20px rgba(120,84,30,.40), inset 0 0 0 1px rgba(120,84,30,.35)}
.map-mini canvas{width:100%;height:100%;display:block;image-rendering:pixelated;cursor:crosshair}
.mini-tip{position:absolute;left:0;right:0;bottom:0;font-size:10px;text-align:center;letter-spacing:2px;
  background:linear-gradient(180deg,transparent,rgba(120,84,30,.55));color:var(--tx-3);padding:8px 0 2px}

/* ============================== 内城 ============================== */
.city-wrap{position:absolute;inset:0;overflow:auto;padding:14px}
.city-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:11px;max-width:800px;margin:0 auto;grid-auto-rows:max-content}
.bd-card{position:relative;overflow:hidden;padding:12px 11px 11px;border-radius:var(--r-m);
  cursor:pointer;transition:transform .16s cubic-bezier(.2,.9,.3,1.2), box-shadow .16s, border-color .16s;
  background:linear-gradient(165deg,var(--panel-2) 0%,#16110c 100%);
  border:1px solid rgba(216,178,94,.22);
  box-shadow:inset 0 1px 0 rgba(255,228,170,.07), 0 3px 8px rgba(120,84,30,.30)}
.bd-card:hover{border-color:var(--gold);transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(255,228,170,.12), 0 8px 20px rgba(120,84,30,.35), 0 0 18px rgba(224,192,118,.16)}
.bd-card:active{transform:translateY(-1px)}
.bd-card.locked{opacity:.55;filter:grayscale(.55)}
.bd-card.locked::after{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent 0 6px,rgba(0,0,0,.13) 6px 12px)}
.bd-ico{width:38px;height:38px;line-height:36px;text-align:center;border-radius:var(--r-s);
  font-family:var(--f-title);font-size:22px;font-weight:700;color:#2a1c06;margin-bottom:8px;
  background:radial-gradient(circle at 34% 26%,#f6e2a6,#d6ab40 62%,#9a7430);
  border:1px solid rgba(255,240,200,.45);
  box-shadow:inset 0 1px 0 rgba(255,250,225,.6), 0 2px 5px rgba(120,84,30,.30)}
.bd-name{font-family:var(--f-title);font-size:14px;font-weight:700;letter-spacing:2px;color:#8a6215}
.bd-lv{position:absolute;right:9px;top:9px;font-size:10px;letter-spacing:.5px;padding:2px 8px;
  border-radius:2px;color:#ffeccb;font-weight:700;
  background:linear-gradient(180deg,rgba(184,64,47,.9),rgba(122,36,26,.9));
  border:1px solid rgba(255,180,150,.35);box-shadow:0 1px 4px rgba(120,84,30,.30)}
.bd-card.locked .bd-lv{background:linear-gradient(180deg,rgba(248,238,210,.95),rgba(238,220,178,.95));
  border-color:rgba(216,178,94,.2);color:var(--tx-3)}
.bd-eff{font-size:11px;color:var(--tx-3);line-height:1.65;min-height:34px;margin-top:4px}
.bd-up{font-size:11px;color:var(--jade);margin-top:6px;padding-top:6px;letter-spacing:1px;
  border-top:1px solid rgba(216,178,94,.14)}

.city-side{max-width:800px;margin:13px auto 0;padding:14px 16px;border-radius:var(--r-m);
  background:linear-gradient(165deg,rgba(252,244,222,0.85),rgba(252,244,222,0.85));
  border:1px solid rgba(216,178,94,.22);font-size:12px;line-height:2;color:var(--tx-2);
  box-shadow:inset 0 1px 0 rgba(255,228,170,.06)}
.city-side h3{margin:0 0 10px;padding-bottom:8px;font-family:var(--f-title);font-size:15px;letter-spacing:5px;
  color:#8a6215;border-bottom:1px solid rgba(216,178,94,.2)}
.city-side b{color:#8a6215}

/* ============================== 武将 ============================== */
.list-bar{display:flex;gap:7px;padding:10px 12px;flex-wrap:wrap;
  border-bottom:1px solid rgba(216,178,94,.16);background:rgba(250,240,214,0.58)}
.chip{padding:5px 13px;border-radius:14px;font-size:12px;letter-spacing:1px;color:var(--tx-3);
  background:linear-gradient(180deg,rgba(252,244,224,.8),rgba(240,224,186,.8));
  border:1px solid rgba(216,178,94,.2);transition:.14s}
.chip:hover{color:var(--tx);border-color:rgba(216,178,94,.45)}
.chip.on{color:#2b1c05;font-weight:700;border-color:#8a6215;
  background:linear-gradient(180deg,#f4dd92,#cea63a);
  box-shadow:inset 0 1px 0 rgba(255,250,225,.7), 0 2px 6px rgba(120,84,30,.30)}
.chip-sep{width:1px;height:16px;background:rgba(216,178,94,.3);margin:0 4px}

.hero-grid{position:absolute;top:50px;left:0;right:0;bottom:0;overflow:auto;padding:13px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px;align-content:start;
  /* 行高必须显式钉死为 max-content：隐式 auto 行在卡片多到超出容器时会被压缩成
     「容器高÷行数」，所有卡叠成一团（真机踩过：50 张卡行高被压到 44px）。 */
  grid-auto-rows:max-content}

/* 武将卡：按星级分品质（金/紫/蓝/绿） */
.hero-card{position:relative;padding:10px 9px 9px;text-align:center;cursor:pointer;
  border-radius:var(--r-m);align-self:start;overflow:hidden;
  transition:transform .16s cubic-bezier(.2,.9,.3,1.2), box-shadow .16s, border-color .16s;
  background:linear-gradient(172deg,#fffdf2 0%,#f9efd6 58%,#f3e4bd 100%);
  border:1px solid rgba(216,178,94,.35);
  box-shadow:inset 0 1px 0 rgba(255,228,170,.06), 0 2px 7px rgba(120,84,30,.30)}
.hero-card:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(120,84,30,.35), inset 0 1px 0 rgba(255,228,170,.12)}
.hero-card::before{content:'';position:absolute;left:0;top:0;right:0;height:2px}
.hero-card.q5{border-color:rgba(230,190,90,.5)}
.hero-card.q5::before{background:linear-gradient(90deg,transparent,#f4dd92,transparent);
  box-shadow:0 0 8px rgba(224,192,118,.8)}
.hero-card.q4{border-color:rgba(166,120,216,.42)}
.hero-card.q4::before{background:linear-gradient(90deg,transparent,#b98ce8,transparent)}
.hero-card.q3{border-color:rgba(91,141,217,.4)}
.hero-card.q3::before{background:linear-gradient(90deg,transparent,#79a6e8,transparent)}
.hero-card.q2{border-color:rgba(95,158,121,.35)}
.hero-card.q2::before{background:linear-gradient(90deg,transparent,#7fc39f,transparent)}

.hface{width:68px;height:68px;line-height:66px;margin:0 auto 8px;border-radius:var(--r-s);
  font-family:var(--f-title);font-size:34px;font-weight:700;color:#fff0cc;
  background:radial-gradient(circle at 34% 26%,#5a4830,#2a2117 70%);
  border:1px solid rgba(216,178,94,.4);
  box-shadow:inset 0 1px 0 rgba(255,228,170,.18), 0 2px 6px rgba(120,84,30,.32);
  text-shadow:0 1px 3px rgba(120,84,30,.40)}
/* 武将立绘头像：图片加载成功则填充，失败自动回退汉字印章 */
.hface{overflow:hidden;position:relative;padding:0}
.hface-img{position:absolute;inset:0;display:block;overflow:hidden;border-radius:inherit}
.hface-img .hface-ch{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-title);font-size:inherit;font-weight:700;color:#fff0cc;
  text-shadow:0 1px 3px rgba(120,84,30,.40);z-index:0}
.hface-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  opacity:0;transition:opacity .25s;z-index:1}
.hface-img.ok img{opacity:1}
/* 已加载过的立绘（heroAvatar 会同时打上 .pre）：重建 HTML 时直接给最终态，跳过 .25s 淡入。
 * 面板每 900ms 重写一次 innerHTML，若每次都从 opacity:0 淡入，头像就会持续「闪一下闪一下」。 */
.hface-img.pre img{opacity:1;transition:none}
.hface-img.ok .hface-ch{display:none}
.hface-img.fail img{display:none}
.hface .hface-img img{filter:contrast(1.03) saturate(1.02)}
.hero-card:hover .hface-img img{transform:scale(1.06);transition:transform .3s}
.q5 .hface{background:radial-gradient(circle at 34% 26%,#6b5527,#33260f 70%);border-color:rgba(240,214,142,.6)}
.q4 .hface{background:radial-gradient(circle at 34% 26%,#4d3a63,#251a33 70%);border-color:rgba(185,140,232,.5)}
.q3 .hface{background:radial-gradient(circle at 34% 26%,#2f4468,#161f30 70%);border-color:rgba(121,166,232,.5)}

.hero-card .star{font-size:11px;letter-spacing:1px;color:var(--gold);text-shadow:0 0 6px rgba(224,192,118,.5)}
.hero-card .hn{font-family:var(--f-title);font-size:16px;font-weight:700;margin:2px 0 1px;color:var(--tx);letter-spacing:1px}
.hero-card .hlv{font-size:11.5px;color:var(--tx-3)}
.hero-card .hfit{font-size:10px;color:var(--azure);margin-top:4px;letter-spacing:.5px}
.hero-card .hflag{position:absolute;right:0;top:0;font-size:9px;line-height:1;padding:3px 5px 4px;
  letter-spacing:1px;color:#ffeccb;
  background:linear-gradient(160deg,rgba(196,74,54,.95),rgba(122,36,26,.95));
  border-radius:0 var(--r-m) 0 var(--r-m);box-shadow:-1px 1px 5px rgba(120,84,30,.32)}
/* 快捷角标：升红/觉醒「有事可做」提醒，点击直达养成页 */
.hero-card .hop{position:absolute;left:0;top:0;font-size:9px;line-height:1;padding:4px 6px;
  letter-spacing:1px;font-weight:700;cursor:pointer;
  border-radius:var(--r-m) 0 var(--r-m) 0;box-shadow:1px 1px 5px rgba(120,84,30,.32)}
.hero-card .hop-red{background:linear-gradient(20deg,rgba(196,74,54,.95),rgba(122,36,26,.95));color:#ffd9c4}
.hero-card .hop-aw{background:linear-gradient(20deg,rgba(160,124,44,.95),rgba(96,72,24,.95));color:#ffe9ac}

/* ---- 武将详情：头像 + 属性条 ---- */
.hd-hero{display:flex;gap:13px;align-items:center;margin-bottom:6px;padding-bottom:13px;
  border-bottom:1px solid rgba(216,178,94,.16)}
.hd-hero .hface{width:112px;height:112px;line-height:110px;font-size:56px;margin:0;flex:0 0 auto;border-radius:var(--r-m)}
.hd-hero .info{flex:1;min-width:0;text-align:left}
.hd-hero .nm{font-family:var(--f-title);font-size:21px;font-weight:700;letter-spacing:3px;color:#8a6215;
  display:flex;align-items:baseline;gap:9px}
.hd-hero .lvtag{font-size:11px;letter-spacing:0;color:#ffeccb;padding:2px 8px;border-radius:2px;
  background:linear-gradient(180deg,rgba(184,64,47,.9),rgba(122,36,26,.9));
  border:1px solid rgba(255,180,150,.3);font-family:var(--f-body);font-weight:700}
.hd-hero .sub{font-size:11.5px;color:var(--tx-3);margin-top:5px;letter-spacing:1px}
.hd-hero .stars{color:var(--gold);letter-spacing:2px;margin-right:6px;text-shadow:0 0 6px rgba(224,192,118,.5)}
/* 详情弹窗「上一员/下一员」翻页：顺序 = 列表页筛选+排序 */
.hd-nav{display:flex;align-items:center;gap:8px;margin-top:9px}
.hd-nav .hd-pos{flex:1;text-align:center;font-size:11px;letter-spacing:2px;color:var(--tx-3);font-variant-numeric:tabular-nums}
.hd-nav .btn{padding:4px 10px;font-size:11.5px}
/* 批量训练按钮组：主推按钮描金，花费小字弱化 */
.train-btns{display:flex;flex-wrap:wrap;gap:6px}
.train-btns .tb-cost{font-style:normal;font-size:10px;color:var(--tx-3);margin-left:3px}

.stat{display:flex;align-items:center;gap:10px;margin:6px 0}
.stat .k{width:30px;flex:0 0 auto;font-family:var(--f-title);font-size:12px;letter-spacing:1px;color:var(--tx-3)}
.stat .bar{flex:1;height:8px;border-radius:4px;overflow:hidden;background:rgba(120,84,30,.35);
  box-shadow:inset 0 1px 2px rgba(120,84,30,.45)}
.stat .bar i{display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,#9c7a3a,#f4dd92);box-shadow:0 0 6px rgba(224,192,118,.35)}
.stat .v{width:40px;flex:0 0 auto;text-align:right;font-size:14px;font-weight:700;color:var(--tx);
  font-variant-numeric:tabular-nums}
.stat.wu  .bar i{background:linear-gradient(90deg,#7d2b1f,#e08164)}
.stat.zhi .bar i{background:linear-gradient(90deg,#27496e,#6ba8e0)}
.stat.tong .bar i{background:linear-gradient(90deg,#2b6b50,#7fc39f)}
.stat.su  .bar i{background:linear-gradient(90deg,#6f5d22,#e6cf6e)}

/* 兵种适性徽标 */
.fit-row{display:flex;gap:8px;flex-wrap:wrap}
.fit{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;padding:3px 9px;
  border-radius:var(--r-s);background:rgba(120,84,30,0.30);border:1px solid rgba(216,178,94,.18);color:var(--tx-3)}
.fit b{font-family:var(--f-title);font-size:12px;color:var(--tx-2)}
.fit.S{color:#f4dd92;border-color:rgba(240,214,142,.55);background:rgba(224,192,118,.14)}
.fit.S b{color:#f4dd92}
.fit.A{color:#c49de8;border-color:rgba(196,157,232,.45);background:rgba(166,120,216,.12)}
.fit.A b{color:#c49de8}
.fit.B{color:#8fb2e8;border-color:rgba(143,178,232,.4);background:rgba(91,141,217,.1)}
.fit.B b{color:#8fb2e8}

/* ============================== 部队 ============================== */
.team-wrap{position:absolute;inset:0;overflow:auto;padding:14px}
.team-card{max-width:760px;margin:0 auto 13px;padding:14px;border-radius:var(--r-m);
  background:linear-gradient(165deg,var(--panel-2) 0%,#16110c 100%);
  border:1px solid rgba(216,178,94,.22);
  box-shadow:inset 0 1px 0 rgba(255,228,170,.07), 0 4px 12px rgba(120,84,30,.30)}
.tc-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:11px;padding-bottom:9px;border-bottom:1px solid rgba(216,178,94,.16)}
.tc-head h3{margin:0;font-family:var(--f-title);font-size:16px;letter-spacing:3px;color:#8a6215}
.tc-head .chips{display:flex;gap:6px;flex-wrap:wrap}
.tc-slots{display:flex;gap:10px;flex-wrap:wrap}
.slot{flex:1;min-width:126px;border-radius:var(--r-m);padding:10px 8px;text-align:center;
  font-size:12px;color:var(--tx-4);background:rgba(120,84,30,0.25);
  border:1px dashed rgba(216,178,94,.28);transition:.14s;cursor:pointer}
.slot:hover{border-color:var(--gold);background:rgba(224,192,118,.06)}
.slot.filled{border-style:solid;border-color:rgba(216,178,94,.35);
  background:linear-gradient(165deg,#3a2e1e,#221a12);box-shadow:inset 0 1px 0 rgba(255,228,170,.08)}
.slot .sn{font-family:var(--f-title);font-size:15px;font-weight:700;color:var(--tx);letter-spacing:1px;
  display:flex;align-items:center;justify-content:center;gap:6px}
.slot .sn .hface-sm{display:inline-flex;width:26px;height:26px;line-height:1;font-size:14px;margin:0;border-radius:2px;
  align-items:center;justify-content:center;flex:0 0 auto}
.slot .ss{font-size:11px;color:var(--tx-3);margin-top:3px}
.slot .ss b{color:#8a6215}
.tc-info{margin-top:10px;font-size:12px;color:var(--tx-2);display:flex;gap:16px;flex-wrap:wrap;letter-spacing:1px}
.tc-info b{color:#8a6215}
/* 部队位置文案：地图太大，卡片上就得写清它在哪（待命主城 / 野外驻守 x,y / 行军中 → 目标） */
.tc-pos{color:#8fb6d8}
.tc-pos::before{content:'⌖ ';opacity:.75}

/* 编队预设 */
.preset-bar{max-width:760px;margin:0 auto 13px;padding:9px 12px;border-radius:var(--r-m);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:linear-gradient(165deg,rgba(250,240,214,0.61),rgba(250,240,214,0.61));
  border:1px solid rgba(216,178,94,.18)}
.preset-bar .pb-label{font-family:var(--f-title);font-size:13px;letter-spacing:3px;color:#8a6215;margin-right:2px}
.preset-bar .pb-hint{font-size:11px;color:var(--tx-3)}
.preset-bar .chip.pchip{display:inline-flex;align-items:center;gap:5px}
.preset-bar .chip .px{cursor:pointer;color:var(--tx-3);font-style:normal;padding:0 2px;border-radius:3px}
.preset-bar .chip .px:hover{color:#ff8a7a;background:rgba(255,90,80,.16)}

/* ============================== 招募 ============================== */
.recruit-wrap{position:absolute;inset:0;overflow:auto;padding:24px 18px;text-align:center;
  background:
    radial-gradient(ellipse 70% 45% at 50% 18%,rgba(224,192,118,.16),transparent 70%),
    linear-gradient(180deg,#241a0f 0%,#0b0a08 100%)}
.rc-title{font-family:var(--f-title);font-size:26px;letter-spacing:12px;text-indent:12px;font-weight:700;
  background:linear-gradient(180deg,#fff3d0,#e6c878 55%,#9c7a3a);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 10px rgba(224,192,118,.35))}
.rc-sub{font-size:12px;color:var(--tx-3);margin:6px 0 20px;letter-spacing:2px}
.rc-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.rc-btn{padding:15px 26px;border-radius:var(--r-m);min-width:162px;position:relative;overflow:hidden;
  background:linear-gradient(170deg,var(--panel-3) 0%,#1c1610 100%);
  border:1px solid var(--line-2);
  box-shadow:inset 0 1px 0 rgba(255,228,170,.09), 0 4px 12px rgba(120,84,30,.30);
  transition:transform .16s cubic-bezier(.2,.9,.3,1.2), box-shadow .16s}
.rc-btn:hover{transform:translateY(-3px);border-color:var(--gold);
  box-shadow:0 10px 24px rgba(120,84,30,.35), 0 0 20px rgba(224,192,118,.18)}
.rc-btn.big{background:linear-gradient(170deg,#f4dd92 0%,#d8b04e 50%,#9c7a36 100%);
  border-color:#f8ecc0;color:#2b1c05;
  box-shadow:inset 0 1px 0 rgba(255,250,225,.7), 0 4px 0 #6b511f, 0 8px 20px rgba(224,192,118,.28)}
.rc-btn.big:hover{box-shadow:inset 0 1px 0 rgba(255,252,235,.85), 0 5px 0 #6b511f, 0 12px 28px rgba(224,192,118,.4)}
.rc-btn .rt{font-family:var(--f-title);font-size:16px;font-weight:700;letter-spacing:3px}
.rc-btn .rd{font-size:11px;opacity:.78;margin-top:4px;letter-spacing:.5px}
.rc-btn .rd i{font-style:normal;font-family:var(--f-title);font-weight:700}
.rc-pool{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:9px;
  max-width:800px;margin:0 auto;grid-auto-rows:max-content}
.rc-result{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:14px 0 20px}

/* 招募结果卡：翻转登场 */
.rc-result .hero-card{animation:cardIn .5s cubic-bezier(.2,.9,.3,1.3) backwards;min-width:116px}
.rc-result .hero-card:nth-child(2){animation-delay:.09s}
.rc-result .hero-card:nth-child(3){animation-delay:.18s}
.rc-result .hero-card:nth-child(4){animation-delay:.27s}
.rc-result .hero-card:nth-child(5){animation-delay:.36s}
@keyframes cardIn{from{opacity:0;transform:translateY(22px) rotateY(-70deg) scale(.85)}to{opacity:1;transform:none}}

/* ============================== 记录 ============================== */
.log-list{position:absolute;inset:0;overflow:auto;padding:13px}
.log-item{position:relative;padding:9px 13px 9px 15px;margin-bottom:8px;border-radius:0 var(--r-m) var(--r-m) 0;
  background:linear-gradient(90deg,rgba(250,240,214,0.61),rgba(250,240,214,0.55));
  border:1px solid rgba(216,178,94,.14);border-left:3px solid var(--gold-dk);
  font-size:12px;color:var(--tx-2);line-height:1.7;transition:.14s}
.log-item:hover{border-color:rgba(216,178,94,.35);background:linear-gradient(90deg,rgba(250,240,214,0.64),rgba(250,240,214,0.58))}
.log-item b{color:#8a6215}
.log-item .lt{color:var(--tx-4);font-size:11px;margin-right:8px;font-variant-numeric:tabular-nums}
.log-item.win{border-left-color:var(--jade)}
.log-item.lose{border-left-color:var(--cinnabar)}
.log-item[data-i]{cursor:pointer}
.log-head{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:baseline;
  padding:6px 14px 11px;margin:0 -13px 10px;
  background:linear-gradient(180deg,#f6ecd4,#f6ecd4f2);
  border-bottom:1px solid rgba(216,178,94,.22)}
.log-head h3{margin:0;font-family:var(--f-title);font-size:17px;letter-spacing:6px;
  background:linear-gradient(180deg,#fff3d0,#e6c878);-webkit-background-clip:text;background-clip:text;color:transparent}
.log-count{font-size:11px;color:var(--tx-4);letter-spacing:1px}
.log-item{display:flex;align-items:flex-start}
.log-glyph{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;line-height:1;
  margin:2px 9px 0 0;flex:0 0 auto;font-family:var(--f-title);font-size:12px;font-weight:700;color:#2a1c06;border-radius:3px;
  background:radial-gradient(circle at 34% 26%,#f6e2a6,#d6ab40 62%,#9a7430);
  box-shadow:inset 0 1px 0 rgba(255,250,225,.6),0 1px 3px rgba(120,84,30,.30)}
.log-glyph.win{background:radial-gradient(circle at 34% 26%,#bfe6cd,#5f9e79 62%,#2f6b50);color:#0e1a12}
.log-glyph.lose{background:radial-gradient(circle at 34% 26%,#f0b0a0,#b8402f 62%,#7a2419);color:#fff2ec}
.log-glyph.ev{background:radial-gradient(circle at 34% 26%,#3a4a64,#27496e 62%,#152439);color:#cfe0f5}
.log-glyph+.lt{margin-right:8px}
.log-rep{color:var(--azure);margin-left:4px;letter-spacing:.5px}
.log-empty{padding:46px 0;text-align:center;color:var(--tx-4);font-size:13px;letter-spacing:3px}

/* ============================== 底部导航 ============================== */
.tabbar{height:56px;flex:0 0 56px;display:flex;position:relative;z-index:20;
  background:linear-gradient(180deg,#fdf6e2 0%,#f2e3c0 100%);
  box-shadow:0 -3px 14px rgba(120,84,30,.35)}
.tabbar::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(216,178,94,.2) 10%,var(--gold) 50%,rgba(216,178,94,.2) 90%,transparent);
  box-shadow:0 0 10px rgba(224,192,118,.35)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font-size:10.5px;color:var(--tx-4);letter-spacing:1px;position:relative;transition:color .15s}
.tab:hover{color:var(--tx-2)}
.tab .tab-ico{width:27px;height:27px;line-height:25px;text-align:center;border-radius:var(--r-s);
  font-family:var(--f-title);font-size:16px;font-weight:700;color:var(--tx-3);
  background:rgba(255,255,255,.03);border:1px solid rgba(216,178,94,.18);
  transition:all .18s cubic-bezier(.2,.9,.3,1.3)}
.tab.active{color:#8a6215}
.tab.active .tab-ico{color:#2b1c05;transform:translateY(-2px);
  background:linear-gradient(180deg,#f4dd92,#cea63a);border-color:#f8ecc0;
  box-shadow:inset 0 1px 0 rgba(255,250,225,.7), 0 3px 8px rgba(224,192,118,.4)}
.tab.active::after{content:'';position:absolute;bottom:0;left:26%;right:26%;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold-lt),transparent);box-shadow:0 0 8px var(--gold)}

/* ============================== 弹窗 ============================== */
.modal-layer{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px;
  background:radial-gradient(ellipse at 50% 40%,rgba(250,240,214,0.62),rgba(96,70,32,.5));
  backdrop-filter:blur(2px);animation:fadein .16s}
.modal-box{width:100%;max-width:500px;max-height:86vh;overflow:auto;position:relative;
  border-radius:var(--r-m);padding:20px 18px 18px;
  background:linear-gradient(168deg,#31261a 0%,#f6ecd4 100%);
  border:1px solid var(--line-2);
  box-shadow:inset 0 1px 0 rgba(255,228,170,.1), 0 26px 60px rgba(120,84,30,.45);
  animation:min .24s cubic-bezier(.2,.9,.3,1.25)}
.modal-box.wide{max-width:620px}
@keyframes min{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
/* 统一弹窗关闭键（U.modal 自动注入右上角） */
.modal-x{position:absolute;top:10px;right:10px;z-index:40;width:30px;height:30px;
  border:1px solid rgba(224,192,118,.45);border-radius:6px;cursor:pointer;
  background:rgba(250,240,214,0.62);color:#e9d9a8;font-size:14px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--in-dark);transition:background .18s,color .18s}
.modal-x:hover{background:rgba(252,244,222,0.85);color:#ffe9ad}
/* 四角金饰 */
.modal-box::before,.modal-box::after{content:'';position:absolute;width:16px;height:16px;pointer-events:none}
.modal-box::before{left:5px;top:5px;border-left:2px solid rgba(224,192,118,.55);border-top:2px solid rgba(224,192,118,.55)}
.modal-box::after{right:5px;bottom:5px;border-right:2px solid rgba(224,192,118,.55);border-bottom:2px solid rgba(224,192,118,.55)}

.modal-box h3{margin:0 0 14px;padding-bottom:10px;font-family:var(--f-title);font-size:19px;letter-spacing:5px;
  text-align:center;position:relative;
  background:linear-gradient(180deg,#fff3d0,#e6c878);-webkit-background-clip:text;background-clip:text;color:transparent}
.modal-box h3::after{content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:150px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(224,192,118,.7),transparent)}

.m-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px 2px;
  border-bottom:1px solid rgba(216,178,94,.11);font-size:13px}
.m-row:last-of-type{border-bottom:none}
.m-row span{color:var(--tx-3)}
.m-row b{color:var(--tx);font-weight:600}
.m-sec{margin:14px 0 7px;font-family:var(--f-title);font-size:13.5px;letter-spacing:3px;color:var(--gold);
  padding-left:9px;border-left:3px solid var(--gold-dk);line-height:1.2}
.m-btns{display:flex;gap:10px;margin-top:15px}
.m-btns .btn{flex:1;text-align:center;padding:10px}
.m-desc{font-size:12px;color:var(--tx-3);line-height:1.85;margin:7px 0}
.m-desc b{color:var(--tx)}
.grow-row{font-size:11px;color:var(--tx-3);letter-spacing:.5px;margin:7px 0 2px}
.grow-row b{color:var(--jade);font-variant-numeric:tabular-nums;margin:0 2px}
.m-desc.bond{color:var(--azure);background:rgba(91,141,217,.08);
  border-left:3px solid rgba(91,141,217,.5);padding:6px 9px;border-radius:0 var(--r-s) var(--r-s) 0}

/* 战法徽标 */
.sk-badge{display:inline-block;font-size:10px;line-height:1;padding:2px 6px;border-radius:9px;
  margin-right:5px;font-family:var(--f-title);letter-spacing:1px;vertical-align:1px;
  border:1px solid currentColor}
.sk-badge.t-active{color:var(--azure)}
.sk-badge.t-command{color:#8a6215}
.sk-badge.t-assault{color:var(--cinnabar)}
.sk-badge.t-formation{color:var(--violet)}
.sk-badge.t-passive{color:var(--jade)}
.sk-badge.t-affair{color:var(--gold);background:linear-gradient(180deg,rgba(231,201,122,.16),rgba(231,201,122,.06));font-weight:600}
.sk-d.hint{color:#8a6215;opacity:.9;margin-top:3px;font-style:italic}
.sk-rate{font-size:11px;color:var(--tx-3)}
.sk-eff{margin:2px 0 6px;padding:8px 10px;border-radius:7px;background:rgba(91,141,217,.07);
  border:1px solid rgba(91,141,217,.16)}
.sk-eff-line{padding:2.5px 0;font-size:12px;color:#dfe7f2;line-height:1.65}
.sk-eff-line:before{content:'▸';margin-right:6px;color:var(--azure);font-size:10px}
.sk-sug{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 4px}
.sk-sug .sug-item{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:11px;
  background:rgba(216,178,94,.1);border:1px solid rgba(216,178,94,.26);font-size:12px;color:#efe6cc}
.sk-sug .sug-item i{font-style:normal;font-size:11px;color:#8a6215;font-weight:600}
.en-list{display:flex;flex-wrap:wrap;gap:6px}
.en-sk{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--tx-2);
  background:rgba(184,64,47,.1);border:1px solid rgba(184,64,47,.28);
  padding:3px 8px;border-radius:var(--r-s)}
.cost-list{display:flex;gap:7px;flex-wrap:wrap;margin:9px 0}
.cost-tag{font-size:12px;padding:4px 10px;border-radius:var(--r-s);color:var(--tx-2);
  background:rgba(120,84,30,0.32);border:1px solid rgba(216,178,94,.2)}
.cost-tag i{font-style:normal;font-family:var(--f-title);font-weight:700;color:#8a6215;margin-right:4px}
.cost-tag.no{color:#e08a72;border-color:rgba(184,64,47,.5);background:rgba(184,64,47,.08)}
.cost-tag.no i{color:#e08a72}

/* ---- 出征选队 ---- */
.atk-row{display:flex;align-items:center;gap:11px;padding:11px 12px;margin-bottom:9px;cursor:pointer;
  border-radius:var(--r-m);background:linear-gradient(165deg,#f9efd6,#f2e3c0);
  border:1px solid rgba(216,178,94,.2);box-shadow:inset 0 1px 0 rgba(255,228,170,.06);transition:.14s}
.atk-row:hover{border-color:var(--gold);transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(120,84,30,.32),0 0 14px rgba(224,192,118,.14)}
.atk-seal{width:38px;height:38px;line-height:36px;text-align:center;flex:0 0 auto;border-radius:var(--r-s);
  font-family:var(--f-title);font-size:20px;font-weight:700;color:#2a1c06;
  background:radial-gradient(circle at 34% 26%,#f6e2a6,#d6ab40 62%,#9a7430);
  border:1px solid rgba(255,240,200,.45);box-shadow:inset 0 1px 0 rgba(255,250,225,.6),0 2px 5px rgba(120,84,30,.30)}
.atk-info{flex:1;min-width:0}
.atk-info>b{font-family:var(--f-title);font-size:14px;letter-spacing:1px;color:var(--tx)}
.atk-sub{font-size:11.5px;color:var(--tx-3);margin-top:3px;letter-spacing:.5px}

/* ---- 战报 ---- */
.br-round{margin-bottom:10px;font-size:12px;padding-left:8px;
  border-left:2px solid rgba(216,178,94,.2)}
.br-round .rh{font-family:var(--f-title);color:#8a6215;font-size:12.5px;letter-spacing:2px;
  margin-bottom:4px;padding-bottom:3px;border-bottom:1px dashed rgba(216,178,94,.18)}
.br-line{padding:2px 0;line-height:1.7}
.br-line .dmg{color:#e8916c;font-weight:700}
.br-line .heal{color:#7fc39f;font-weight:700}
.br-line .sk{color:#79a6e8;font-weight:700}
.br-res{text-align:center;padding:12px;font-family:var(--f-title);font-size:22px;font-weight:700;
  letter-spacing:10px;text-indent:10px;margin-bottom:6px}
.br-res.win{background:linear-gradient(180deg,#a8e0c0,#5f9e79);-webkit-background-clip:text;background-clip:text;
  color:transparent;filter:drop-shadow(0 0 12px rgba(95,158,121,.4))}
.br-res.lose{background:linear-gradient(180deg,#f0b0a0,#b8402f);-webkit-background-clip:text;background-clip:text;
  color:transparent;filter:drop-shadow(0 0 12px rgba(184,64,47,.4))}

/* 兵力对比条 */
.br-cmp{display:flex;flex-direction:column;gap:7px;margin:2px 0 4px}
.br-cmp-row{display:flex;align-items:center;gap:8px;font-size:12px}
.br-cmp-row .lbl{width:30px;color:#cdbf9a;flex:none}
.br-cmp-row .br-track{flex:1;height:11px;border-radius:6px;background:rgba(120,84,30,0.28);overflow:hidden}
.br-cmp-row .br-track i{display:block;height:100%;border-radius:6px;transition:width .3s}
.br-cmp-row .br-track .atk{background:linear-gradient(90deg,#5b8fd6,#9ec3f0)}
.br-cmp-row .br-track .def{background:linear-gradient(90deg,#d6735b,#f0a892)}
.br-cmp-row b{width:64px;text-align:right;font-variant-numeric:tabular-nums;color:#e9e0c8}

/* 克制提示 */
.br-restraint{margin:6px 0;padding:7px 10px;border-radius:7px;font-size:12px;
  display:flex;align-items:center;gap:6px;letter-spacing:.5px}
.br-restraint.good{background:rgba(122,195,159,.14);color:#9bd9b6;border:1px solid rgba(122,195,159,.3)}
.br-restraint.bad{background:rgba(216,115,91,.14);color:#f0a892;border:1px solid rgba(216,115,91,.3)}
.br-restraint.flat{background:rgba(216,178,94,.1);color:#d8c690;border:1px solid rgba(216,178,94,.25)}

/* 回合徽标 */
.br-round .rh .rb{display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 5px;margin-right:7px;border-radius:50%;
  background:var(--gold);color:#1c1408;font-size:11px;font-weight:700;vertical-align:1px}
.br-line.info{opacity:.78;font-style:italic}
.br-line.heal{background:rgba(122,195,159,.06);border-radius:4px}
.br-line .dmg,.br-line .heal{display:inline-block}
/* 战斗过程 = 独立滚动窗：逐条播报在窗内跟随滚动，上方「兵力对比/战果/将领战果」原地不动。
 * 一屏放得下整场时也不会有滚动条，不占额外空间。 */
.br-log{max-height:34vh;min-height:92px;overflow:auto;overscroll-behavior:contain;
  padding:4px 8px 4px 2px;border-radius:6px;
  background:rgba(0,0,0,.16);box-shadow:inset 0 0 0 1px rgba(216,178,94,.10)}
.br-log::-webkit-scrollbar{width:7px}
.br-log::-webkit-scrollbar-thumb{background:rgba(224,192,118,.34);border-radius:4px}
.br-log::-webkit-scrollbar-track{background:rgba(0,0,0,.2);border-radius:4px}
/* 战报打开时一次性整体淡入：内容始终全部可见、可滚动，绝不再把后续回合压成隐藏 */
.br-log.reveal{animation:brLogIn .5s ease both}
@keyframes brLogIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:620px){.br-log{max-height:30vh;padding-right:4px}}

/* ============================== 飘字 ============================== */
.toast{position:fixed;right:14px;top:64px;z-index:90;max-width:310px;
  display:flex;flex-direction:column;gap:7px;align-items:flex-end;pointer-events:none}
.toast-item{padding:8px 16px;border-radius:var(--r-m);font-size:13px;color:var(--tx);text-align:right;
  background:linear-gradient(165deg,rgba(252,244,222,0.91),rgba(252,244,222,0.91));
  border:1px solid var(--line-2);border-left:3px solid var(--gold);
  box-shadow:0 6px 20px rgba(120,84,30,.35);animation:tin .3s cubic-bezier(.2,.9,.3,1.2)}
@keyframes tin{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}

/* ============================== 滚动条 ============================== */
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-thumb{border-radius:4px;
  background:linear-gradient(180deg,var(--gold-dk),#4a3818);border:1px solid rgba(120,84,30,0.30)}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--gold),var(--gold-dk))}
::-webkit-scrollbar-track{background:rgba(120,84,30,0.25)}

/* ============================== 天下 ============================== */
.world-wrap{display:flex;height:100%;gap:11px;padding:11px}
.w-col{display:flex;flex-direction:column;border-radius:var(--r-m);padding:12px;overflow:hidden;
  background:linear-gradient(165deg,rgba(252,244,222,0.85),rgba(252,244,222,0.85));
  border:1px solid rgba(216,178,94,.22);
  box-shadow:inset 0 1px 0 rgba(255,228,170,.06), 0 4px 14px rgba(120,84,30,.30)}
/* 「世界动态」专栏：「势力排行」搬到独立的「排行」栏后，抽屉里只剩这一列，独占整宽 */
.w-ev{flex:1 1 100%;min-width:290px}
.w-col h3{margin:0 0 11px;padding-bottom:9px;font-family:var(--f-title);font-size:15px;letter-spacing:6px;
  text-indent:6px;text-align:center;color:#8a6215;border-bottom:1px solid rgba(216,178,94,.2)}
.w-scroll{flex:1;overflow:auto;min-height:0}
.w-row{display:flex;align-items:center;gap:9px;padding:7px 6px;border-radius:var(--r-s);
  border-bottom:1px solid rgba(216,178,94,.1);font-size:12px;transition:.14s}
.w-row:hover{background:rgba(224,192,118,.07)}
.w-row.me{background:linear-gradient(90deg,rgba(224,192,118,.16),rgba(224,192,118,.04));
  box-shadow:inset 2px 0 0 var(--gold)}
.w-no{width:22px;text-align:center;font-family:var(--f-title);font-size:14px;font-weight:700;color:var(--tx-4)}
.w-row:nth-child(1) .w-no{color:#f4dd92;text-shadow:0 0 8px rgba(240,214,142,.6)}
.w-row:nth-child(2) .w-no{color:#cfd4dc}
.w-row:nth-child(3) .w-no{color:#d9a06a}
.w-flag{width:22px;height:22px;line-height:22px;text-align:center;border-radius:var(--r-s);
  font-family:var(--f-title);font-size:13px;font-weight:800;color:#14100a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 1px 3px rgba(120,84,30,.30)}
.w-name{flex:1;color:var(--tx);font-weight:600;display:flex;align-items:center;gap:6px;min-width:0}
.w-name .dot{width:7px;height:7px;border-radius:50%;background:var(--tx-4);flex:0 0 auto}
.w-name .dot.on{background:var(--jade);box-shadow:0 0 7px var(--jade)}
.w-pow{color:#8a6215;font-weight:700;min-width:60px;text-align:right;font-variant-numeric:tabular-nums}
.w-land{color:var(--tx-3);font-size:11px;min-width:66px;text-align:right}
.w-ev-item{padding:7px 6px;border-bottom:1px solid rgba(216,178,94,.08);font-size:12px;color:var(--tx-2);line-height:1.6}
.w-ev-item .lt{color:var(--tx-4);font-size:11px;margin-right:7px;font-variant-numeric:tabular-nums}
.w-ev-item.win{color:#9fd8a8}.w-ev-item.lose{color:#e8a898}
.chat-in{display:flex;gap:7px;margin-top:10px}
.chat-in input{flex:1;padding:8px 12px;border-radius:var(--r-s);font-size:12.5px;color:var(--tx);
  background:linear-gradient(180deg,#fffdf4,#f6ecd2);border:1px solid rgba(160,110,35,.35);outline:none;
  box-shadow:inset 0 2px 5px rgba(120,84,30,.35);transition:.15s}
.chat-in input:focus{border-color:var(--gold);box-shadow:inset 0 2px 5px rgba(120,84,30,.35), 0 0 0 3px rgba(224,192,118,.12)}
.chat-in .btn{flex:0 0 auto}
.w-chat{margin-top:9px;height:126px;overflow:auto;border-radius:var(--r-s);padding:8px 10px;
  font-size:12px;line-height:1.85;background:rgba(120,84,30,0.32);border:1px solid rgba(216,178,94,.16);
  box-shadow:inset 0 2px 6px rgba(120,84,30,.30)}
.w-chat-item{color:var(--tx-2);word-break:break-all}
.w-chat-item b{font-family:var(--f-title);letter-spacing:1px}

/* ============================== 响应式 ============================== */
@media(max-width:560px){
  .boot-title{font-size:34px;letter-spacing:8px}
  .big-btn{padding:12px 36px;font-size:15px;letter-spacing:5px}
  .tb-res{gap:4px;padding:0 2px}
  .res-item{font-size:11px;padding:2px 8px 2px 2px;gap:4px}
  .res-item i{width:18px;height:18px;line-height:16px;font-size:10px}
  .tb-power,.online-pill{display:none}
  .map-mini{width:108px;height:108px}
  .hero-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px}
  /* 通用兜底尺寸；武将卡的立绘由 .hero-card .hface 满宽覆写（见 premium.css 末尾） */
  .hface{width:54px;height:54px;line-height:52px;font-size:27px}
  .hd-hero .hface{width:88px;height:88px;line-height:86px;font-size:44px}
  .world-wrap{flex-direction:column;overflow:auto}
  .w-col{min-height:230px;flex:0 0 auto}
  .modal-box{padding:16px 13px 14px}
  .br-res{font-size:18px;letter-spacing:6px}
}

/* ===== 升红（进阶）系统 ===== */
.redtag{position:absolute;left:0;top:0;font:700 10px/1 var(--f-body);letter-spacing:1px;
  padding:3px 5px 4px;color:#fff2e0;
  background:linear-gradient(160deg,#ff7a4d,#c02a12);
  border:1px solid rgba(255,180,140,.5);border-right:none;border-top:none;
  border-radius:var(--r-s) 0 var(--r-s) 0;text-shadow:0 1px 2px rgba(120,84,30,.35);z-index:2}
.redtag.inline{position:static;display:inline-block;margin-left:6px;vertical-align:middle;
  border-radius:var(--r-s);border:1px solid rgba(255,180,140,.5);transform:translateY(-1px)}

.red-dots{display:flex;align-items:center;gap:6px;margin:2px 0 8px}
.red-dots .rd{width:20px;height:20px;text-align:center;font:700 11px/19px var(--f-body);
  border-radius:50%;border:1px solid var(--line);color:var(--tx-4);background:rgba(120,84,30,0.25)}
.red-dots .rd.on{color:#fff3e6;border-color:rgba(255,140,100,.75);
  background:radial-gradient(circle at 35% 30%,#ff8b5e,#b62d13);
  box-shadow:0 0 8px rgba(255,110,70,.45)}
.red-dots .rd-txt{margin-left:4px;font-size:11px;color:var(--tx-2);letter-spacing:1px}

.red-dups{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px}
.red-dup{font-size:11px;padding:4px 8px;border-radius:var(--r-s);cursor:pointer;
  border:1px solid var(--line);color:var(--tx-2);background:rgba(0,0,0,.2)}
.red-dup:hover{border-color:var(--line-2);color:var(--tx)}
.red-dup.on{border-color:rgba(255,140,100,.8);color:#ffd9c4;background:rgba(184,64,47,.28)}

.btn-red{background:linear-gradient(180deg,#e2593a,#9e2412)!important;
  border-color:rgba(255,170,140,.45)!important;color:#fff1e4!important;
  text-shadow:0 1px 2px rgba(120,84,30,.30)}

.red-alloc{margin:6px 0 2px;padding:8px 9px;border:1px solid var(--line);
  border-radius:var(--r-m);background:linear-gradient(180deg,rgba(250,240,214,.6),rgba(238,220,178,.6))}
.red-alloc.active{border-color:rgba(255,140,100,.45);box-shadow:0 0 0 1px rgba(255,110,70,.12) inset}
.red-alloc .ra-head{font-family:var(--f-title);font-size:12px;letter-spacing:1px;color:var(--tx-2);margin-bottom:6px}
.red-alloc .ra-head b{color:#ffd06a;font-size:14px}
.red-alloc .ra-head i{font-style:normal;font-size:11px;color:var(--tx-3);margin-left:4px}
.red-alloc .ra-row{display:flex;align-items:center;gap:8px;padding:4px 0;
  border-top:1px dashed rgba(216,178,94,.14)}
.red-alloc .ra-row:first-of-type{border-top:none}
.red-alloc .ra-row .k{flex:1;font-size:12px;color:var(--tx)}
.red-alloc .ra-row .num{min-width:26px;text-align:center;font:700 13px/1 var(--f-body);color:#8a6215}
.red-alloc .plus{font-size:11px;padding:3px 7px;border-radius:var(--r-s);cursor:pointer;
  border:1px solid var(--line-2);color:#8a6215;background:rgba(224,192,118,.12)}
.red-alloc .plus:hover{background:rgba(224,192,118,.26)}
.red-alloc .plus.off{opacity:.35;cursor:not-allowed;border-color:var(--line);
  color:var(--tx-4);background:transparent}
.m-desc.warn{color:#e08b6f}

/* ===== 战法视图 ===== */
.skill-wrap,.ally-wrap{padding:14px;max-width:880px;margin:0 auto}
.skill-head{font-size:14px;color:var(--tx-2);margin:4px 2px 12px}
.skill-head b{color:#8a6215}
.skill-head b.sp{color:#7fd1a3}
.skill-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;grid-auto-rows:max-content}
.skill-card{padding:11px 13px;border-radius:var(--r-m);background:linear-gradient(160deg,rgba(252,244,222,0.91),rgba(252,244,222,0.91));
  border:1px solid var(--line);cursor:pointer;transition:border-color .15s,transform .1s}
.skill-card:hover{border-color:var(--gold);transform:translateY(-1px)}
.sc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}
.sc-name{font-size:14px;color:#8a6215;font-weight:600}
.sc-type{font-size:11px;padding:1px 8px;border-radius:9px;background:rgba(91,141,217,.18);color:#9cc2f0;border:1px solid rgba(91,141,217,.4)}
.sc-type.active{background:rgba(184,64,47,.16);color:#e89b8f;border-color:rgba(184,64,47,.4)}
.sc-type.command{background:rgba(166,120,216,.16);color:#c9a9ea;border-color:rgba(166,120,216,.4)}
.sc-desc{font-size:12px;color:var(--tx-2);line-height:1.6;min-height:34px}
.sc-own{font-size:11px;color:var(--tx-3);margin-top:5px}
.sc-act{font-size:11px;color:var(--gold);margin-top:6px;opacity:.8}
.skill-tip{font-size:11px;color:var(--tx-3);margin-top:14px;line-height:1.7;border-top:1px dashed var(--line);padding-top:10px}

/* ---- 战法图鉴：筛选栏固定、图鉴区独立滚动 ----
 * ⚠ 不能照抄武将页那套「.hero-grid 绝对定位 top:50px」：筛选栏一旦折成两行
 * （模式 + 7 个类型 + 搜索框，手机屏必然折行）就会盖住列表首行。 */
.view-skill{display:flex;flex-direction:column}
.view-skill .list-bar{flex:0 0 auto}
.skill-scroll{flex:1 1 auto;min-height:0;overflow:auto}
/* 筛选栏内的搜索框：跟 chip 同一行，空间不够时自动折到下一行 */
.lb-search{margin-left:auto;min-width:156px;padding:5px 13px;border-radius:14px;font-size:12px;
  color:var(--tx);background:rgba(120,84,30,0.42);border:1px solid rgba(216,178,94,.3);outline:none}
.lb-search:focus{border-color:var(--gold);background:rgba(96,70,32,.5)}
.lb-search::placeholder{color:var(--tx-4)}
.chip-n{font-style:normal;font-size:10px;margin-left:5px;opacity:.7}
/* 战法卡：右侧「未习得 + 类型」一组的容器 */
.sc-right{display:flex;align-items:center;gap:6px}
.sc-no{font-size:10px;padding:1px 6px;border-radius:8px;color:var(--tx-3);
  border:1px solid rgba(216,178,94,.28);background:rgba(120,84,30,0.30)}
/* 未习得的战法卡：整卡压暗 + 虚线边，一眼能与已习得区分开 */
.skill-card.locked{opacity:.6;border-style:dashed}
.skill-card.locked:hover{opacity:.95}
.sk-empty{font-size:12.5px;color:var(--tx-3);line-height:1.9;padding:20px 6px;text-align:center}

/* ---- 战法：已拆未激活（演练激活）---- */
.skill-card.raw{background:linear-gradient(160deg,rgba(250,238,206,0.95),rgba(247,230,196,0.95));
  border:1px solid rgba(216,178,94,.55)}
.skill-card.raw:hover{border-color:var(--gold)}
/* 图鉴里已拆未激活的战法：角标引导去激活 */
.sc-pending{font-size:10px;padding:1px 6px;border-radius:8px;color:#caa24a;
  border:1px solid rgba(216,178,94,.5);background:rgba(216,178,94,.16);order:-1}
/* 演练进度条 */
.sk-act-bar{margin:8px 0 4px}
.sk-act-track{height:7px;border-radius:5px;background:rgba(120,84,30,.28);overflow:hidden}
.sk-act-track i{display:block;height:100%;border-radius:5px;
  background:linear-gradient(90deg,#d8a23a,#f0cd72);transition:width .25s}
.sk-act-num{font-size:11px;color:#a67c1f;margin-top:3px;text-align:right;
  font-variant-numeric:tabular-nums}
/* 激活弹窗：可选武将卡列表（带勾选） */
.act-hero{cursor:pointer;user-select:none}
.act-hero input{margin-right:8px;accent-color:var(--gold)}
.act-hero.on{background:rgba(216,178,94,.16);border-color:rgba(216,178,94,.5)}
.act-hero .m-sub{font-size:11px;color:var(--tx-3);margin-left:6px}
.act-count{font-size:11px}

/* ---- 羁绊图鉴（武将页 → ◈羁绊 弹窗）----
 * 94 组缘分一次列全，列表自带滚动；搜索框留在列表外，滚动时不会滚走。 */
.bc-search{width:100%;margin:2px 0 10px}
.bc-list{max-height:54vh;overflow:auto;padding-right:4px;overscroll-behavior:contain}
.bc-list .bd-card:first-child{margin-top:0}
/* 状态筛选行（全部/已集齐/差人/未开始） */
.bc-filts{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px}
.bc-filts .chip{cursor:pointer;user-select:none}
/* 未入缘分武将清单 */
.bc-free{display:flex;flex-wrap:wrap;gap:6px;align-items:center;max-height:22vh;overflow:auto;
  padding:10px 12px;border-radius:var(--r-m);background:rgba(120,84,30,0.28);
  border:1px solid rgba(255,255,255,.06);overscroll-behavior:contain}
.bc-free-f{font-size:11px;color:var(--tx-3);letter-spacing:2px;margin-right:2px}
.bc-free-m{cursor:pointer}
.bc-free-m:hover{border-color:var(--gold);opacity:1}

/* ===== 同盟视图 ===== */
.ally-wrap-inner{display:flex;flex-direction:column;gap:14px}
.ally-create,.ally-info{padding:14px 16px;border-radius:var(--r-m);background:linear-gradient(160deg,rgba(252,244,222,0.91),rgba(252,244,222,0.91));border:1px solid var(--line)}
.ally-create h3,.ally-info h3{font-size:16px;color:#8a6215;margin-bottom:12px}
.ally-sub{font-size:12px;color:var(--tx-2);margin-bottom:10px}
.ally-list{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
.ally-list h4{font-size:12px;color:var(--tx-3);margin-bottom:8px}
.ally-item{font-size:13px;color:var(--tx);padding:4px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.ally-memb{display:flex;flex-direction:column;gap:6px;margin:8px 0 12px}
.ally-mb{font-size:13px;color:var(--tx);display:flex;align-items:center;gap:8px}
.ally-mb .role{font-size:10px;color:var(--gold);border:1px solid var(--gold-dk);padding:0 5px;border-radius:6px}
.ally-mb .am-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ally-mb .am-pow{font-size:11.5px;color:var(--tx-3);font-variant-numeric:tabular-nums;flex:0 0 auto}
.ally-mb .dot{width:7px;height:7px;border-radius:50%;background:var(--tx-4);flex:0 0 auto}
.ally-mb .dot.on{background:var(--jade);box-shadow:0 0 7px var(--jade)}
/* 俘虏标记：红铜色，和盟主的金色 role 明确区分 */
.ally-mb .role.cap,.w-name .tag-cap{color:#e8836b;border-color:#8a3a2a}
/* 排行 / 动态列里的「盟 / 俘」小标 */
.w-name .tag-ally,.w-name .tag-cap{font-style:normal;font-size:10px;line-height:1;
  padding:2px 5px;border-radius:5px;border:1px solid var(--gold-dk);color:var(--gold);flex:0 0 auto}
/* 称号徽章（君主档案 tag、天下列表、顶栏旁） */
.role.title{color:var(--gold);border-color:var(--gold-dk);
  background:linear-gradient(180deg,rgba(231,201,122,.16),rgba(231,201,122,.05));font-weight:600}
/* 称号选择弹窗 */
.tt-hint{font-size:12px;color:var(--tx-3);margin:6px 0 10px;line-height:1.7}
.tt-list{display:flex;flex-direction:column;gap:8px}
.tt-row{position:relative;border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  cursor:pointer;transition:border-color .15s,background .15s}
.tt-row:hover{border-color:var(--gold-dk)}
.tt-row.on{border-color:var(--gold);
  background:linear-gradient(180deg,rgba(231,201,122,.14),rgba(231,201,122,.04))}
.tt-row.locked{opacity:.5;cursor:not-allowed}
.tt-row.locked:hover{border-color:var(--line)}
.tt-main{display:flex;align-items:baseline;gap:8px}
.tt-main b{font-size:15px;color:var(--gold)}
.tt-tier{font-size:11px;color:var(--tx-3)}
.tt-desc{font-size:12px;color:var(--tx-2);margin-top:2px}
.tt-bonus{font-size:12px;color:var(--jade);margin-top:3px}
.tt-flag{position:absolute;right:12px;top:12px;font-style:normal;font-size:11px;color:var(--gold)}
.tt-flag.lock{color:var(--tx-4)}
.w-name .tag-cap{border-color:#8a3a2a;color:#e8836b}
.empty{font-size:12px;color:var(--tx-3);padding:10px 4px;line-height:1.7}

/* 蓝卡分解为战法点 按钮（朱印蓝） */
.btn-blue{background:linear-gradient(180deg,#7fb0e8 0%,#3f7bc4 50%,#2c5e9e 100%);
  color:#06243f;border:1px solid #2c5e9e;box-shadow:0 2px 0 #20456f,inset 0 1px 0 rgba(255,255,255,.35)}
.btn-blue:hover{filter:brightness(1.08)}
.btn-blue:active{box-shadow:inset 0 2px 6px rgba(20,40,70,.5)}


/* ===== 羁绊（缘分）系统 ===== */
/* 部队卡片上的羁绊条 */
.tc-bonds{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.bd-chip{display:inline-flex;align-items:baseline;gap:6px;font-size:11.5px;letter-spacing:.5px;
  padding:3px 9px;border-radius:12px;border:1px solid var(--line);color:var(--tx-3);background:rgba(0,0,0,.18)}
.bd-chip.on{color:#f4dd92;border-color:rgba(240,214,142,.55);background:rgba(224,192,118,.14);
  box-shadow:0 0 8px rgba(224,192,118,.18)}
.bd-chip.on i{font-style:normal;font-size:10.5px;color:var(--tx-2)}
.bd-chip.near{color:var(--azure);border-color:rgba(91,141,217,.4);background:rgba(91,141,217,.08)}
.bd-chip.off{color:var(--tx-4);border-style:dashed}

/* 武将详情 / 图鉴里的羁绊卡片 */
.bd-card{border:1px dashed var(--line);border-radius:var(--r-m);padding:9px 11px;margin:7px 0;
  background:linear-gradient(150deg,rgba(252,244,222,0.85),rgba(252,244,222,0.85))}
.bd-card.on{border-style:solid;border-color:rgba(240,214,142,.5);background:rgba(224,192,118,.09);
  box-shadow:inset 0 1px 0 rgba(255,228,170,.10)}
.bd-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bd-head b{font-family:var(--f-title);font-size:14px;letter-spacing:2px;color:var(--tx)}
.bd-card.on .bd-head b{color:#8a6215}
.bd-kind{font-size:10px;line-height:1;padding:2px 6px;border-radius:8px;color:var(--gold);
  border:1px solid var(--gold-dp);background:rgba(224,192,118,.08)}
.bd-req{margin-left:auto;font-size:11px;color:var(--tx-4)}
.bd-card.on .bd-req{color:var(--jade);font-weight:700}
.bd-mems{display:flex;flex-wrap:wrap;gap:6px;margin:7px 0 5px}
.bd-m{font-size:11.5px;padding:2px 8px;border-radius:10px;border:1px solid rgba(255,255,255,.08);
  color:var(--tx-4);background:rgba(120,84,30,0.22)}
.bd-m.have{color:var(--tx-2);border-color:rgba(216,178,94,.3)}
.bd-m.on{color:#2b1c05;font-weight:700;border-color:#8a6215;
  background:linear-gradient(180deg,#f4dd92,#d8b25e)}
.bd-m.miss{opacity:.55}
.bd-eff{font-size:11.5px;color:var(--jade);letter-spacing:.5px}
.bd-desc{font-size:11px;color:var(--tx-4);margin-top:4px;line-height:1.6}
.bd-tag{margin-left:7px;font-size:10.5px;color:var(--gold);letter-spacing:.5px}

/* 武将图鉴（招募页） */
.rc-bar{padding:4px 0 12px;justify-content:center}
.hero-card.pick{min-height:132px}
.rc-stat{font-size:10.5px;color:var(--tx-2);letter-spacing:.3px;margin-top:4px;line-height:1.45}
.rc-skill{font-size:10.5px;color:var(--azure);margin-top:4px;line-height:1.4;
  display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap}
.hero-card .hlv.have{color:var(--jade)}
.hero-card .hlv.miss{color:var(--tx-4)}

/* 图鉴头部 / 自带战法块 */
.own-tag{font-size:11px;padding:1px 7px;border-radius:9px;border:1px solid var(--line)}
.own-tag.have{color:var(--jade);border-color:rgba(95,158,121,.5);background:rgba(95,158,121,.1)}
.own-tag.miss{color:var(--tx-4);border-style:dashed}
.pv-skill{border:1px solid var(--line);border-radius:var(--r-m);padding:9px 11px;background:rgba(0,0,0,.18)}
.pv-sk-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pv-sk-head b{font-family:var(--f-title);font-size:14px;letter-spacing:2px;color:#8a6215}
.pv-sk-head .sk-rate{font-size:11px;color:var(--tx-3);margin-left:auto}
.pv-sk-fit{font-size:11.5px;color:var(--tx-3);margin-top:6px}
.pv-sk-fit b{color:var(--azure)}

/* 战报里的羁绊提示 */
.br-bonds{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:9px 0;
  font-size:11.5px;color:#8a6215;letter-spacing:.5px}