/* ═══ CZS CLUB · 正式站统一设计语言（2026-10-24 自原型终版移植） ═══
   配色：中国红品牌色板（红=品牌信号，中性色承载内容，状态色语义化）
   深色：炭黑底 + 同色相提亮红 · 浅色：暖浅灰底 + 中国红 #C8102E
   含：门户/首页线稿组件 + 下拉导航 + 主题弹层 + 强调色预设 + 旧页面通用组件 */
/* ── 深色主题（默认）：炭黑底 + 同色相提亮中国红 ── */
:root{
  --bg:#1b1b1f;            /* 炭黑，非纯黑 */
  --panel:#222227;
  --panel-soft:#26262c;
  --row:#2e2e34;
  --border:#3a3a41;
  --border-strong:#6e6e76;
  --text:#f0f0ee;
  --muted:#a8a8ac;
  --dim:#7e7e84;
  --accent:#f0566b;        /* 中国红在深底上提亮（同色相），正文对比 5.1:1 */
  --accent-wash:rgba(240,86,107,.14);
  --success:#3ba67e;
  --warning:#e5a33c;
  --danger:#e06666;
  --glow-a:rgba(240,86,107,.05);    /* 景深：顶部淡红环境光 */
  --glow-b:rgba(255,255,255,.03);
  --header-bg:rgba(18,18,21,.96);   /* 顶栏加深一档，与主体区分 */
  --mask:rgba(10,10,12,.55);
  --edge:rgba(255,255,255,.06);     /* 面板顶部高光，拉开层次 */
  --shadow-pop:0 14px 40px rgba(0,0,0,.5);
  --header-h:60px; --inset:clamp(16px,4vw,56px); --maxw:1160px;
  --cond:'Arial Narrow','PingFang SC','Microsoft YaHei',sans-serif;
  --body:'PingFang SC','Microsoft YaHei','Noto Sans SC',system-ui,sans-serif;
}

/* ── 浅色主题：暖浅灰底 + 中国红（色板原值） ── */
[data-theme="light"]{
  --bg:#f6f6f4;            /* 暖浅灰画布 */
  --panel:#ffffff;         /* 卡片 / 内容区纯白 */
  --panel-soft:#fbfbf9;
  --row:#f0f0ed;
  --border:#e4e4e4;        /* 边框灰 */
  --border-strong:#8f8f8a;
  --text:#242424;          /* 炭黑正文 */
  --muted:#777777;
  --dim:#8b8b85;
  --accent:#c8102e;        /* 中国红，纸面上对比 5.5:1 */
  --accent-wash:#fbeaec;   /* 浅红柔和强调（色板原值） */
  --success:#16845b;
  --warning:#b76e00;
  --danger:#c62828;
  --glow-a:rgba(200,16,46,.045);
  --glow-b:rgba(0,0,0,.03);
  --header-bg:rgba(234,234,231,.96);  /* 顶栏加深一档，与主体区分 */
  --mask:rgba(36,36,36,.45);
  --edge:rgba(255,255,255,.75);
  --shadow-pop:0 12px 32px rgba(36,36,36,.14);
}

*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bg)}
body{font-family:var(--body);color:var(--text);min-height:100svh;
  background:
    radial-gradient(1200px 600px at 80% -10%,var(--glow-a),transparent 60%),
    radial-gradient(900px 500px at 10% 110%,var(--glow-b),transparent 55%),
    var(--bg);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:var(--accent);color:var(--bg)}  /* 文本高亮：强调色反白 */

/* ── 顶栏 ── */
header.top{position:sticky;top:0;z-index:50;height:var(--header-h);
  display:flex;align-items:center;gap:16px;padding:0 var(--inset);
  background:var(--header-bg);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--cond);
  font-size:20px;font-weight:700;letter-spacing:.06em;flex:none}
.brand .tld{color:var(--accent)}
.game-switch{display:flex;border:1px solid var(--border);border-radius:3px;overflow:hidden}
.game-switch a,.game-switch button{background:transparent;border:0;color:var(--dim);font-family:var(--cond);
  font-size:14px;letter-spacing:.06em;padding:7px 14px;cursor:pointer}
.game-switch a.on,.game-switch button.on{background:var(--accent-wash);color:var(--accent)}
.game-switch a:hover,.game-switch button:hover{color:var(--text)}
.theme-btn{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:3px;
  font-family:var(--cond);font-size:14px;letter-spacing:.06em;padding:6px 12px;cursor:pointer;white-space:nowrap}
