/* ============================================================
   M12：官网视觉与布局增强
   ------------------------------------------------------------
   1. 字体（Trajan Sans Pro / Montserrat，来自素材库 /data/asset/fonts）
   2. 视图容器（.view）—— 8 个独立界面
   3. 背景纹理与立绘
   4. 主页概览三卡 / 英雄数据条
   5. 下载中心
   6. 代理独立门户
   ============================================================ */

/* ────────────────────────────────────────────
   1. 字体
   ──────────────────────────────────────────── */
@font-face{
  font-family:'Trajan Pro';
  src:url('/data/asset/fonts/TrajanSansPro-Regular.otf') format('opentype');
  font-weight:400;font-display:swap;
}
@font-face{
  font-family:'Trajan Pro';
  src:url('/data/asset/fonts/TrajanSansPro-Bold.otf') format('opentype');
  font-weight:700;font-display:swap;
}
@font-face{
  font-family:'Montserrat';
  src:url('/data/asset/fonts/Montserrat-Regular.ttf') format('truetype');
  font-weight:400;font-display:swap;
}
@font-face{
  font-family:'Montserrat';
  src:url('/data/asset/fonts/Montserrat-SemiBold.ttf') format('truetype');
  font-weight:600;font-display:swap;
}

/* 标题用 Trajan（史诗感），正文用 Montserrat（易读） */
.hero h2,
.sec-hd h3,
.gw-logo h1,
.gw-title h2,
.logo h1,
.srv-card h4,
.dl-hero h3,
.rank-no,
.rank-val{
  font-family:'Trajan Pro',Georgia,'Microsoft YaHei',serif;
}
body{font-family:'Montserrat','Microsoft YaHei','PingFang SC',sans-serif}
.hero-tag,.hero-kicker,.sec-hd .kick,.gw-title .kick{
  font-family:'Montserrat','Microsoft YaHei',sans-serif;
}

/* ────────────────────────────────────────────
   2. 视图容器（.view）
   ------------------------------------------------------------
   8 个界面各自是一个 .view 容器，默认隐藏；
   showView() 给当前容器加 .on 并设 display:''。
   .sec-off 是后台关掉该板块时用的（class，不是 inline style）。
   ──────────────────────────────────────────── */
.view{display:none;animation:viewIn .38s ease both}
.view.on{display:block}
.view.sec-off{display:none !important}
@keyframes viewIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

