/* 云芸 StarCloud 官网 · 地下城像素风（和启动器 renderer/styles.css 同一套素材与配色）
   规则：像素素材原生 ×3（移动端 ×2），字号用 12 的倍数（24 / 36 / 48 / 72 / 96），最小 24px。 */
/* 像素字体按 unicode-range 切块，见 css/font.css（tools/font-split.mjs 生成） */
:root{
  --bg:#121116;--bg2:#16141b;--bg3:#1c1a22;--line:#23212a;--ink:#0c0b0e;
  --parch:#f4e6c4;--mute:#b8ae98;--gold:#f0c46a;--grn:#9fe86a;--blu:#8cc4ff;--red:#ff9a8a;--pur:#d6a6ff;--org:#ffb35c;
  --edge:#6a5a3a;--steel:#2c2f35;
  --u:3px;           /* 一个像素单位 */
  --fr:27px;         /* 边框九宫格宽度 = 9 × 3 */
  --st:45px;         /* 石板九宫格 = 15 × 3 */
  --gut:120px;       /* 左右留白 */
  --max:1680px;
  --ease:cubic-bezier(.22,.8,.24,1);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{background:var(--bg);scroll-behavior:smooth;scroll-padding-top:144px}
body{font-family:Px,"Microsoft YaHei",sans-serif;font-size:24px;line-height:1.5;color:var(--parch);background:var(--bg);
  -webkit-font-smoothing:none;min-height:100vh;display:flex;flex-direction:column;cursor:url(../assets/ui/cursor.png),auto;
  opacity:0;transition:opacity .35s var(--ease)}
body.in{opacity:1}
body.out{opacity:0;transition-duration:.2s}
a,button,[role=button],label,select{cursor:url(../assets/ui/cursor_p.png),pointer}
a{color:inherit;text-decoration:none}
img{image-rendering:pixelated;display:block}
button{font:inherit;color:inherit;background:none;border:0}
input,textarea,select{font:inherit;color:var(--parch)}
::selection{background:#6a4a1a;color:#fff}
.sh{text-shadow:var(--u) var(--u) 0 rgba(0,0,0,.7)}
.mute{color:var(--mute)}.gold{color:var(--gold)}.grn{color:var(--grn)}.blu{color:var(--blu)}.red{color:var(--red)}.pur{color:var(--pur)}.org{color:var(--org)}
.wrap{width:100%;max-width:calc(var(--max) + var(--gut) * 2);margin:0 auto;padding:0 var(--gut)}
main{flex:1}
.ic{width:48px;height:48px;flex:none}
.ic.s{width:36px;height:36px}.ic.xs{width:24px;height:24px}.ic.l{width:72px;height:72px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- 九宫格 ---------- */
.frame{position:relative;border:var(--fr) solid transparent;border-image:url(../assets/ui/f_list_c.png) 9 / var(--fr) round;
  background:rgba(18,17,22,.92);background-clip:padding-box;image-rendering:pixelated}
.stone{position:relative;border:var(--st) solid transparent;border-image:url(../assets/ui/panel.png) 15 fill / var(--st) repeat;image-rendering:pixelated}
.plate{background:var(--bg3);box-shadow:0 0 0 var(--u) var(--ink),inset 0 0 0 var(--u) #2a2730}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:72px;padding:0 30px;color:#fff;white-space:nowrap;
  font-size:30px;text-shadow:var(--u) var(--u) 0 #4a0f0c;border:18px solid transparent;border-image:url(../assets/ui/b_go.png) 6 fill / 18px repeat;
  image-rendering:pixelated;transition:transform .18s var(--ease),filter .18s}
.btn:hover{filter:brightness(1.12);transform:translateY(calc(var(--u) * -1))}
.btn:active{transform:translateY(var(--u));filter:brightness(.95)}
.btn.dark{color:var(--parch);text-shadow:var(--u) var(--u) 0 #000;border-image-source:url(../assets/ui/b_title.png)}
.btn.big{min-height:120px;padding:0 48px;font-size:48px}
.btn.sm{min-height:60px;padding:0 18px;font-size:24px;border-width:12px;border-image-width:12px}
.btn.breath{animation:breath 2.4s ease-in-out infinite}
.btn[disabled],.btn.off{filter:grayscale(1) brightness(.7);pointer-events:none}
@keyframes breath{0%,100%{box-shadow:0 0 0 0 rgba(255,120,60,0)}50%{box-shadow:0 0 36px 6px rgba(255,120,60,.45)}}
.btn .shine{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.btn .shine::after{content:"";position:absolute;top:0;bottom:0;width:48px;left:-80px;background:rgba(255,255,255,.22);transform:skewX(-20deg);animation:shine 3.6s 1s infinite}
@keyframes shine{0%{left:-80px}25%,100%{left:110%}}
.btn.breath{position:relative}

.tag{display:inline-flex;align-items:center;gap:9px;padding:0 12px;height:39px;background:var(--steel);box-shadow:0 0 0 var(--u) var(--ink);white-space:nowrap;font-size:24px;line-height:1}
.dot{display:inline-block;width:15px;height:15px;box-shadow:0 0 0 var(--u) var(--ink);background:var(--grn);flex:none}
.dot.off{background:#6a6f78}.dot.warn{background:var(--org)}
.link{color:var(--gold);transition:color .15s}.link:hover{color:#ffe08a}
.k-upd{color:var(--grn)}.k-evt{color:var(--gold)}.k-mnt{color:var(--red)}.k-ann{color:var(--blu)}

/* ---------- 顶栏 ---------- */
.top{position:fixed;left:0;right:0;top:0;z-index:50;height:120px;transition:transform .3s var(--ease)}
.top .frame{position:absolute;inset:0;border-image-source:url(../assets/ui/f_bar.png);background:linear-gradient(180deg,rgba(28,26,34,.72),rgba(18,17,22,.72));
  transition:background .3s}
.top.solid .frame{background:linear-gradient(180deg,#1c1a22,#121116)}
.top .in{position:relative;height:100%;display:flex;align-items:center;gap:48px;padding:0 54px}
.logo{display:flex;align-items:center;gap:15px;font-size:36px;color:var(--gold);flex:none}
.logo img{width:72px;height:72px}
.nav{display:flex;gap:6px;flex:1;justify-content:center}
.nav a{position:relative;padding:9px 18px;font-size:30px;transition:color .15s}
.nav a::after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:var(--u);background:var(--gold);transform:scaleX(0);transition:transform .25s var(--ease)}
.nav a:hover{color:#fff}.nav a:hover::after{transform:scaleX(.5)}
.nav a.on{color:var(--gold)}.nav a.on::after{transform:none}
.acct{display:flex;align-items:center;gap:15px;flex:none}
.acct .who{display:flex;align-items:center;gap:15px;padding:6px 12px 6px 6px;transition:background .15s}
.acct .who:hover{background:rgba(240,196,106,.1)}
.burger{display:none;width:60px;height:60px;align-items:center;justify-content:center}
.burger i,.burger i::before,.burger i::after{display:block;width:36px;height:6px;background:var(--parch);position:relative;transition:transform .25s var(--ease)}
.burger i::before,.burger i::after{content:"";position:absolute;left:0}
.burger i::before{top:-12px}.burger i::after{top:12px}
.drawer{position:fixed;inset:0;z-index:60;pointer-events:none}
.drawer .mask{position:absolute;inset:0;background:rgba(8,7,10,.7);opacity:0;transition:opacity .3s}
.drawer .panel{position:absolute;right:0;top:0;bottom:0;width:min(420px,86vw);background:var(--bg2);box-shadow:inset 6px 0 0 var(--edge);
  transform:translateX(100%);transition:transform .35s var(--ease);padding:36px 30px;display:flex;flex-direction:column;gap:6px;overflow:auto}
.drawer.open{pointer-events:auto}.drawer.open .mask{opacity:1}.drawer.open .panel{transform:none}
.drawer .panel a.nv{display:flex;align-items:center;gap:18px;padding:15px 12px;font-size:30px;border-bottom:var(--u) solid var(--line)}
.drawer .panel a.nv.on{color:var(--gold);box-shadow:inset 6px 0 0 var(--gold)}

/* ---------- 首页大场景 ---------- */
.hero{position:relative;height:min(960px,100vh);min-height:720px;overflow:hidden;background:#0d0b14 center/cover no-repeat}
.hero canvas,.hero .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,11,14,.9),rgba(12,11,14,.2) 55%,rgba(12,11,14,0)),linear-gradient(0deg,var(--bg),rgba(18,17,22,0) 32%)}
.hero .wrap{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:center;padding-top:96px}
.hero h1{font-size:96px;line-height:1.1;color:#fff;font-weight:normal}
.hero .sub{font-size:48px;color:var(--gold);margin-top:18px}
.hero .lead{font-size:30px;color:#e6dcc4;max-width:840px;margin-top:18px}
.hero .cta{display:flex;gap:30px;margin-top:48px;flex-wrap:wrap;align-items:center}
.hero .chips{display:flex;gap:24px;margin-top:42px;flex-wrap:wrap}
.hero .scroll{position:absolute;left:50%;bottom:36px;z-index:1;transform:translateX(-50%);color:var(--mute);animation:bob 2s ease-in-out infinite;text-align:center}
@keyframes bob{50%{transform:translate(-50%,12px)}}

/* 子页页头 */
.phead{position:relative;height:480px;overflow:hidden;background:#0d0b14 center/cover no-repeat;image-rendering:pixelated}
.phead canvas,.phead .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.phead::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,11,14,.92),rgba(12,11,14,.35) 60%,rgba(12,11,14,.15)),linear-gradient(0deg,var(--bg),rgba(18,17,22,0) 45%)}
.phead .wrap{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:60px}
.crumb{color:var(--mute);margin-bottom:12px}.crumb a:hover{color:var(--gold)}
.phead h1{font-size:72px;line-height:1.15;color:#fff;font-weight:normal;display:flex;align-items:center;gap:24px}
.phead p{font-size:30px;color:#e6dcc4;margin-top:12px;max-width:1080px}

/* ---------- 区块 ---------- */
.sec{padding-top:96px}
main > .sec:last-child{padding-bottom:24px}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:36px}
.sec-h h2{font-size:48px;color:#fff;font-weight:normal;display:flex;align-items:center;gap:18px;line-height:1.1}
.sec-h .more{color:var(--gold);font-size:24px}
.sec-h .more:hover{color:#ffe08a}
.grid{display:grid;gap:36px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g5{grid-template-columns:repeat(5,1fr)}
.split{display:grid;grid-template-columns:2fr 1fr;gap:48px;align-items:start}

/* 卡片 */
.card{position:relative;display:block;overflow:hidden;box-shadow:0 0 0 var(--u) var(--ink),0 0 0 calc(var(--u)*2) var(--edge);background:var(--bg3);transition:transform .25s var(--ease),box-shadow .25s}
.card:hover{transform:translateY(-6px);box-shadow:0 0 0 var(--u) var(--ink),0 0 0 calc(var(--u)*2) var(--gold),0 18px 36px rgba(0,0,0,.5)}
.card .im{aspect-ratio:396/480;background:center/cover no-repeat;image-rendering:pixelated;transition:transform .5s var(--ease)}
.card:hover .im{transform:scale(1.04)}
.card .tx{position:absolute;left:0;right:0;bottom:0;padding:24px;background:linear-gradient(0deg,rgba(12,11,14,.96) 45%,rgba(12,11,14,0))}
.card .tx b{display:block;font-size:36px;color:#fff;font-weight:normal}
.card .tx span{color:var(--mute)}

/* 列表行 */
.rows{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:24px;min-height:96px;padding:12px 18px;border-bottom:var(--u) solid var(--line);transition:background .15s}
a.row:hover{background:rgba(240,196,106,.07)}
.row .t{flex:1;color:#fff;font-size:30px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row:last-child{border-bottom:0}

/* 排行 */
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button,.tabs a{padding:9px 18px;font-size:24px;color:var(--mute);box-shadow:inset 0 calc(var(--u)*-1) 0 transparent;transition:color .15s,box-shadow .2s}
.tabs button:hover,.tabs a:hover{color:#fff}
.tabs .on{color:var(--gold);box-shadow:inset 0 calc(var(--u)*-2) 0 var(--gold)}
.rk{width:60px;text-align:center;font-size:30px;flex:none}
.rk1{color:var(--gold)}.rk2{color:var(--blu)}.rk3{color:var(--org)}
.face{width:60px;height:60px;flex:none;background:#2c2f35 center/cover;box-shadow:0 0 0 var(--u) var(--ink),0 0 0 calc(var(--u)*2) #6a7079;image-rendering:pixelated}
.ava{position:relative;flex:none;width:var(--s,96px);height:var(--s,96px);background:url(../assets/identity/frame-soulfire_ossuary.png) 0 0/calc(var(--s,96px)*24) var(--s,96px),url(../assets/identity/avatar-crypt_warden.png) 0 0/calc(var(--s,96px)*24) var(--s,96px);image-rendering:pixelated}

/* VIP */
.vip{position:relative;padding:36px 24px;text-align:center;background:var(--bg3);box-shadow:0 0 0 var(--u) var(--ink),inset 0 9px 0 var(--c,var(--mute));transition:transform .25s var(--ease)}
.vip:hover{transform:translateY(-6px)}
.vip b{display:block;font-size:72px;line-height:1;color:var(--c);font-weight:normal}
.vip ul{list-style:none;margin-top:24px;text-align:left;display:flex;flex-direction:column;gap:9px}
.vip li{display:flex;gap:9px;align-items:flex-start}
.vip li::before{content:"";width:12px;height:12px;margin-top:12px;flex:none;background:var(--c)}
.mem{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:6px 12px;white-space:nowrap;transition:filter .2s}
.mem:hover{filter:brightness(1.2)}
.rows > .mem + .mem{margin-top:12px}

/* 下载 */
.dl{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center}
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.step{position:relative;padding:36px 30px 30px}
.step::before{counter-increment:s;content:counter(s);position:absolute;left:-12px;top:-24px;width:60px;height:60px;line-height:60px;text-align:center;font-size:36px;color:#fff;background:#9b2a22;box-shadow:0 0 0 var(--u) var(--ink),inset 0 calc(var(--u)*-2) 0 #5a1610}
.kv{display:grid;grid-template-columns:auto 1fr;gap:12px 36px}
.kv dt{color:var(--mute)}.kv dd{color:#fff}

/* 文章 */
.prose{font-size:24px;line-height:1.75;color:#e6dcc4;max-width:1200px}
.prose h2{font-size:36px;color:#fff;font-weight:normal;margin:48px 0 18px;line-height:1.3}
.prose h3{font-size:30px;color:var(--gold);font-weight:normal;margin:36px 0 12px}
.prose p{margin:0 0 18px}
.prose ul,.prose ol{margin:0 0 18px 36px}
.prose li{margin-bottom:9px}
.prose li::marker{color:var(--gold)}
.prose strong{color:#fff;font-weight:normal;box-shadow:inset 0 -9px 0 rgba(240,196,106,.25)}
.prose code{background:var(--steel);padding:0 9px;box-shadow:0 0 0 var(--u) var(--ink);color:var(--grn)}
.prose img{max-width:100%;margin:24px 0;box-shadow:0 0 0 var(--u) var(--ink),0 0 0 calc(var(--u)*2) var(--edge)}
.prose table{border-collapse:collapse;width:100%;margin:12px 0 24px}
.prose th,.prose td{padding:12px 18px;text-align:left;border-bottom:var(--u) solid var(--line)}
.prose th{color:var(--gold);font-weight:normal}

/* 规则目录 */
.toc{position:sticky;top:156px;display:flex;flex-direction:column}
.toc a{padding:12px 18px;color:var(--mute);box-shadow:inset var(--u) 0 0 var(--line);transition:color .15s,box-shadow .2s}
.toc a:hover{color:#fff}.toc a.on{color:var(--gold);box-shadow:inset 6px 0 0 var(--gold)}

/* 玩法介绍交替 */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;padding:72px 0;border-bottom:var(--u) solid var(--line)}
.feat:last-child{border-bottom:0}
.feat.rev .pic{order:2}
.feat .pic{aspect-ratio:2/1;background:center/cover no-repeat;box-shadow:0 0 0 var(--u) var(--ink),0 0 0 calc(var(--u)*2) var(--edge);image-rendering:pixelated;position:relative;overflow:hidden}
.feat .pic canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.feat h2{font-size:48px;color:#fff;font-weight:normal;display:flex;gap:18px;align-items:center}
.feat p{margin-top:18px;color:#e6dcc4;font-size:24px}
.feat ul{list-style:none;margin-top:24px;display:flex;flex-direction:column;gap:12px}
.feat li{display:flex;gap:15px;align-items:center}
.feat .keys{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
kbd{display:inline-block;min-width:42px;height:42px;line-height:36px;padding:0 9px;text-align:center;font:inherit;color:#fff;background:#3a3d45;box-shadow:0 0 0 var(--u) var(--ink),inset 0 calc(var(--u)*-2) 0 #22242a}

/* 社群 */
.comm{display:flex;flex-direction:column;gap:24px;padding:36px;align-items:flex-start}
.comm .head{display:flex;gap:24px;align-items:center}
.comm b{font-size:36px;color:#fff;font-weight:normal}
.qr{width:192px;height:192px;background:#fff;padding:12px;box-shadow:0 0 0 var(--u) var(--ink)}
.qr img{width:100%;height:100%}

/* 登录 */
.auth{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:48px}
.code{display:flex;gap:12px;justify-content:center;margin:24px 0}
.code span{width:84px;height:108px;line-height:108px;text-align:center;font-size:72px;color:#fff;background:#0c0b0e;box-shadow:0 0 0 var(--u) var(--edge),inset 0 calc(var(--u)*-2) 0 #2a2730}
.bar{height:24px;background:#18171c;box-shadow:0 0 0 var(--u) var(--ink),inset 0 0 0 var(--u) #2c2f35}
.bar i{display:block;height:100%;background:var(--grn);box-shadow:inset 0 -6px 0 rgba(0,0,0,.25);transition:width .6s linear}
.spin{display:inline-block;width:24px;height:24px;background:var(--gold);animation:spin 1s steps(4) infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* 玩家中心 */
.me-hd{display:flex;gap:48px;align-items:center;padding:12px}
.stat{display:flex;flex-direction:column;gap:6px;padding:24px 30px}
.stat b{font-size:48px;line-height:1.1;color:#fff;font-weight:normal}
.stat span{color:var(--mute)}
.chip-list{display:flex;flex-wrap:wrap;gap:18px}
.title-chip{padding:9px 18px;background:#1f1a12;box-shadow:0 0 0 var(--u) var(--ink),inset 0 0 0 var(--u) var(--c,var(--edge));color:var(--c,var(--parch))}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:18px}
.slot{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:#1a181f;box-shadow:0 0 0 var(--u) var(--ink),inset 0 0 0 var(--u) var(--c,#2a2730),inset 0 -12px 0 rgba(0,0,0,.2)}
.slot img{width:60%;height:60%}
.slot.lock{opacity:.35}

/* 页脚 */
.foot{margin-top:120px;background:#0c0b0e;box-shadow:inset 0 var(--u) 0 var(--steel);padding:72px 0 48px}
.foot .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:48px}
.foot h4{font-size:30px;color:#fff;font-weight:normal;margin-bottom:18px}
.foot a{display:block;color:var(--mute);padding:6px 0}.foot a:hover{color:var(--gold)}
.foot .legal{grid-column:1/-1;border-top:var(--u) solid var(--line);padding-top:30px;color:#7d7566;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}

/* 提示条 / 空状态 */
.note{display:flex;gap:18px;align-items:center;padding:18px 24px;background:#1d1a12;box-shadow:0 0 0 var(--u) var(--ink),inset 6px 0 0 var(--gold)}
.note.err{background:#1f1414;box-shadow:0 0 0 var(--u) var(--ink),inset 6px 0 0 var(--red)}
.empty{padding:72px 24px;text-align:center;color:var(--mute)}
.pager{display:flex;gap:12px;justify-content:center;margin-top:36px}
.pager button{min-width:60px;height:60px;padding:0 15px;background:var(--bg3);box-shadow:0 0 0 var(--u) var(--ink);transition:background .15s}
.pager button:hover{background:#2a2730}.pager button.on{color:var(--ink);background:var(--gold)}
.toast{position:fixed;left:50%;bottom:48px;z-index:80;transform:translate(-50%,24px);opacity:0;padding:18px 30px;background:var(--bg3);box-shadow:0 0 0 var(--u) var(--ink),0 0 0 calc(var(--u)*2) var(--gold);transition:opacity .25s,transform .25s var(--ease);pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
.skel{background:linear-gradient(90deg,#1c1a22,#26232d,#1c1a22);background-size:200% 100%;animation:skel 1.2s linear infinite;color:transparent !important}
@keyframes skel{to{background-position:-200% 0}}

/* 滚动进入 */
.rv{opacity:0;transform:translateY(36px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:var(--d,0s)}
.rv.on{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition-duration:.01s !important}
  .rv{opacity:1;transform:none}
}

/* ---------- 响应式 ---------- */
@media (max-width:1500px){
  :root{--gut:60px}
  .nav a{padding:9px 12px;font-size:24px}
  .top .in{gap:24px;padding:0 36px}
  .logo span{display:none}
}
@media (max-width:1200px){
  .nav{display:none}.burger{display:flex}
  .top .in{justify-content:space-between}
  .logo span{display:inline}
  .g4,.g5{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  .split,.dl,.auth,.feat{grid-template-columns:1fr}
  .feat.rev .pic{order:0}
  .steps{grid-template-columns:1fr}
  .foot .wrap{grid-template-columns:1fr 1fr}
  .toc{position:static;flex-direction:row;flex-wrap:wrap}
}
@media (max-width:767px){
  :root{--u:2px;--fr:18px;--st:30px;--gut:24px}
  html{scroll-padding-top:96px}
  .top{height:84px}
  .top .in{padding:0 18px}
  .logo{font-size:24px}.logo img{width:48px;height:48px}
  .acct .who span,.acct .btn{display:none}
  .hero{height:auto;min-height:0;padding:132px 0 72px}
  .hero h1{font-size:48px}.hero .sub{font-size:24px}.hero .lead{font-size:24px}
  .hero .cta{gap:18px;margin-top:30px}.hero .cta .btn{width:100%}
  .hero .scroll{display:none}
  .btn{font-size:24px;min-height:60px;border-width:12px;border-image-width:12px}
  .btn.big{font-size:36px;min-height:96px}
  .phead{height:360px}.phead h1{font-size:48px}.phead p{font-size:24px}.phead .wrap{padding-bottom:36px}
  .sec{padding-top:72px}
  .sec-h h2{font-size:36px}
  .g2,.g3,.g4,.g5{grid-template-columns:1fr}
  .grid{gap:24px}
  .card .im{aspect-ratio:2/1}
  .row .t{font-size:24px}
  .row{gap:15px;padding:12px 6px}
  .feat{gap:30px;padding:48px 0}.feat h2{font-size:36px}
  .foot .wrap{grid-template-columns:1fr}
  .code span{width:60px;height:84px;line-height:84px;font-size:48px}
  .me-hd{flex-direction:column;align-items:flex-start;gap:24px}
  .prose h2{font-size:30px}
}

/* ---------- 页面组件（补充） ---------- */
.mt{margin-top:18px}.mt2{margin-top:36px}.mt3{margin-top:72px}
.flex{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.grow{flex:1;min-width:0}
.brk{word-break:break-all}
.center{text-align:center}
.pad{padding:36px}
.val{min-width:150px;text-align:right}
.row.mine{background:rgba(159,232,106,.08);box-shadow:inset 6px 0 0 var(--grn)}
.row.col{flex-direction:column;align-items:flex-start;gap:6px}
.row.col ul{margin-left:30px;color:#e6dcc4}
.hd2{font-size:36px;color:#fff;font-weight:normal;margin-bottom:24px;display:flex;align-items:center;gap:15px}
.lead2{font-size:30px;color:#e6dcc4}
.chips{display:flex;gap:24px;flex-wrap:wrap}
/* 新闻列表 */
.nrow{display:grid;grid-template-columns:420px 1fr;gap:36px;align-items:center;padding:24px;border-bottom:var(--u) solid var(--line);transition:background .15s}
a.nrow:hover{background:rgba(240,196,106,.06)}
a.nrow:hover .pic{box-shadow:0 0 0 var(--u) var(--ink),0 0 0 calc(var(--u)*2) var(--gold)}
.nrow .pic{aspect-ratio:2/1;background:#1c1a22 center/cover;image-rendering:pixelated;box-shadow:0 0 0 var(--u) var(--ink),0 0 0 calc(var(--u)*2) var(--edge);transition:box-shadow .2s}
.nrow .meta{display:flex;gap:18px;align-items:center}
.nrow b{display:block;font-size:36px;color:#fff;font-weight:normal;margin:12px 0 6px;line-height:1.3}
.adj{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:72px}
.adj a{display:flex;flex-direction:column;gap:6px;padding:24px 30px;transition:box-shadow .2s}
.adj a:hover{box-shadow:0 0 0 var(--u) var(--ink),inset 0 0 0 var(--u) var(--gold)}
.adj a.r{text-align:right}
.adj b{color:#fff;font-weight:normal}
.a-meta{display:flex;gap:18px;align-items:center;margin-bottom:12px}
/* 排行 */
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;align-items:end;max-width:1080px;margin:0 auto 48px}
.podium:empty{display:none}
.pod{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center}
.pod b{font-size:30px;color:#fff;font-weight:normal}
.face.big{width:120px;height:120px}
.pod .crown{position:absolute;top:-54px;width:72px;height:72px;animation:bob2 2s ease-in-out infinite}
@keyframes bob2{50%{transform:translateY(-9px)}}
.pod .base{width:100%;display:flex;align-items:center;justify-content:center;font-size:72px;color:#fff;margin-top:12px}
.pod.p1 .base{height:240px;box-shadow:0 0 0 var(--u) var(--ink),inset 0 9px 0 var(--gold)}.pod.p1 .base span{color:var(--gold)}
.pod.p2 .base{height:180px;box-shadow:0 0 0 var(--u) var(--ink),inset 0 9px 0 var(--blu)}.pod.p2 .base span{color:var(--blu)}
.pod.p3 .base{height:132px;box-shadow:0 0 0 var(--u) var(--ink),inset 0 9px 0 var(--org)}.pod.p3 .base span{color:var(--org)}
.search{display:flex;align-items:center;gap:12px;padding:0 18px;height:66px;background:#0c0b0e;box-shadow:0 0 0 var(--u) var(--edge)}
.search input{flex:1;min-width:0;background:none;border:0;outline:0;height:100%}
.search:focus-within{box-shadow:0 0 0 var(--u) var(--gold)}
/* 登录 */
.code span.dim{color:#4a4540}
.auth .opt{display:flex;flex-direction:column;gap:18px}
.auth ol{margin-left:36px;display:flex;flex-direction:column;gap:9px}
.auth ol li::marker{color:var(--gold)}
/* 玩家中心 */
.vipbig{width:180px;height:180px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg3);box-shadow:0 0 0 var(--u) var(--ink),inset 0 9px 0 var(--c)}
.vipbig b{font-size:72px;line-height:1;color:var(--c);font-weight:normal}
.me-vip{display:flex;gap:36px;align-items:center}
/* 社群 */
.comm .idline{font-size:30px}
.comm .acts{display:flex;gap:18px}
/* 赞助表 */
.cmp{width:100%;border-collapse:collapse}
.cmp th,.cmp td{padding:18px 24px;text-align:center;border-bottom:var(--u) solid var(--line)}
.cmp th{font-weight:normal;color:#fff}
.cmp td:first-child,.cmp th:first-child{text-align:left;color:var(--mute)}
.cmp .y{color:var(--grn)}.cmp .n{color:#5a5560}
.tblwrap{overflow-x:auto}
.faq details{border-bottom:var(--u) solid var(--line);padding:24px 0}
.faq summary{list-style:none;font-size:30px;color:#fff;display:flex;justify-content:space-between;gap:24px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:12px;color:#e6dcc4}
.pen{width:100%;border-collapse:collapse}
@media (max-width:1200px){.nrow{grid-template-columns:300px 1fr}.me-vip{flex-wrap:wrap}}
@media (max-width:767px){
  .nrow{grid-template-columns:1fr;gap:15px;padding:18px 0}.nrow b{font-size:30px}
  .adj{grid-template-columns:1fr}.hide-s{display:none}
  .podium{gap:12px}.face.big{width:72px;height:72px}.pod b{font-size:24px}.pod .base{font-size:48px}
  .pod.p1 .base{height:150px}.pod.p2 .base{height:114px}.pod.p3 .base{height:84px}
  .vipbig{width:120px;height:120px}.vipbig b{font-size:48px}
  .val{min-width:0}
  .cmp th,.cmp td{padding:12px}
}

/* 网格子项不让长文字撑破；手机端细调 */
.grid > *,.split > *,.dl > *,.auth > *,.feat > *{min-width:0}
.sec-h h2{white-space:nowrap}
@media (max-width:767px){
  .sec-h{flex-wrap:wrap;align-items:center;gap:12px 24px}
  .g5{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gut) * -1);padding:12px var(--gut) 18px;gap:18px;scrollbar-width:none}
  .g5::-webkit-scrollbar{display:none}
  .g5 > *{flex:0 0 66%;scroll-snap-align:start}
  .g5 > a.vip{flex-basis:30%}
  .vip b{font-size:48px}
  .stone.flex{flex-direction:column;align-items:flex-start}
  .tabs button,.tabs a{padding:6px 12px}
  .mem .lead2{font-size:24px}
  .search{width:100%}
  .toc{display:none}
}
@media (max-width:767px){
  .top .in{padding:0 30px 0 18px}
  .mem{white-space:normal;flex-wrap:wrap;gap:6px 18px}.mem .gold{white-space:nowrap}
  .rows .row .t{white-space:normal;line-height:1.35}
  .rk{width:36px;font-size:24px}.face{width:48px;height:48px}
}
.face.me-face{width:168px;height:168px;box-shadow:0 0 0 var(--u) var(--ink),0 0 0 calc(var(--u)*3) var(--gold)}
@media (max-width:767px){.face.me-face{width:120px;height:120px}}

/* ---------- 双服状态 / 语言切换 ---------- */
.realm{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;position:relative}
.realm em{font-style:normal;font-size:24px;color:var(--ink);background:var(--gold);padding:0 9px;height:39px;line-height:39px;box-shadow:0 0 0 var(--u) var(--ink)}
.realm.rec .tag{box-shadow:0 0 0 var(--u) var(--ink),inset 0 0 0 var(--u) var(--gold)}
.realms{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.realms .srv{display:block;margin:-6px 0 6px 12px}
.chips .realm + .realm{margin-left:12px}
.langs{display:flex;gap:3px;flex:none}
.lg{min-width:48px;height:42px;line-height:42px;padding:0 9px;text-align:center;font-size:24px;color:var(--mute);background:rgba(12,11,14,.5);box-shadow:0 0 0 var(--u) var(--ink);transition:color .15s,background .15s}
.lg:hover{color:#fff}.lg.on{color:var(--ink);background:var(--gold)}
.dlangs{display:flex;gap:12px;padding:24px 12px 0}
.realm-tabs{margin-bottom:24px}
.realm-tabs:empty{display:none}
.realm-tabs button{font-size:30px}
.realm-tabs button[disabled]{opacity:.45;cursor:not-allowed}
.faddr p{margin:3px 0}
html[lang=en] body{word-break:normal;overflow-wrap:anywhere}
@media (max-width:1200px){.top .langs{display:none}}
@media (max-width:767px){.chips .realm + .realm{margin-left:0}.realm em,.realm .tag{font-size:24px}}
/* 英文标签更长：导航不断词、窄列表不显示副信息、会员条允许换行 */
.nav a{white-space:nowrap}
html[lang=en] .nav{gap:0}
html[lang=en] .nav a{font-size:24px;padding:9px 12px}
html[lang=en] .nav a::after{left:12px;right:12px}
#home-rank .hide-s{display:none}
.mem{flex-wrap:wrap;gap:6px 18px}
.sec-h{flex-wrap:wrap}
@media (max-width:1700px){html[lang=en] .top .in{gap:24px;padding:0 36px}html[lang=en] .logo span{display:none}}
@media (max-width:1400px){html[lang=en] .nav{display:none}html[lang=en] .burger{display:flex}html[lang=en] .top .in{justify-content:space-between}html[lang=en] .logo span{display:inline}html[lang=en] .top .langs{display:none}}