.theme-btn:hover{border-color:var(--accent);color:var(--accent)}
nav.main{display:flex;gap:4px;margin-left:auto;align-items:center}
nav.main a{font-family:var(--cond);font-size:15px;letter-spacing:.08em;padding:7px 12px;
  border:1px solid transparent;color:var(--muted);border-radius:3px;white-space:nowrap}
nav.main a:hover{color:var(--text);border-color:var(--border)}
nav.main a.on{color:var(--accent);border-color:var(--accent);background:var(--accent-wash)}

/* ── 骨架 ── */
main{max-width:var(--maxw);margin:0 auto;padding:26px var(--inset) 70px}
.hero{padding:34px 0 22px}
.kicker{font-family:var(--cond);color:var(--accent);letter-spacing:.34em;
  font-size:13px;text-transform:uppercase}
h1{font-family:var(--cond);font-size:clamp(32px,6vw,56px);line-height:1.06;
  letter-spacing:.02em;margin:10px 0 12px;text-transform:uppercase}
h2{font-family:var(--cond);font-size:24px;letter-spacing:.05em;margin:34px 0 4px;
  text-transform:uppercase;display:flex;align-items:center;gap:10px}
h2::before{content:"";width:10px;height:10px;background:var(--accent);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.lede{color:var(--muted);font-size:16px;max-width:640px;line-height:1.7}
.muted{color:var(--dim);font-size:13px}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:4px;padding:18px 20px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--dim);flex:none;display:inline-block}
.dot.live{background:var(--success);box-shadow:0 0 8px var(--success)}
.dot.off{background:var(--warning)}

/* 景深：所有面板/卡片带顶部高光，形成层级 */
.panel,.mbtn,.game-card,.role,.ncard,.carousel,.soon-item,.livebar{box-shadow:inset 0 1px 0 var(--edge)}

/* ── 门户：双游戏入口 ── */
.portal-wrap{max-width:var(--maxw);margin:0 auto;padding:clamp(24px,6vh,64px) var(--inset) 60px}
.portal-head{text-align:center;margin-bottom:clamp(22px,5vh,44px)}
.portal-head .kicker{letter-spacing:.4em}
.portal-head h1{margin:8px 0 10px}
.portal-head .lede{margin:0 auto}
.games{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:820px){.games{grid-template-columns:1fr}}
.game-card{position:relative;display:flex;flex-direction:column;gap:14px;text-align:left;
  background:var(--panel);border:1px solid var(--border);border-radius:6px;
  padding:clamp(24px,4vw,38px);cursor:pointer;color:var(--text);
  transition:border-color .15s,transform .15s,box-shadow .15s;overflow:hidden}
.game-card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .2s;
  background:radial-gradient(600px 300px at 50% 0%,var(--accent-wash),transparent 70%)}
.game-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-pop)}
.game-card:hover::after{opacity:1}
.game-card .gc-top{display:flex;align-items:center;gap:14px}
.game-card .gc-logo{flex:none;width:56px;height:56px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border-strong);border-radius:6px;font-family:var(--cond);
  font-size:24px;font-weight:700;color:var(--accent);background:var(--accent-wash)}
.game-card .gc-name{font-family:var(--cond);font-size:clamp(22px,3.4vw,30px);letter-spacing:.03em;line-height:1.1}
.game-card .gc-cn{color:var(--muted);font-size:14px;margin-top:3px;letter-spacing:.2em}
.game-card .gc-desc{color:var(--dim);font-size:14px;line-height:1.7;min-height:3.4em}
.game-card .gc-go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--cond);font-size:16px;letter-spacing:.1em;color:var(--accent)}
.game-card .gc-go .arr{transition:transform .15s}
.game-card:hover .gc-go .arr{transform:translateX(4px)}
.game-card.soon{opacity:.92}
.game-card.soon .gc-logo{color:var(--dim);background:transparent;border-style:dashed}
.game-card .gc-status{position:absolute;top:16px;right:16px;font-size:11px;letter-spacing:.12em;
  padding:2px 9px;border-radius:999px;border:1px solid var(--success);color:var(--success)}
.game-card.soon .gc-status{border-color:var(--warning);color:var(--warning)}
.portal-back{margin-top:18px;text-align:center}