/* 全站底纹 —— 之前整站只有一块纯色，显得很素 */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  opacity:.5;
  background-image:
    linear-gradient(rgba(223,179,87,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(223,179,87,.028) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse at 50% 0%,#000 10%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 10%,transparent 72%);
}

/* ────────────────────────────────────────────
   3. 面板 / 通用布局（M12 新增）
   ──────────────────────────────────────────── */
.panel{
  border:1px solid var(--line2);background:var(--panel);
  padding:18px;position:relative;
}
.ph{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;
    padding-bottom:11px;border-bottom:1px solid var(--line2);flex-wrap:wrap}
.ph h3{font-size:17px;font-weight:400;letter-spacing:3px}
.ph .en{font-size:9.5px;letter-spacing:3px;color:var(--gold-dim);text-transform:uppercase}
.ph-r{margin-left:auto;font-size:12px;color:var(--txt2)}
.ph-r b{color:var(--gold);font-weight:500}

.grid2{display:grid;grid-template-columns:1fr;gap:16px}
.grid3{display:grid;grid-template-columns:1fr;gap:16px}
.mt{margin-top:22px}
.mt-lg{margin-top:40px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row-note{font-size:12px;color:var(--txt3)}
.sec-more{text-align:center;margin-top:18px}

/* ────────────────────────────────────────────
   4. 主页：英雄数据条 + 角色框 + 特色
   ──────────────────────────────────────────── */
.hero-stats{
  display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:34px;
}
.hero-stats > div{
  min-width:104px;padding:11px 16px;border:1px solid var(--line2);
  background:rgba(10,8,6,.55);backdrop-filter:blur(6px);
}
.hero-stats b{
  display:block;font-family:'Trajan Pro',Georgia,serif;font-weight:400;
  font-size:22px;color:var(--gold);letter-spacing:1px;line-height:1.2;
}
.hero-stats span{display:block;font-size:10.5px;letter-spacing:2px;color:var(--txt3);margin-top:3px}

/* ────────────────────────────────────────────
   HERO「开服时间」格：每秒跳动的倒计时
   ────────────────────────────────────────────
   这格跟别格不同 —— 里面塞了四个数字位（天/时/分/秒），
   所以数字要小一档，单位用更淡的字色，别抢数字的视觉重心。
   .hcd 只是个包裹层，让这格能独立居中。 */
.hcd{text-align:center}
/* 静态文本态：开服时刻（中文年月日），跟别格的数字同款 serif */
.hcd-txt{
  display:block;font-family:'Trajan Pro',Georgia,serif;font-weight:400;
  font-size:15px !important;color:var(--gold);letter-spacing:.5px !important;
  line-height:1.3;white-space:nowrap;
}
.hcd-num{
  display:flex;align-items:baseline;justify-content:center;gap:1px;
  font-size:17px !important;letter-spacing:0 !important;line-height:1.2;
}
.hcd-num i{
  font-style:normal;font-family:'Trajan Pro',Georgia,serif;font-weight:400;
  color:var(--gold);min-width:1.4em;text-align:right;
  font-variant-numeric:tabular-nums;
  transition:.25s;
}
.hcd-num u{
  text-decoration:none;font-family:inherit;font-size:9.5px;color:var(--txt3);
  margin:0 3px 0 1px;letter-spacing:0;
}
/* 秒数位：每次跳动加个动画，让"每秒在跳"看得见 */
.hcd-num i:last-of-type{color:#f0dcb4}
.hcd-num.tick i:last-of-type{animation:hcdTick .5s ease-out}
@keyframes hcdTick{
  0%{transform:translateY(-1px) scale(1.12);filter:brightness(1.6)}
  100%{transform:none;filter:none}
}
/* 标签行：开服时间 / 距离开服 / 已经开区 */
.hcd-lbl{
  display:block;font-size:10.5px;letter-spacing:2px;color:var(--txt3);margin-top:3px;
}

/* 已开区状态：标签跟数字都偏暖白 */
.hcd.opened .hcd-num i{color:#f0dcb4}
.hcd.opened .hcd-lbl{color:var(--gold-dim)}

/* 概览三栏：左=公告竖列 / 中=本区速览 / 右=状态+特色 */
.ov{display:grid;gap:16px;grid-template-columns:1fr;align-items:stretch}
.ov-side{display:grid;gap:16px;align-content:start}

/* ══════════════════════════════════════════════════════════
   开服横幅（开区时间 + 每秒跳动的倒计时）
   ──────────────────────────────────────────────────────────
   形态参考旧 PHP 站的 .sidebar-countdown，但改成横排铺满，
   更适合放在概览区顶部当横幅。

   一套结构自动切换两态（靠 .ob.opened 类）：
     未开区 → 「距离开服」+ 剩余时间（金色）
     已开区 → 「已经开区」+ 已运行时长（绿色）

   ⚠️ **不要边框、不要底板** —— 这一块是浮在页面背景上的，
      加框会像贴了块补丁，破坏整页的呼吸感。
      靠「居中 + 字号 + 金色」建立层级就够了。
*/
.openbar{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:2px 20px 4px;margin-bottom:12px;
  position:relative;
}
/* 状态标签（距离开服 / 已经开区） */
.ob-state{
  font-size:10.5px;letter-spacing:4px;color:var(--gold-dim);
  white-space:nowrap;transition:.3s;
}
/* 引擎切换时给 .ob-state 加 .opened（已开区）—— 仍是金色系，不引入绿色 */
.ob-state.opened{color:var(--gold)}

/* 数字排：纯文字，靠分隔符隔开，不要格子 */
.ob-grid{
  display:flex;align-items:baseline;gap:0;flex:none;
}
.ob-u{
  display:flex;align-items:baseline;gap:4px;
  padding:0 3px;
}
.ob-u b{
  font-family:'Trajan Pro',Georgia,serif;font-weight:400;
  font-size:34px;line-height:1;color:var(--gold);
  font-variant-numeric:tabular-nums;letter-spacing:1px;
  transition:.3s;
  text-shadow:0 0 26px rgba(223,179,87,.28);
}
.openbar.opened .ob-u b{
  color:#f0dcb4;text-shadow:0 0 26px rgba(240,220,180,.30);
}
.ob-u span{
  font-size:11px;letter-spacing:1px;color:var(--txt3);
  margin-right:2px;
}

/* 两组数字之间的分隔符 */
.ob-sep{
  width:1px;height:20px;align-self:center;
  background:var(--line2);margin:0 10px;
}

/* 秒数格额外加一层呼吸，让"每秒在跳"更明显 */
.ob-u.tick b{animation:obTick .5s ease-out}
@keyframes obTick{
  0%{transform:translateY(-2px) scale(1.08);filter:brightness(1.5)}
  100%{transform:none;filter:none}
}

/* 开区时间：小字放在数字下方 */
.ob-at{
  font-size:11px;color:var(--txt3);letter-spacing:1px;
}
.ob-at b{color:var(--txt2);font-weight:400}

/* 没配开服时刻时整条隐藏 */
.openbar.hidden{display:none}

/* 窄屏 */
@media (max-width:768px){
  .openbar{padding:4px 12px 8px;margin-bottom:14px}
  .ob-u b{font-size:26px}
  .ob-sep{margin:0 5px;height:16px}
  .ob-u span{font-size:10px}
}

/* ══════════════════════════════════════════════════════════
   中栏「本区速览」大卡
   ══════════════════════════════════════════════════════════
   取代了原来的假角色卡（写死的"暗夜游侠 Lv.89"）。
   现在展示的是**真实数据**：实时在线 / 角色总数 / 开服时间 /
   种族分布 / 规则摘要 —— 全部来自游戏库与网站库。

   底纹说明：**不用人物立绘**（CharacterBg 压暗后只剩一团脏影子，
   反而抢数据的注意力）。改用城堡夜景 + 极重的暗色渐变，
   只留一点氛围，数据本身才是主角。
*/
.zone-intro{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  padding:20px 22px 18px;
  min-height:420px;
  background:var(--panel);
}
/* 底纹：城堡夜景，压到几乎看不见，只做质感 */
.zone-intro .zi-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    url('/data/asset/images/background/bg-page.jpg') 50% 42%/cover no-repeat;
  opacity:.16;
  filter:grayscale(.55) contrast(1.05);
}
/* 顶部金色光晕，让大数字跳出来 */
.zone-intro::before{
  content:'';position:absolute;left:50%;top:-46%;
  width:130%;height:86%;transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 50%,rgba(223,179,87,.14),transparent 64%);
  pointer-events:none;z-index:0;
}
/* 底部压暗，保证文字对比度 */
.zone-intro::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,8,6,.5) 0%,rgba(10,8,6,.78) 46%,rgba(10,8,6,.95) 100%);
}
.zone-intro > *{position:relative;z-index:1}