/* ── 占位页 ── */
.ph-hero{text-align:center;padding:clamp(30px,7vh,70px) 20px 30px}
.ph-hero .big{font-family:var(--cond);font-size:clamp(36px,7vw,64px);letter-spacing:.04em}
.ph-hero .big em{font-style:normal;color:var(--warning)}
.ph-hero .sub{color:var(--muted);margin-top:16px;line-height:1.9;max-width:600px;margin-left:auto;margin-right:auto}
.ph-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.soon-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:14px}
.soon-item{background:var(--panel);border:1px dashed var(--border-strong);border-radius:4px;padding:16px}
.soon-item .k{font-family:var(--cond);font-size:16px;letter-spacing:.05em}
.soon-item .d{color:var(--dim);font-size:13px;margin-top:6px;line-height:1.6}

/* ── 按钮 ── */
button.act,.btn.act{display:inline-block;background:var(--accent);color:var(--bg);border:0;font-family:var(--cond);
  font-size:16px;letter-spacing:.08em;padding:11px 24px;border-radius:3px;cursor:pointer;font-weight:700}
button.act:hover,.btn.act:hover{filter:brightness(1.1)}
button.ghost,.btn.ghost{display:inline-block;background:transparent;border:1px solid var(--border);color:var(--muted);
  padding:10px 20px;border-radius:3px;cursor:pointer;font-size:14px;font-family:var(--cond);letter-spacing:.06em}
button.ghost:hover,.btn.ghost:hover{border-color:var(--accent);color:var(--text)}

/* ── 轮播 ── */
.carousel{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:4px;
  background:linear-gradient(100deg,var(--panel) 0%,var(--panel-soft) 100%)}
.carousel .track{display:flex;transition:transform .5s ease}
.carousel .slide{min-width:100%;padding:26px 28px;cursor:pointer}
.carousel .slide .t{font-family:var(--cond);font-size:clamp(20px,3.4vw,26px);letter-spacing:.04em}
.carousel .slide .s{color:var(--muted);font-size:13px;margin-top:6px}
.carousel .slide.hot .t{color:var(--accent)}
.carousel .dots{position:absolute;right:14px;bottom:10px;display:flex;gap:6px}
.carousel .dots i{width:8px;height:8px;border-radius:50%;background:var(--border-strong);cursor:pointer;opacity:.5}
.carousel .dots i.on{background:var(--accent);opacity:1}

/* ── 实时状态条 ── */
.livebar{display:flex;gap:10px;align-items:center;margin-top:12px;border:1px solid var(--border);
  padding:8px 14px;font-size:13px;color:var(--muted);background:var(--panel);border-radius:3px;flex-wrap:wrap}
.livebar .ts{margin-left:auto;font-family:var(--cond);letter-spacing:.1em;color:var(--dim)}

/* ── 身份导览 ── */
.roles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:14px}
.role{background:var(--panel);border:1px solid var(--border);border-radius:4px;padding:18px;
  transition:border-color .15s,transform .15s}
.role:hover{border-color:var(--accent);transform:translateY(-2px)}
.role .rk{display:flex;align-items:center;gap:10px;font-family:var(--cond);font-size:17px;letter-spacing:.05em}
.role .rk .ic{flex:none;width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border-strong);border-radius:4px;font-size:16px;color:var(--accent);background:var(--accent-wash)}
.role .rd{color:var(--dim);font-size:13px;margin-top:10px;line-height:1.6}
.role .rl{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.role .rl a{font-size:12px;border:1px solid var(--border);color:var(--muted);padding:3px 10px;border-radius:999px}
.role .rl a:hover{border-color:var(--accent);color:var(--accent)}

/* ── 按钮矩阵 ── */
.matrix{margin-top:22px}
.mrow-label{font-family:var(--cond);font-size:13px;letter-spacing:.2em;color:var(--dim);
  text-transform:uppercase;margin:20px 0 10px;display:flex;align-items:center;gap:8px}
.mrow-label::after{content:"";flex:1;height:1px;background:var(--border)}
.mrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:10px}
.mbtn{display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--border);
  border-radius:4px;padding:14px 12px;cursor:pointer;transition:border-color .15s,transform .15s;color:var(--text);text-align:left}
.mbtn:hover{border-color:var(--accent);transform:translateY(-2px)}
.mbtn .ic{flex:none;width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border-strong);border-radius:4px;font-family:var(--cond);font-size:19px;
  font-weight:700;color:var(--accent);background:var(--accent-wash)}
.mbtn .k{font-family:var(--cond);font-size:16px;letter-spacing:.05em}
.mbtn .d{color:var(--dim);font-size:12px;margin-top:2px;line-height:1.45}
.mbtn.soon{opacity:.75}
.mbtn.soon .ic{color:var(--dim);background:transparent;border-style:dashed}
.soon-tag{font-size:10px;color:var(--warning);border:1px solid var(--warning);
  padding:0 5px;border-radius:2px;margin-left:6px;vertical-align:2px}

/* ── 内容双栏 / 表格 / feed ── */
.cols{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;margin-top:10px}
@media(max-width:860px){.cols{grid-template-columns:1fr}}
table.grid{width:100%;border-collapse:collapse;margin-top:10px;font-size:14px}
table.grid th{font-family:var(--cond);text-align:left;color:var(--dim);font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:8px 10px;border-bottom:1px solid var(--border-strong)}
table.grid td{padding:9px 10px;border-bottom:1px solid var(--border)}
table.grid tr:nth-child(even) td{background:var(--panel-soft)}
.badge{display:inline-block;border:1px solid var(--border-strong);color:var(--muted);
  font-size:11px;padding:1px 8px;border-radius:999px;letter-spacing:.05em}
.badge.hot{border-color:var(--accent);color:var(--accent)}
.code{font-family:ui-monospace,Consolas,monospace;font-size:13px;color:var(--accent)}
.feed .post{display:flex;gap:12px;padding:12px 6px;border-bottom:1px solid var(--border);align-items:baseline}
.feed .post:last-child{border-bottom:0}
.feed .who{flex:none;width:76px;color:var(--dim);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed .what{flex:1;line-height:1.65;font-size:14px}
.feed .what .meta{color:var(--dim);font-size:12px;margin-top:3px}
.chip{display:inline-block;font-size:11px;border:1px solid var(--accent);color:var(--accent);
  border-radius:2px;padding:0 6px;margin-right:6px}

/* ── 资讯卡 ── */
.news3{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:14px}
.ncard{background:var(--panel);border:1px solid var(--border);border-radius:4px;padding:16px;
  transition:border-color .15s,transform .15s;cursor:pointer}
.ncard:hover{border-color:var(--accent);transform:translateY(-2px)}
.ncard .k{font-family:var(--cond);font-size:17px;letter-spacing:.04em;margin-top:8px}
.ncard .d{color:var(--dim);font-size:13px;margin-top:6px;line-height:1.55}
.ncard .dt{font-size:11px;color:var(--dim);letter-spacing:.1em;font-family:var(--cond)}

/* ── 页脚 ── */
footer.site{border-top:1px solid var(--border);margin-top:40px;padding:26px var(--inset);
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;color:var(--dim);font-size:13px}

/* ── 总览抽屉 ── */
.fab{position:fixed;left:16px;bottom:18px;z-index:60;background:var(--panel);
  border:1px solid var(--border-strong);color:var(--text);border-radius:4px;padding:10px 14px;
  font-family:var(--cond);font-size:15px;letter-spacing:.1em;cursor:pointer;display:flex;align-items:center;gap:8px}
.fab:hover{border-color:var(--accent);color:var(--accent)}
.drawer-mask{position:fixed;inset:0;background:var(--mask);z-index:70;display:none}
.drawer-mask.open{display:block}
.drawer{position:fixed;top:0;left:0;bottom:0;width:min(300px,85vw);z-index:71;background:var(--panel);
  border-right:1px solid var(--border);transform:translateX(-102%);transition:transform .25s ease;
  display:flex;flex-direction:column}
.drawer.open{transform:translateX(0)}
.drawer .hd{padding:16px 18px;border-bottom:1px solid var(--border);font-family:var(--cond);
  letter-spacing:.15em;font-size:17px;display:flex;justify-content:space-between;align-items:center}
.drawer .hd button{background:none;border:0;color:var(--dim);font-size:20px;cursor:pointer}
.drawer .bd{overflow-y:auto;padding:10px 0}
.drawer a{display:flex;justify-content:space-between;padding:11px 18px;color:var(--muted);font-size:14px}
.drawer a:hover{background:var(--row);color:var(--text)}
.drawer .grp{padding:10px 18px 4px;font-size:11px;color:var(--dim);letter-spacing:.2em;text-transform:uppercase}

/* ── 原型工具：toast ── */
.toast{position:fixed;left:50%;bottom:76px;transform:translate(-50%,16px);z-index:80;
  background:var(--panel);border:1px solid var(--accent);color:var(--text);font-size:13px;
  padding:10px 18px;border-radius:4px;opacity:0;pointer-events:none;transition:all .25s ease;
  max-width:min(90vw,480px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:900px){
  .game-switch{display:none}
  nav.main a{padding:6px 8px;font-size:13px}
}
@media(max-width:640px){
  .mrow{grid-template-columns:repeat(2,1fr)}
}

/* ═══ 首页线稿版（home.html · 2026-10-22 依据手绘线稿制作） ═══ */

/* ── 顶栏：下拉导航 ── */
nav.drops{display:flex;gap:2px;align-items:center;flex-wrap:nowrap;flex:1 1 auto;min-width:0}
.nav-drop{position:relative}
.nav-drop>button{display:inline-flex;align-items:center;gap:5px;background:transparent;
  border:1px solid transparent;color:var(--muted);font-family:var(--cond);font-size:15px;
  letter-spacing:.08em;padding:7px 12px;border-radius:3px;cursor:pointer;white-space:nowrap}
.nav-drop>button:hover{color:var(--text);border-color:var(--border)}
.nav-drop>button .caret{font-size:10px;transition:transform .15s}
.nav-drop:hover>button .caret,.nav-drop:focus-within>button .caret{transform:rotate(180deg)}
.drop-menu{display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:210px;
  background:var(--panel);border:1px solid var(--border-strong);border-radius:4px;
  box-shadow:var(--shadow-pop);padding:6px;z-index:70}
.nav-drop:hover .drop-menu,.nav-drop:focus-within .drop-menu{display:block}
.drop-menu a{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:9px 11px;font-size:13px;color:var(--muted);border-radius:3px;cursor:pointer}
.drop-menu a:hover{background:var(--row);color:var(--text)}
.drop-menu a .en{color:var(--dim);font-size:11px;font-family:var(--cond);letter-spacing:.08em}
.drop-menu a.on{color:var(--accent)}
.drop-menu a.on .en{color:var(--accent)}
.drop-menu .lock{color:var(--warning);font-size:11px}

/* ── 顶栏右侧：用户 / 登录 / 语言 ── */
.hd-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.icon-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--border);border-radius:50%;
  color:var(--muted);cursor:pointer;font-size:15px}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.login-btn{background:var(--accent);color:var(--bg);border:0;font-family:var(--cond);
  font-size:14px;letter-spacing:.1em;padding:8px 20px;border-radius:3px;cursor:pointer;font-weight:700}