/* —— 头部：区名 + 状态 —— */
.zi-hd{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line2)}
.zi-dot{width:9px;height:9px;border-radius:50%;background:var(--txt3);flex:none}
.zi-dot.st-open{background:var(--ok);box-shadow:0 0 10px rgba(87,192,122,.85)}
.zi-dot.st-coming{background:var(--warn);box-shadow:0 0 10px rgba(224,168,60,.75)}
.zi-dot.st-closed{background:var(--bad);box-shadow:0 0 10px rgba(200,80,80,.7)}
.zi-t{flex:1;min-width:0;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.zi-t b{font-size:19px;font-weight:500;letter-spacing:2px;color:var(--txt)}
.zi-t i{font-style:normal;font-size:12px;color:var(--txt2);letter-spacing:1px}
.zi-st{
  font-size:10.5px;letter-spacing:2px;padding:3px 11px;flex:none;
  border:1px solid var(--line2);color:var(--txt3);
}
.zi-st.st-open{color:var(--ok);border-color:rgba(87,192,122,.4);background:rgba(87,192,122,.08)}
.zi-st.st-coming{color:var(--warn);border-color:rgba(224,168,60,.4);background:rgba(224,168,60,.08)}
.zi-st.st-closed{color:var(--bad);border-color:rgba(200,80,80,.4);background:rgba(200,80,80,.08)}

/* —— 在线人数大数字 —— */
.zi-live{
  display:flex;align-items:center;gap:26px;
  padding:20px 0 18px;margin-bottom:4px;
  border-bottom:1px solid var(--line2);
}
.zi-num{display:flex;align-items:baseline;gap:10px;flex:none;position:relative}
.zi-num b{
  font-family:'Trajan Pro',Georgia,serif;font-weight:400;
  font-size:66px;line-height:.9;color:var(--gold);
  text-shadow:0 0 40px rgba(223,179,87,.5),0 2px 12px rgba(0,0,0,.7);
  font-variant-numeric:tabular-nums;
  letter-spacing:-1px;
}
.zi-num span{font-size:11px;letter-spacing:2.5px;color:var(--gold-dim)}
.zi-side{flex:1;display:flex;gap:28px;min-width:0}
.zi-side > div{display:flex;flex-direction:column;gap:5px;min-width:0;position:relative;padding-left:13px}
.zi-side > div::before{
  content:'';position:absolute;left:0;top:2px;bottom:2px;width:1px;
  background:linear-gradient(180deg,rgba(223,179,87,.5),transparent);
}
.zi-side em{font-style:normal;font-size:10px;letter-spacing:1.5px;color:var(--txt3)}
.zi-side b{font-size:15px;font-weight:500;color:var(--txt);letter-spacing:.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* —— 维护公告 —— */
.zi-notice{
  margin:14px 0 0;padding:9px 12px;
  border-left:2px solid var(--warn);background:rgba(224,168,60,.08);
  font-size:12px;color:var(--txt2);line-height:1.7;
}
.zi-notice b{color:var(--warn);letter-spacing:1px;margin-right:8px;font-weight:500}

/* —— 分组小标题 —— */
.zi-sub{
  font-size:9.5px;letter-spacing:3.5px;color:var(--gold-dim);
  margin-bottom:11px;display:flex;align-items:center;gap:9px;
}
.zi-sub::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--line2),transparent)}