.login-btn:hover{filter:brightness(1.1)}
.lang-drop>button{font-size:13px}

/* ── 游戏大标题：WARDOGS / HELL LET LOOSE 二选一，随游戏切换联动 ── */
.home-main{padding-top:0}

/* ── 广告轮播（大 banner 位） ── */
.banner{position:relative;overflow:hidden;margin:24px 0;max-width:1600px;
  border:1px solid var(--border);border-radius:24px;
  box-shadow:inset 0 1px 0 var(--edge)}
.banner .track{display:flex;transition:transform .55s ease}
.bslide{min-width:100%;aspect-ratio:16/9;max-height:calc(100vh - 128px);min-height:280px;display:flex;flex-direction:column;
  justify-content:flex-end;gap:8px;padding:30px 34px;cursor:pointer;position:relative;color:#eef0e4}
.bslide .tag{align-self:flex-start;font-size:11px;letter-spacing:.14em;padding:2px 10px;
  border-radius:999px;border:1px solid rgba(255,255,255,.45);font-family:var(--cond)}
.bslide .t{font-family:var(--cond);font-size:clamp(24px,4.4vw,40px);letter-spacing:.04em;line-height:1.15}
.bslide .s{font-size:14px;color:rgba(238,240,228,.78)}
.bslide.hot .t{color:#ffd9de}
.banner .arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;
  border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.25);
  color:#fff;font-size:18px;cursor:pointer;z-index:2;line-height:1}
.banner .arrow:hover{border-color:#fff}
.banner .arrow.prev{left:14px}
.banner .arrow.next{right:14px}
.banner .dots{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  display:flex;gap:7px;z-index:2}
.banner .dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer}
.banner .dots i.on{background:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
/* 轮播占比参考 Team Liquid 首页 hero：容器内 16:9（圆角留白） → 平板 3:2 → 手机内容自适应 */
@media(max-width:991px){.bslide{aspect-ratio:3/2}}
@media(max-width:767px){.bslide{aspect-ratio:auto;min-height:220px}}

/* ── 胶囊快捷入口条 ── */
.pillbar{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:22px auto 0;
  padding:10px 12px;border:1px solid var(--border-strong);border-radius:999px;
  width:max-content;max-width:100%;background:var(--panel)}
.pillbar button{border:1px solid var(--border);background:var(--panel-soft);color:var(--text);
  border-radius:999px;padding:10px 24px;font-family:var(--cond);font-size:15px;
  letter-spacing:.08em;cursor:pointer;transition:all .15s}
.pillbar button:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}

/* ── 欢迎文字轮播（跑马灯） ── */
.marquee{margin:0;border:0;border-bottom:1px solid var(--border);overflow:hidden;
  background:var(--panel);box-shadow:inset 0 1px 0 var(--edge)}
.mq-track{display:flex;width:max-content;white-space:nowrap;animation:mq 22s linear infinite;
  padding:8px 0;font-family:var(--cond);font-size:13px;letter-spacing:.1em;color:var(--muted)}
.mq-track b{color:var(--accent);font-weight:700;margin:0 6px}
.mq-track span{padding-right:48px}
.marquee:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}

/* ── 信息区拼版（文字框，非按钮） ── */
.mosaic{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;margin-top:36px;
  grid-template-areas:"a b" "a c" "d e" "f e"}
.mbox{background:var(--panel);border:1px solid var(--border);border-radius:4px;
  padding:18px 20px;box-shadow:inset 0 1px 0 var(--edge)}
.mbox .mk{font-family:var(--cond);font-size:17px;letter-spacing:.06em;margin-bottom:8px;
  display:flex;align-items:center;gap:8px}
.mbox .mk::before{content:"";width:8px;height:8px;background:var(--accent);flex:none;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.mbox p{color:var(--muted);font-size:13px;line-height:1.8}
.m-a{grid-area:a;display:flex;align-items:center;gap:22px}
.m-b{grid-area:b}.m-c{grid-area:c}.m-d{grid-area:d}.m-e{grid-area:e}.m-f{grid-area:f}
.m-e ul{list-style:none;font-size:13px;color:var(--muted);line-height:2.1}
.m-e ul li{display:flex;gap:10px;align-items:baseline}
.m-e ul .dt{color:var(--dim);font-family:var(--cond);font-size:11px;letter-spacing:.08em;flex:none}

/* ── 页脚（线稿版） ── */
footer.home-foot{border-top:1px solid var(--border);margin-top:46px;padding:30px var(--inset) 42px}
.foot-grid{max-width:var(--maxw);margin:0 auto;display:grid;
  grid-template-columns:auto 1fr 1fr auto;gap:22px;align-items:start}
.foot-brand{display:flex;align-items:center;gap:10px;font-family:var(--cond);
  font-size:18px;font-weight:700;letter-spacing:.06em;padding-top:12px}
.foot-box{border:1px solid var(--border);border-radius:4px;padding:14px 18px;background:var(--panel)}
.foot-box .fk{font-family:var(--cond);font-size:14px;letter-spacing:.14em;
  color:var(--accent);margin-bottom:6px}
.foot-box p{font-size:13px;color:var(--muted);line-height:1.8}
.foot-contact ul{list-style:none;font-size:13px;color:var(--muted);line-height:2.1}
.foot-contact li b{color:var(--text);font-weight:600;margin-right:8px;
  font-family:var(--cond);letter-spacing:.05em}
.foot-copy{max-width:var(--maxw);margin:20px auto 0;color:var(--dim);font-size:12px}

@media(max-width:960px){
  .mosaic{grid-template-columns:1fr;grid-template-areas:"a" "b" "c" "d" "e" "f"}
  .m-a{flex-direction:column;text-align:center}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .foot-grid{grid-template-columns:1fr}
  .pillbar{border-radius:6px}
}

/* ── 弹窗（门户"开发中"提示等） ── */
.modal-mask{position:fixed;inset:0;background:var(--mask);z-index:80;display:none;
  align-items:center;justify-content:center;padding:20px}
.modal-mask.open{display:flex}
.modal{max-width:420px;background:var(--panel);border:1px solid var(--border-strong);
  border-radius:6px;padding:26px 28px;box-shadow:var(--shadow-pop);text-align:center}
.modal .mk{font-family:var(--cond);font-size:20px;letter-spacing:.06em;margin-bottom:10px}
.modal p{color:var(--muted);font-size:14px;line-height:1.9;margin-bottom:18px}
button.game-card{font:inherit}

/* ── 页脚：入驻战队成员入口（CZS 内部成员功能） ── */
.foot-member{max-width:var(--maxw);margin:0 auto 22px;border:1px solid var(--border);
  border-radius:4px;background:var(--panel);padding:14px 18px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.foot-member .fk{font-family:var(--cond);font-size:14px;letter-spacing:.14em;
  color:var(--accent);margin-right:8px}
.foot-member a{font-size:13px;color:var(--muted);border:1px solid var(--border);
  border-radius:3px;padding:6px 14px;cursor:pointer}
.foot-member a:hover{border-color:var(--accent);color:var(--accent)}

/* ── 顶栏中央游戏标题：grid 三栏定位，左右内容再宽也不会压住标题 ── */
header.top.home-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.hg-left{display:flex;align-items:center;gap:16px;min-width:0;flex-wrap:nowrap}
.home-grid .hd-right{margin-left:0;justify-self:end}
.top-game{justify-self:center;
  font-family:var(--cond);font-size:21px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);white-space:nowrap;pointer-events:none}
@media(max-width:1100px){.top-game{display:none}}
/* 非大屏适配：顶栏保持单行。中屏收起次要下拉（入口在「总览」里都有），小屏再收「总览」和用户图标 */
@media(max-width:1280px){
  header.top.home-grid{gap:10px}
  .hg-left{gap:10px}
  .brand{font-size:18px}
  .nav-drop>button{padding:7px 9px;font-size:14px}
}
@media(max-width:1500px){
  .home-grid .drops .nav-drop:nth-child(3),
  .home-grid .drops .nav-drop:nth-child(4){display:none}
}
@media(max-width:900px){
  .home-grid .drops .nav-drop:nth-child(2){display:none}
  .home-grid .icon-btn{display:none}
}
@media(max-width:560px){
  .brand{font-size:16px}
  .home-grid .drops .nav-drop:nth-child(1){display:none}
  .home-grid .theme-btn{display:none}
  .login-btn{padding:8px 12px;font-size:13px}
}

/* ── 返回顶部（右下角方块图标） ── */
.backtop{position:fixed;right:16px;bottom:18px;z-index:60;width:44px;height:44px;
  background:var(--panel);border:1px solid var(--border-strong);border-radius:4px;
  color:var(--muted);font-size:18px;cursor:pointer;display:none;
  align-items:center;justify-content:center}
.backtop.show{display:flex}
.backtop:hover{border-color:var(--accent);color:var(--accent)}


/* ═══ 正式站扩展组件（在中国红基座之上） ═══ */

/* ── 模块卡片（社区/开黑/链接等页） ── */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:22px}
.card{position:relative;display:block;background:var(--panel);border:1px solid var(--border);
  padding:20px 18px 16px;border-radius:4px;transition:border-color .15s,transform .15s;
  box-shadow:inset 0 1px 0 var(--edge)}