/* —— 种族占比条 —— */
.zi-races{margin-bottom:15px}
.zi-race-list{display:flex;flex-direction:column;gap:7px}
.zi-race{display:flex;align-items:center;gap:11px}
.zi-rn{font-size:11.5px;color:var(--txt2);width:46px;flex:none;letter-spacing:1px}
.zi-rb{flex:1;height:5px;background:rgba(255,255,255,.055);overflow:hidden;border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
.zi-rb i{display:block;height:100%;transition:width .7s cubic-bezier(.2,.75,.3,1);
  box-shadow:0 0 9px currentColor;border-radius:3px}
.zi-rv{font-size:10.5px;color:var(--txt3);width:40px;text-align:right;flex:none;
  font-variant-numeric:tabular-nums}

/* —— 性别比例 —— */
.zi-gender{margin-bottom:15px}
.zi-gender-list{display:flex}
.zi-gbar{display:flex;width:100%;flex-wrap:wrap;gap:16px;align-items:center}
.zi-gi{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--txt2);letter-spacing:.5px}
.zi-gi i{width:8px;height:8px;border-radius:2px;flex:none}
.zi-gi b{color:var(--txt);font-weight:500;font-variant-numeric:tabular-nums}

/* —— 规则摘要 —— */
.zi-meta{margin-bottom:16px}
.zi-meta-list{display:flex;flex-wrap:wrap;gap:7px}
.zi-mi{
  display:flex;align-items:center;gap:7px;
  border:1px solid var(--line2);padding:5px 10px;
  background:rgba(255,255,255,.018);
  transition:.2s;
}
.zi-mi:hover{border-color:var(--gold-dim);background:rgba(223,179,87,.06)}
.zi-mi span{font-size:10.5px;color:var(--txt3);letter-spacing:.5px}
.zi-mi b{font-size:12px;color:var(--gold);font-weight:500;letter-spacing:.5px}

/* 规则摘要里的图标样式已迁到 css/icons.css（.si-img / .si-emoji），
   这里不再重复定义 —— 避免两处维护打架。 */

/* —— CTA —— */
.zi-cta{display:flex;gap:10px;margin-top:auto;padding-top:4px}
.zi-cta .btn{flex:1;padding:11px 8px;font-size:12.5px;letter-spacing:1.5px}

.zi-note{font-size:11.5px;color:var(--txt3);padding:8px 0}
.zi-updated{margin-top:11px;font-size:10px;color:var(--txt3);letter-spacing:.5px;opacity:.65;
  text-align:center}

@media (max-width:600px){
  .zone-intro{min-height:auto;padding:16px}
  .zi-num b{font-size:42px}
  .zi-live{flex-direction:column;align-items:flex-start;gap:14px}
  .zi-side{gap:18px}
}