.card:hover{border-color:var(--accent);transform:translateY(-2px)}
.card .k{font-family:var(--cond);font-size:18px;letter-spacing:.06em}
.card .d{color:var(--dim);font-size:13px;margin-top:6px;line-height:1.55}
.card .go{position:absolute;top:16px;right:16px;color:var(--dim);font-family:var(--cond)}
.card:hover .go{color:var(--accent)}
.card.soon{opacity:.8}

/* ── 统计与计算 ── */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.stat .k{font-size:12px;color:var(--dim);letter-spacing:.12em;text-transform:uppercase}
.stat .v{font-family:var(--cond);font-size:30px;font-weight:700;margin-top:2px}
.stat .v small{font-size:15px;color:var(--dim);font-weight:500;margin-left:4px}
.calc{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
@media(max-width:820px){.calc{grid-template-columns:1fr}}
.field label{display:block;font-size:12px;color:var(--dim);letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:6px}
.field input,.field select{width:100%;background:var(--panel-soft);border:1px solid var(--border);
  color:var(--text);padding:10px 12px;font-size:15px;border-radius:3px;font-family:var(--body)}
.field input:focus,.field select:focus{border-color:var(--accent);outline:none}
.out{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:16px}
.out .cell{background:var(--panel-soft);border:1px solid var(--border);padding:14px;border-radius:4px}
.out .cell .k{font-size:11px;color:var(--dim);letter-spacing:.14em;text-transform:uppercase}
.out .cell .v{font-family:var(--cond);font-size:32px;font-weight:700;color:var(--accent)}
.out .cell .u{font-size:13px;color:var(--dim);margin-left:5px}

/* ── 杂项 ── */
.tagline{display:inline-flex;gap:10px;align-items:center;margin-top:16px;
  border:1px solid var(--border);padding:8px 14px;font-size:13px;color:var(--muted);
  background:var(--panel);border-radius:3px}
.empty{color:var(--dim);padding:22px 6px;font-size:14px}
.notice{border:1px dashed var(--warning);color:var(--warning);font-size:13px;
  padding:10px 14px;border-radius:4px;margin-top:14px;line-height:1.6}
table.grid tr:hover td{background:var(--row)}
.dev-hero{text-align:center;padding:70px 20px 40px}
.dev-hero .big{font-family:var(--cond);font-size:clamp(30px,5vw,46px);letter-spacing:.05em}
.dev-hero .sub{color:var(--muted);margin-top:14px;line-height:1.9;max-width:560px;margin-left:auto;margin-right:auto}
.badge.danger{border-color:var(--danger);color:var(--danger)}
.pillbar a{border:1px solid var(--border);background:var(--panel-soft);color:var(--text);
  border-radius:999px;padding:10px 24px;font-family:var(--cond);font-size:15px;
  letter-spacing:.08em;cursor:pointer;transition:all .15s}
.pillbar a:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.nav-drop.open .drop-menu{display:block}
footer.site a{color:var(--muted)}footer.site a:hover{color:var(--accent)}
h1,h2{text-transform:none}
.search-box{width:100%;background:var(--panel-soft);border:1px solid var(--border);
  color:var(--text);padding:10px 12px;font-size:15px;border-radius:3px}

/* ── 轮播帧背景图（素材接入） ── */
.bslide{background-size:cover;background-position:center}
.bslide::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(20,20,24,.25) 0%,rgba(20,20,24,.78) 100%)}
.bslide>*{position:relative;z-index:1}

/* ── 强调色预设（默认中国红=品牌色；另两色为个人偏好可选） ──
   顺序必须在 [data-theme="light"] 之后 */
[data-accent="green"]{
  --accent:#9fc15a;--accent-wash:rgba(159,193,90,.14);
  --glow-a:rgba(159,193,90,.05);
}
[data-accent="ice"]{
  --accent:#8fc3e0;--accent-wash:rgba(143,195,224,.14);
  --glow-a:rgba(143,195,224,.05);
}
[data-theme="light"][data-accent="green"]{--accent:#4f6b1a;--accent-wash:rgba(79,107,26,.12)}
[data-theme="light"][data-accent="ice"]{--accent:#1a5f85;--accent-wash:rgba(26,95,133,.12)}

/* ── 主题/配色弹层 ── */
.theme-pop{position:fixed;top:calc(var(--header-h) + 8px);right:var(--inset);z-index:65;
  width:230px;background:var(--panel);border:1px solid var(--border-strong);border-radius:4px;
  padding:12px;box-shadow:var(--shadow-pop);display:none}
.theme-pop.open{display:block}
.theme-pop .sec{font-size:11px;color:var(--dim);letter-spacing:.18em;text-transform:uppercase;
  margin:6px 4px 8px}
.theme-pop .opt{display:flex;align-items:center;gap:8px;width:100%;background:transparent;
  border:1px solid transparent;color:var(--muted);padding:8px 10px;border-radius:3px;
  cursor:pointer;font-size:14px;font-family:var(--body);text-align:left}
.theme-pop .opt:hover{background:var(--row);color:var(--text)}
.theme-pop .opt.on{border-color:var(--accent);color:var(--accent);background:var(--accent-wash)}
.theme-pop .swatches{display:flex;gap:8px;padding:2px 4px 4px}
.theme-pop .sw{flex:1;border:1px solid var(--border);border-radius:3px;background:var(--panel-soft);
  padding:8px 4px 6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;
  color:var(--dim);font-size:11px}
.theme-pop .sw i{width:20px;height:20px;border-radius:50%;display:block}
.theme-pop .sw[data-accent="red"] i{background:#f0566b}
.theme-pop .sw[data-accent="green"] i{background:#9fc15a}
.theme-pop .sw[data-accent="ice"] i{background:#8fc3e0}
.theme-pop .sw.on{border-color:var(--accent);color:var(--text)}

/* ── 滚动条（双主题） ── */
*{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}
::-webkit-scrollbar-track{background:transparent}