/* ── 左：公告竖列 ── */
.ov-news{display:flex;flex-direction:column;min-height:0;height:100%}
.ov-news-list{
  flex:1;min-height:180px;overflow-y:auto;
  display:flex;flex-direction:column;
  margin:0 -6px;padding:0 6px;
}
.on-item{
  padding:13px 8px;border-bottom:1px solid var(--line2);
  cursor:pointer;transition:.18s;position:relative;
}
.on-item:last-child{border-bottom:none}
.on-item:hover{background:rgba(223,179,87,.06)}
.on-item:hover .on-title{color:var(--gold)}
.on-item.hot{
  background:linear-gradient(90deg,rgba(223,179,87,.09),transparent);
  border-left:2px solid var(--gold);padding-left:10px;
}
.on-title{
  font-size:14px;line-height:1.65;color:var(--txt);letter-spacing:.5px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.on-meta{display:flex;align-items:center;gap:7px;margin-top:7px}
.on-dt{font-size:10.5px;color:var(--txt3);font-family:Georgia,serif;margin-left:auto}
.ob{
  font-size:10px;letter-spacing:1px;color:var(--txt3);
  border:1px solid var(--line2);padding:1px 7px;
}
.ob.gold{color:var(--gold);border-color:rgba(223,179,87,.34);background:rgba(223,179,87,.08)}
.ob.top{color:var(--warn);border-color:rgba(224,168,60,.34);background:rgba(224,168,60,.08)}
.ov-news-more{padding-top:12px;margin-top:8px;border-top:1px solid var(--line2);text-align:center}
.ov-news-more .btn{width:100%}

@media (min-width:1024px){
  .ov{grid-template-columns:300px minmax(0,1fr) 340px}
}
@media (max-width:480px){
  .zone-intro{min-height:auto;padding:15px}
  .zi-num b{font-size:38px}
}

/* 当前区状态卡（只一张，所以做得饱满一些）
   ⚠️ 类名用 zst-* 而不是 srv-* —— .srv-card 在 site.css 里已经是
   「区服大卡片」的样式（充值档位 / 积分商城也在用），不能复用。*/
.srv-grid{display:grid;grid-template-columns:1fr;gap:9px}
.zst-card{
  border:1px solid var(--line2);padding:13px 14px;
  background:rgba(255,255,255,.015);transition:.22s;position:relative;
}
.zst-card:hover{border-color:var(--gold-dim);background:rgba(223,179,87,.05)}
.zst-card.on{border-color:rgba(223,179,87,.28);background:rgba(223,179,87,.05)}
.zst-hd{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.zst-dot{width:7px;height:7px;border-radius:50%;background:var(--txt3);flex:none}
.zst-dot.st-open{background:var(--ok);box-shadow:0 0 8px rgba(87,192,122,.7)}
.zst-dot.st-coming{background:var(--warn);box-shadow:0 0 8px rgba(224,168,60,.6)}
.zst-dot.st-closed{background:var(--bad)}
.zst-nm{font-size:13.5px;color:var(--txt);letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zst-sub{font-size:11px;color:var(--txt3);letter-spacing:.5px;margin-left:auto;flex:none}
.zst-num{display:flex;align-items:baseline;gap:6px;margin-bottom:10px}
.zst-num b{font-family:'Trajan Pro',Georgia,serif;font-weight:400;font-size:30px;color:var(--gold);line-height:1;
  font-variant-numeric:tabular-nums}
.zst-num span{font-size:10.5px;color:var(--txt3);letter-spacing:1px}
.zst-bar{height:3px;background:rgba(255,255,255,.07);overflow:hidden;margin-bottom:10px}
.zst-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-dim),var(--gold))}
.zst-rows{display:flex;gap:20px;margin-bottom:10px}
.zst-rows > div{display:flex;flex-direction:column;gap:3px;min-width:0}
.zst-rows em{font-style:normal;font-size:10px;letter-spacing:1.5px;color:var(--txt3)}
.zst-rows b{font-size:13px;font-weight:500;color:var(--txt);letter-spacing:.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zst-notice{
  margin-top:10px;padding-top:9px;border-top:1px solid var(--line2);
  font-size:11px;color:var(--txt2);line-height:1.7;
}

/* —— 开区时间 + 倒计时（一套结构，两种状态）——
   未开区：标题「距离开服」+ 剩余 天/时/分/秒
   已开区：标题「已经开区」+ 已运行 天/时/分/秒
   DOM 完全一样，只靠 .opened 类切换配色。 */
/* 游戏特色：横向条目 */
.feat-list{display:flex;flex-direction:column;gap:8px}
.feat{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border:1px solid var(--line2);transition:.22s;
  position:relative;overflow:hidden;
}
.feat::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--gold),transparent);
  opacity:0;transition:.22s;
}
.feat:hover{border-color:var(--gold-dim);background:rgba(223,179,87,.06)}
.feat:hover::before{opacity:1}
.feat .fi{
  width:42px;height:42px;flex:none;display:grid;place-items:center;
  border:1px solid var(--line2);background:rgba(0,0,0,.32);
  transition:.22s;
}
.feat:hover .fi{border-color:var(--gold-dim)}
.feat .fi img{
  width:25px;height:25px;object-fit:contain;opacity:.9;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.75));
}
.feat .ft{min-width:0}
.feat .ft b{display:block;font-size:13px;font-weight:400;color:var(--txt);letter-spacing:1.5px}
.feat .ft i{display:block;font-style:normal;font-size:10.5px;color:var(--txt3);letter-spacing:.5px;margin-top:3px}

/* 我的角色卡 */
.chars{display:grid;grid-template-columns:1fr;gap:12px}
.char-card{
  display:flex;align-items:center;gap:14px;padding:14px 16px;
  border:1px solid var(--line2);background:var(--panel);transition:.25s;
}
.char-card:hover{border-color:var(--gold-dim)}
.char-card .ch-av{
  width:54px;height:54px;flex:none;border:1px solid var(--line2);
  background:rgba(0,0,0,.3);overflow:hidden;display:grid;place-items:center;
}
.char-card .ch-av img{width:100%;height:100%;object-fit:cover}
.char-card .ch-b{flex:1;min-width:0}
.char-card .ch-n{font-size:15px;letter-spacing:2px;color:var(--gold2);margin-bottom:3px}
.char-card .ch-meta{font-size:11.5px;color:var(--txt2);letter-spacing:.5px}
.char-card .ch-meta2{font-size:11.5px;color:var(--txt3);letter-spacing:.5px;margin-top:2px}
.char-card .ch-s{
  flex:none;font-size:11px;letter-spacing:1px;padding:3px 11px;
  border:1px solid var(--ok);color:var(--ok);
}
.char-card .ch-s.off{border-color:var(--txt3);color:var(--txt3)}

/* ────────────────────────────────────────────
   4b. 区服卡片：城堡插画（M12）
   ──────────────────────────────────────────── */
/*
   插画用 --gw-art 变量注入（由 site.js 按区服顺序分配），
   放在卡片右侧，低透明度当底纹 —— 不遮文字。
   用伪元素承载，避免和 ::before 的悬停高光抢 background 槽位。
*/
.gw-card::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:var(--gw-art,none) var(--gw-art-pos,right center)/cover no-repeat;
  opacity:.26;transition:opacity .3s;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 42%,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0%,transparent 42%,#000 100%);
  pointer-events:none;
}
/* 悬停金光辉光压在插画上面 */
.gw-card::before{z-index:1}
.gw-card:hover::after{opacity:.46}
.gw-card .body,.gw-card .ico,.gw-card .go,.gw-card .srv-badge{position:relative;z-index:2}
.gw-card .ico{
  font-size:26px;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(3px);
}
.gw-card.locked::after{opacity:.14}

/* ────────────────────────────────────────────
   5. 下载中心（M12）
   ──────────────────────────────────────────── */
.dl-hero{
  position:relative;overflow:hidden;margin-bottom:22px;
  border:1px solid var(--line);
  background:linear-gradient(120deg,rgba(30,23,13,.92),rgba(12,9,6,.88));
}
.dl-hero-bg{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse at 78% 40%,rgba(223,179,87,.22),transparent 58%),
    url('/data/asset/images/background/bg-page.jpg') center/cover no-repeat;
  opacity:.42;
}
.dl-hero-in{position:relative;z-index:2;display:flex;align-items:center;gap:20px;padding:26px 24px}
.dl-hero-l{flex:1;min-width:0}
.dl-hero .kick{font-size:10px;letter-spacing:6px;color:var(--gold-dim);margin-bottom:8px}
.dl-hero h3{font-size:26px;font-weight:400;letter-spacing:6px;margin-bottom:8px}
.dl-hero p{font-size:12.5px;color:var(--txt2);letter-spacing:1px;line-height:1.9}
.dl-hero-meta{margin:12px 0 16px;font-size:12px;color:var(--txt3);letter-spacing:.5px}
.dl-hero-meta b{color:var(--gold);font-weight:500}
.dl-hero-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dl-md5{font-size:10.5px;color:var(--txt3);font-family:Consolas,monospace;letter-spacing:.5px}
.dl-hero-r{flex:none;width:210px;display:none;align-self:flex-end}
.dl-hero-r img{
  width:100%;opacity:.92;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.85)) drop-shadow(0 0 24px rgba(223,179,87,.18));
}

.dl-grid{display:grid;grid-template-columns:1fr;gap:12px}
.dl-card{
  display:flex;align-items:center;gap:14px;padding:15px 17px;
  border:1px solid var(--line2);background:var(--panel);transition:.25s;
}
.dl-card:hover{border-color:var(--gold-dim);background:rgba(223,179,87,.05)}
.dl-card.hot{border-color:rgba(223,179,87,.34)}
.dl-ico{
  width:56px;height:56px;flex:none;display:grid;place-items:center;
  border:1px solid var(--line2);background:rgba(0,0,0,.3);
}
.dl-ico img{width:34px;height:34px;object-fit:contain;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.7))}
.dl-b{flex:1;min-width:0}
.dl-t{font-size:15px;letter-spacing:2px;color:var(--gold2);display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.dl-v{
  font-size:10px;letter-spacing:1px;color:var(--gold);
  border:1px solid var(--gold-dim);padding:1px 7px;
}
.dl-k{font-size:10px;letter-spacing:1px;color:var(--txt3);border:1px solid var(--line2);padding:1px 7px}
.dl-s{font-size:11.5px;color:var(--txt2);letter-spacing:.5px;margin-top:4px}
.dl-r{font-size:11px;color:var(--txt3);letter-spacing:.5px;margin-top:3px}
.dl-f{display:flex;gap:14px;flex-wrap:wrap;font-size:10.5px;color:var(--txt3);margin-top:6px}
.dl-act{flex:none}

/* 环境要求 */
.req-list{display:flex;flex-direction:column;gap:9px}
.req{display:grid;grid-template-columns:88px 1fr;gap:12px;font-size:12.5px;align-items:baseline}
.req b{color:var(--gold);font-weight:500;letter-spacing:1px}
.req span{color:var(--txt2)}

/* FAQ */
.faq{display:flex;flex-direction:column;gap:8px}
.faq details{border:1px solid var(--line2);padding:11px 14px;transition:.2s}
.faq details[open]{border-color:var(--gold-dim);background:rgba(223,179,87,.05)}
.faq summary{cursor:pointer;font-size:13px;letter-spacing:1px;color:var(--txt);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"▸ ";color:var(--gold);margin-right:4px}
.faq details[open] summary::before{content:"▾ "}
.faq p{font-size:12px;color:var(--txt2);line-height:1.9;margin-top:8px;padding-left:16px}

/* 积分条（M12 抽奖视图顶部） */
.pts-hd-l{display:flex;align-items:center;gap:12px}
.pts-hd-l img{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.7))}
.pts-hd-l .pt{font-size:10.5px;letter-spacing:2px;color:var(--txt3)}
.pts-hd-l .pb{font-size:26px;color:var(--gold);font-weight:700;line-height:1.15}
.pts-hd-r{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* ────────────────────────────────────────────
   6. 代理独立门户（M12）
   ──────────────────────────────────────────── */
.agency-page{background:var(--ink)}
.ag-page{position:relative;min-height:100vh;display:flex;flex-direction:column}
.ag-page-bg{
  position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(60,44,20,.42),transparent 62%),
    radial-gradient(ellipse at 15% 100%,rgba(40,30,60,.3),transparent 58%);
}
.ag-top{
  border-bottom:1px solid var(--line2);
  background:rgba(8,6,4,.9);backdrop-filter:blur(16px);
}
.ag-top-in{display:flex;align-items:center;gap:16px;height:62px}
.ag-top-r{margin-left:auto;display:flex;align-items:center;gap:12px}
.ag-badge{
  font-size:10px;letter-spacing:3px;color:var(--gold);
  border:1px solid var(--gold-dim);padding:3px 11px;
}
.ag-foot{margin-top:auto;border-top:1px solid var(--line2);padding:18px 0}
.agency-host.standalone{
  position:static;display:block;background:none;padding:26px 16px 40px;
}
.agency-host.standalone .agency-panel{
  max-width:960px;margin:0 auto;
}
.agency-host.standalone .agency-panel .agency-x{display:none}

/* ────────────────────────────────────────────
   6b. 代理门户 V2：侧边栏仪表盘（暗金延续）
   ──────────────────────────────────────────── */
.agency-host.standalone .agency-panel.wide{max-width:1240px}
.ag2-layout{display:flex;gap:18px;align-items:flex-start}
.ag2-side{width:228px;flex:none;position:sticky;top:12px;
  border:1px solid var(--line2);background:linear-gradient(180deg,rgba(30,23,13,.92),rgba(12,9,6,.9));
  padding:16px 12px}
.ag2-me{display:flex;gap:10px;align-items:center;padding:4px 4px 12px;border-bottom:1px solid var(--line2);margin-bottom:12px}
.ag2-avatar{width:44px;height:44px;flex:none;display:grid;place-items:center;font-size:22px;
  border:1px solid var(--gold-dim);background:radial-gradient(ellipse at 50% 30%,rgba(223,179,87,.28),rgba(0,0,0,.4));color:var(--gold)}
.ag2-me b{display:block;font-size:14px;color:var(--gold2);letter-spacing:1px;font-weight:500}
.ag2-me span{display:block;font-size:11px;color:var(--txt3);letter-spacing:.5px;margin-top:2px}
.ag2-ratio{font-size:11px;color:var(--gold);border:1px solid var(--gold-dim);padding:1px 8px;margin-top:6px;display:inline-block}
.ag2-nav{display:flex;flex-direction:column;gap:4px}
.ag2-nav button{text-align:left;background:none;border:1px solid transparent;color:var(--txt2);
  padding:9px 12px;font-size:12.5px;letter-spacing:1.5px;cursor:pointer;border-radius:2px;transition:.18s}
.ag2-nav button:hover{color:var(--gold);background:rgba(223,179,87,.06)}
.ag2-nav button.on{color:var(--gold);border-color:rgba(223,179,87,.35);background:rgba(223,179,87,.1)}
.ag2-nav button.logout{color:var(--txt3)}
.ag2-main{flex:1;min-width:0}
.ag2-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.ag2-kpi{position:relative;overflow:hidden;border:1px solid var(--line2);padding:13px 14px;
  background:linear-gradient(135deg,rgba(223,179,87,.1),rgba(0,0,0,.3) 55%)}
.ag2-kpi::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--gold),transparent)}
.ag2-kpi .k{font-size:11px;color:var(--txt3);letter-spacing:1.5px;margin-bottom:6px}
.ag2-kpi .v{font-family:Georgia,serif;font-size:22px;color:var(--gold);line-height:1.1;font-variant-numeric:tabular-nums}
.ag2-kpi .s{font-size:11px;color:var(--txt2);margin-top:5px;letter-spacing:.5px}
.ag2-kpi .s b{color:var(--ok);font-weight:500}
.ag2-kpi.hot{border-color:rgba(223,179,87,.4)}
.ag2-card{border:1px solid var(--line2);background:rgba(0,0,0,.25);padding:16px;margin-bottom:14px}
.ag2-card h5{margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line2)}
.ag2-chart{width:100%;height:220px;display:block}
.ag2-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.ag2-toolbar input[type=search]{flex:1;min-width:180px;background:rgba(0,0,0,.4);border:1px solid var(--line2);
  color:var(--txt);padding:8px 12px;font-size:13px}
.ag2-toolbar input[type=search]:focus{border-color:var(--gold);outline:none}
.ag2-toolbar .btn.sm{flex:none}
.ag2-pages{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin:10px 0;font-size:12px;color:var(--txt2)}
.ag2-pages button{background:none;border:1px solid var(--line2);color:var(--txt2);padding:5px 12px;cursor:pointer;font-size:12px}
.ag2-pages button:disabled{opacity:.35;cursor:not-allowed}
.ag2-pages button:not(:disabled):hover{border-color:var(--gold);color:var(--gold)}
.st-ok{color:var(--ok)}.st-warn{color:var(--warn)}.st-bad{color:var(--bad)}.st-gold{color:var(--gold)}
.pill{display:inline-block;font-size:10.5px;letter-spacing:1px;padding:2px 9px;border:1px solid var(--line2);color:var(--txt2)}
.pill.green{color:var(--ok);border-color:rgba(87,192,122,.45);background:rgba(87,192,122,.08)}
.pill.yellow{color:var(--warn);border-color:rgba(224,168,60,.45);background:rgba(224,168,60,.08)}
.pill.red{color:var(--bad);border-color:rgba(200,80,80,.45);background:rgba(200,80,80,.08)}
.pill.gold{color:var(--gold);border-color:rgba(223,179,87,.4);background:rgba(223,179,87,.08)}
.promo-url{font-family:Consolas,monospace;font-size:11.5px;color:var(--gold2);word-break:break-all;
  background:rgba(0,0,0,.4);border:1px solid var(--line2);padding:7px 10px;margin-top:6px}
.qrbox{display:none;margin-top:8px;padding:10px;border:1px dashed var(--gold-dim);background:#fff;width:150px}
.qrbox.open{display:block}
.qrbox img,.qrbox canvas,.qrbox table{margin:0 auto}
.tree{border:1px solid var(--line2);padding:10px 12px;margin-bottom:14px;background:rgba(0,0,0,.2)}
.tree-node{margin:2px 0}
.tree-row{display:flex;align-items:center;gap:8px;padding:7px 9px;cursor:pointer;border:1px solid transparent}
.tree-row:hover{background:rgba(223,179,87,.06);border-color:var(--line2)}
.tree-caret{width:18px;color:var(--gold);flex:none;text-align:center}
.tree-kids{margin-left:22px;border-left:1px solid var(--line2);padding-left:8px}
.tree-meta{margin-left:auto;font-size:11px;color:var(--txt3);white-space:nowrap}
.tree-meta b{color:var(--gold);font-weight:500}
@media (max-width:960px){
  .ag2-layout{flex-direction:column}
  .ag2-side{width:100%;position:static}
  .ag2-nav{flex-direction:row;flex-wrap:wrap}
  .ag2-nav button{flex:1;min-width:100px;text-align:center}
  .ag2-kpis{grid-template-columns:repeat(2,1fr)}
  .agency-host.standalone .agency-panel.wide{padding:16px 12px}
}

/* ────────────────────────────────────────────
   响应式
   ──────────────────────────────────────────── */
@media (min-width:768px){
  .grid2{grid-template-columns:repeat(2,1fr)}
  .grid3{grid-template-columns:repeat(2,1fr)}
  .chars{grid-template-columns:repeat(2,1fr)}
  .dl-grid{grid-template-columns:repeat(2,1fr)}
  .dl-hero-r{display:block}
}
@media (min-width:1024px){
  .grid3{grid-template-columns:repeat(3,1fr)}
  .dl-grid{grid-template-columns:repeat(3,1fr)}
  .chars{grid-template-columns:repeat(3,1fr)}
  .hero-stats{gap:18px}
}
@media (max-width:480px){
  .hero-stats{gap:8px}
  .hero-stats > div{min-width:88px;padding:9px 11px}
  .hero-stats b{font-size:18px}
  .hcd-num{font-size:14px !important}
  .hcd-num u{font-size:8.5px;margin:0 2px 0 0}
  .dl-hero-in{padding:20px 16px}
  .dl-hero h3{font-size:21px;letter-spacing:4px}
  .dl-card{padding:12px 13px;gap:11px}
  .dl-ico{width:46px;height:46px}
  .dl-ico img{width:28px;height:28px}
  .req{grid-template-columns:72px 1fr;gap:9px}
  .pts-hd-r{margin-left:0;width:100%;margin-top:10px}
}