/* 默 · 百业 v6 —— 朱砂宣纸 */
:root{
  --paper:#ece5d6;--paper-2:#e3dac7;--paper-3:#d8cdb6;
  --ink:#1d1b17;--ink-2:#47423a;--muted:#7d7464;--rule:#1d1b1726;--rule-strong:#1d1b1766;
  --cinnabar:#b23a2b;--cinnabar-deep:#8f2a1f;--seal-text:#f4ece0;
  --kai:"KaiTi","STKaiti","Kaiti SC","BiauKai","AR PL UKai CN",serif;
  --sans:"PingFang SC","Microsoft YaHei UI","Microsoft YaHei","Noto Sans SC",sans-serif;
  --curve:cubic-bezier(.22,1,.36,1);
  --gutter:clamp(16px,4vw,56px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.75 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--cinnabar);outline-offset:4px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.defs{position:absolute;width:0;height:0}
img{max-width:100%;display:block}

/* 加载界面：真实进度的墨线，完成后盖印、墨晕开、露出山门 */
.loader{position:fixed;inset:0;z-index:100;background:var(--paper);display:grid;place-items:center;overflow:hidden}
html.no-loader .loader{display:none}
.ld-inner{display:flex;flex-direction:column;align-items:center;gap:14px;transition:opacity .4s}
.ld-seal{font-size:52px;transform:rotate(-4deg);animation:ldbreath 2.4s ease-in-out infinite}
@keyframes ldbreath{50%{transform:rotate(-4deg) scale(1.04)}}
.ld-brush{width:min(320px,72vw);height:28px;margin-top:10px}
.ld-track{fill:none;stroke:#1d1b171f;stroke-width:3;stroke-linecap:round}
.ld-ink{fill:none;stroke:var(--ink);stroke-width:6;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;filter:url(#rough)}
.ld-pct{margin:0;font:400 30px/1 var(--kai);font-variant-numeric:tabular-nums;color:var(--ink)}
.ld-pct small{font-size:16px;margin-left:2px;color:var(--muted)}
.ld-msg{margin:0;font-size:13px;letter-spacing:.5em;color:var(--muted);text-indent:.5em}
.ld-wash{position:absolute;inset:0;background:var(--ink);clip-path:circle(0% at 50% 42%);transition:clip-path .75s cubic-bezier(.7,0,.2,1);visibility:hidden}
.loader.wash .ld-wash{visibility:visible}
.loader.stamp .ld-seal{animation:ldstamp .5s cubic-bezier(.2,1.6,.4,1) both}
@keyframes ldstamp{0%{transform:rotate(-14deg) scale(1.9);opacity:.3}100%{transform:rotate(-4deg) scale(1);opacity:1}}
.loader.wash .ld-wash{clip-path:circle(150% at 50% 42%)}
.loader.wash .ld-inner{opacity:0;transition-delay:.35s}
.loader.done{opacity:0;transition:opacity .7s ease;pointer-events:none}

/* 印章 */
.seal{display:inline-grid;grid-auto-flow:column;grid-template-rows:1fr 1fr;place-items:center;background:var(--cinnabar);color:var(--seal-text);
  font-family:var(--kai);line-height:1;padding:.18em .2em;border-radius:3px;filter:url(#rough);box-shadow:inset 0 0 0 .08em var(--seal-text),inset 0 0 0 .14em var(--cinnabar)}
.seal span{display:block;writing-mode:vertical-rl;letter-spacing:.05em}
.seal span:first-child{grid-row:1/3}

/* 导航 */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;gap:32px;padding:18px var(--gutter);transition:background .4s var(--curve),padding .4s var(--curve)}
.nav.scrolled{background:#ece5d6e6;backdrop-filter:blur(6px);padding-top:10px;padding-bottom:10px;box-shadow:0 1px 0 var(--rule)}
.nav-seal span{display:grid;place-items:center;width:44px;height:44px;background:var(--cinnabar);color:var(--seal-text);font:26px/1 var(--kai);border-radius:3px;filter:url(#rough);box-shadow:inset 0 0 0 3px var(--seal-text),inset 0 0 0 5px var(--cinnabar)}
.nav-links{display:flex;gap:28px;margin-left:auto;font-size:15px;letter-spacing:.12em}
.nav-links a{position:relative;padding:6px 0;color:var(--ink-2);transition:color .3s}
.nav-links a:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--cinnabar);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--curve)}
.nav-links a:hover,.nav-links a[aria-current=page]{color:var(--ink)}
.nav-links a:hover:after,.nav-links a[aria-current=page]:after{transform:scaleX(1)}
.nav-join{padding:8px 20px;border:1px solid var(--ink);font-size:14px;letter-spacing:.3em;transition:background .3s,color .3s}
.nav-join:hover{background:var(--ink);color:var(--paper)}
.nav-id{display:flex;gap:10px;align-items:center}
.nav-login,.nav-admin,.nav-logout{padding:8px 16px;font-size:14px;letter-spacing:.2em}
.nav-login,.nav-admin{background:var(--cinnabar);color:var(--seal-text)}
.nav-login:hover,.nav-admin:hover{background:var(--cinnabar-deep)}
.nav-logout{color:var(--muted);padding-left:4px;padding-right:4px}
.nav-logout:hover{color:var(--ink)}
.more-link{font-size:14px;letter-spacing:.2em;color:var(--cinnabar);border-bottom:1px solid currentColor;padding-bottom:4px}
.login{border:1px solid var(--ink);background:var(--paper);color:var(--ink);padding:0;width:min(400px,calc(100% - 32px));box-shadow:10px 10px 0 var(--paper-3)}
.login::backdrop{background:#1d1b1799;backdrop-filter:blur(4px)}
.login form{position:relative;padding:40px 32px 28px;display:grid;gap:16px}
.login-seal{position:absolute;right:28px;top:28px;font-size:20px;transform:rotate(6deg)}
.login h2{margin:0 0 4px;font:400 32px/1.2 var(--kai);letter-spacing:.15em}
.login label{display:grid;gap:6px;font-size:13px;letter-spacing:.2em;color:var(--muted)}
.login input{font:16px/1.4 var(--sans);color:var(--ink);background:var(--paper-2);border:0;border-bottom:1px solid var(--ink);padding:10px 12px;outline:none}
.login input:focus{border-bottom-color:var(--cinnabar);box-shadow:0 2px 0 var(--cinnabar)}
.login-msg{min-height:1.5em;margin:0;font-size:13px;color:var(--cinnabar)}
.login-actions{display:flex;justify-content:flex-end;gap:12px}
.login-cancel{padding:10px 18px;color:var(--muted)}
.login-submit{padding:10px 24px;background:var(--ink);color:var(--paper);letter-spacing:.3em}
.login-submit:disabled{opacity:.5}
.nav-menu{display:none;width:44px;height:44px;border:1px solid var(--ink);font:20px/1 var(--kai)}

/* 首屏 */
.hero{position:relative;min-height:100svh;overflow:hidden;display:grid;grid-template-rows:1fr auto;padding:110px var(--gutter) 28px}
.hero-mountains{position:absolute;left:-5%;right:-5%;bottom:-2%;height:62%;background:url(../img/v5-mountains.webp) center 70%/cover;filter:grayscale(1) contrast(1.15) brightness(1.55);mix-blend-mode:multiply;opacity:.2;
  -webkit-mask-image:linear-gradient(transparent,#000 45%,#000 80%,transparent);mask-image:linear-gradient(transparent,#000 45%,#000 80%,transparent);will-change:transform}
.hero-blot{position:absolute;left:4%;top:10%;width:min(54vw,720px);aspect-ratio:1;opacity:.045;pointer-events:none;filter:blur(18px)}
.hero-blot ellipse{fill:var(--ink)}
.hero-figure{position:absolute;right:max(-4vw,-60px);bottom:0;height:min(96svh,1100px);width:auto;max-width:none;mix-blend-mode:multiply;filter:sepia(.2) contrast(1.05);
  -webkit-mask-image:linear-gradient(#000 70%,transparent 98%);mask-image:linear-gradient(#000 70%,transparent 98%);will-change:transform}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:auto auto 1fr;grid-template-rows:auto 1fr;align-items:start;column-gap:clamp(12px,2vw,32px);align-self:center}
.hero-kicker{grid-column:1;grid-row:1/3;writing-mode:vertical-rl;margin:0;display:flex;gap:18px;font:15px/1 var(--sans);letter-spacing:.5em;color:var(--muted);padding-top:2.2em}
.hero-kicker span+span{color:var(--cinnabar)}
.hero-title{grid-column:2;grid-row:1/3;margin:0;font:400 min(58svh,36vw)/.92 var(--kai);letter-spacing:0;color:var(--ink)}
.brush{display:block;--m:0%;-webkit-mask-image:linear-gradient(172deg,#000 42%,transparent 58%);mask-image:linear-gradient(172deg,#000 42%,transparent 58%);
  -webkit-mask-size:100% 320%;mask-size:100% 320%;-webkit-mask-position:0 var(--m);mask-position:0 var(--m);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.hero-seal{grid-column:3;grid-row:1;justify-self:start;margin-top:clamp(20px,6svh,72px);font-size:clamp(20px,2.4vw,32px);transform:rotate(-5deg)}
.hero-sub{grid-column:3;grid-row:2;align-self:end;justify-self:start;margin:0 0 6svh 1.2em;writing-mode:vertical-rl;font:clamp(18px,1.7vw,24px)/1.6 var(--kai);letter-spacing:.22em;color:var(--ink-2)}
.hero-stats{position:relative;z-index:3;margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--rule-strong);max-width:980px}
.hero-stats div{padding:14px 18px 4px 0}
.hero-stats div+div{padding-left:18px;border-left:1px solid var(--rule)}
.hero-stats dt{font-size:12px;letter-spacing:.2em;color:var(--muted)}
.hero-stats dd{margin:2px 0 0;font:clamp(26px,2.8vw,40px)/1.2 var(--kai);font-variant-numeric:tabular-nums}
.source-tag{position:absolute;z-index:3;right:var(--gutter);bottom:30px;margin:0;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);letter-spacing:.1em;background:#ece5d6cc;padding:4px 10px}
.source-tag i{width:7px;height:7px;border-radius:50%;background:var(--muted)}
.source-tag.live i{background:#3f7a4a;box-shadow:0 0 0 3px #3f7a4a26}
.source-tag.snapshot i{background:var(--cinnabar)}
.scroll-cue{position:absolute;z-index:3;left:50%;bottom:24px;transform:translateX(-50%);writing-mode:vertical-rl;font-size:12px;letter-spacing:.4em;color:var(--muted);padding-bottom:44px}
.scroll-cue:after{content:"";position:absolute;left:50%;bottom:0;width:1px;height:36px;background:var(--ink);transform-origin:top;animation:drip 2.4s var(--curve) infinite}
@keyframes drip{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* 通用段落 */
.sec{position:relative;padding:clamp(80px,12vw,160px) var(--gutter);max-width:1400px;margin:0 auto}
.sec-head{display:grid;grid-template-columns:auto 1fr;column-gap:20px;align-items:end;margin-bottom:clamp(36px,5vw,64px);border-bottom:1px solid var(--rule-strong);padding-bottom:18px}
.sec-no{grid-row:1/3;font:clamp(56px,7vw,96px)/1 var(--kai);color:var(--cinnabar)}
.sec-head h2{margin:0;font:400 clamp(36px,4.6vw,64px)/1.1 var(--kai);letter-spacing:.12em}
.sec-head p{margin:6px 0 0;font-size:14px;letter-spacing:.15em;color:var(--muted)}
.sec-more{margin:40px 0 0;text-align:right}
.soon{font-size:14px;letter-spacing:.2em;color:var(--muted);border-bottom:1px dashed var(--rule-strong);padding-bottom:4px}

/* 少东瓜 */
.sdg-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px) clamp(16px,2.4vw,32px)}
.sdg{position:relative}
.sdg-pic{position:relative;aspect-ratio:1;background:var(--paper-2);border:1px solid var(--ink);overflow:hidden}
.sdg-pic:before{content:"";position:absolute;inset:6px;border:1px solid var(--rule-strong);z-index:2;pointer-events:none}
.sdg-pic img{width:100%;height:100%;object-fit:cover;filter:sepia(.15) contrast(1.03);transition:transform .8s var(--curve),filter .6s}
.sdg-pic .noimg{position:absolute;inset:0;display:grid;place-items:center;font:56px/1 var(--kai);color:var(--muted)}
.sdg:hover .sdg-pic img{transform:scale(1.05);filter:none}
.sdg:after{content:"";position:absolute;right:-8px;top:-8px;width:28px;height:28px;border-top:3px solid var(--cinnabar);border-right:3px solid var(--cinnabar);opacity:0;transition:opacity .4s,transform .4s var(--curve);transform:translate(-6px,6px)}
.sdg:hover:after{opacity:1;transform:none}
.sdg-name{display:flex;align-items:baseline;gap:10px;margin:14px 0 2px;font:24px/1.3 var(--kai);letter-spacing:.06em}
.sdg-name .on{width:7px;height:7px;border-radius:50%;background:#3f7a4a;flex:none;transform:translateY(-4px)}
.sdg-meta{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:13px;color:var(--muted)}
.tag{color:var(--cinnabar);border:1px solid currentColor;padding:0 6px;font-size:12px;letter-spacing:.1em}

/* 山门散开 → 画廊浮现（body.merge 时启用） */
.hero{--q:0}
.sdg-anchor{position:absolute;left:0;top:0;width:1px;height:1px}
body.merge .hero-wrap{position:relative;z-index:6;height:200svh;pointer-events:none}
body.merge .hero{position:sticky;top:0;pointer-events:auto}
body.merge .hero.hero-out{pointer-events:none}
body.merge .changlang{margin-top:-200svh}
body.merge .sdg-anchor{top:70svh}
/* 散开：只动 transform 与 opacity（交给显卡合成，不重算滤镜）；
   「默」字的虚化用预先模糊好的一层交叉淡入，模糊只算一次 */
.hero-title{position:relative}
.brush-blur{position:absolute;left:0;top:0;filter:blur(16px);opacity:0;pointer-events:none;color:var(--ink)}
body.merge .hero.scat .hero-figure,body.merge .hero.scat .hero-mountains,body.merge .hero.scat .hero-title,body.merge .hero.scat .hero-blot,
body.merge .hero.scat .hero-seal,body.merge .hero.scat .hero-kicker,body.merge .hero.scat .hero-sub,body.merge .hero.scat .hero-stats,
body.merge .hero.scat .brush,body.merge .hero.scat .brush-blur{will-change:transform,opacity}
#sdg-sec #gl-canvas,#sdg-sec .gl-axis{will-change:transform,opacity}
.gl-stage:not(.live) .gl-mist{animation-play-state:paused}
#sdg-sec .gl-stage{--enter:1}
#sdg-sec .gl-back,#sdg-sec #gl-canvas,#sdg-sec .gl-axis,#sdg-sec .gl-hud{opacity:var(--enter)}
#sdg-sec #gl-canvas{transform:scale(calc(.82 + .18 * var(--enter)))}
#sdg-sec .gl-axis{transform:rotate(15deg) scale(calc(.82 + .18 * var(--enter)))}

/* 长廊 */
.changlang{position:relative}
.changlang.is-3d .cl-flat{display:none}
.gl-stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--paper);touch-action:pan-y;cursor:grab}
.gl-stage.dragging{cursor:grabbing}
.gl-back{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.gl-land{position:absolute;inset:-6% -12%;background:url(../img/v5-mountains.webp) center 65%/cover;filter:grayscale(1) contrast(1.1) brightness(1.6);mix-blend-mode:multiply;opacity:.14;transform:translate3d(var(--px,0px),0,0);will-change:transform;
  -webkit-mask-image:linear-gradient(transparent,#000 35%,#000 85%,transparent);mask-image:linear-gradient(transparent,#000 35%,#000 85%,transparent)}
.gl-mark{position:absolute;inset:0;display:grid;place-items:center}
.gl-mark span{font:min(22vw,32vh)/1 var(--kai);letter-spacing:.06em;color:var(--cinnabar);opacity:.07;white-space:nowrap;transform:translate3d(var(--nx,0px),-3vh,0);transition:opacity .4s}
.gl-mark span.swap{opacity:0}
#gl-canvas,#roster-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.gl-mist{--tile:max(100vw,1200px);position:absolute;left:0;width:calc(var(--tile) * 2);background-repeat:repeat-x;background-size:var(--tile) 100%;animation:glmist 90s linear infinite;mix-blend-mode:multiply}
.gl-mist.low{bottom:-6%;height:40%;background-image:radial-gradient(ellipse 34% 40% at 28% 64%,#8a817026,#8a817000 72%),radial-gradient(ellipse 28% 34% at 74% 56%,#8a81701e,#8a817000 72%)}
.gl-mist.high{top:10%;height:28%;opacity:.7;animation-duration:140s;animation-direction:reverse;background-image:radial-gradient(ellipse 30% 36% at 36% 50%,#8a81701a,#8a817000 72%),radial-gradient(ellipse 22% 30% at 80% 48%,#8a817014,#8a817000 72%)}
@keyframes glmist{to{transform:translateX(calc(-1 * var(--tile)))}}
.gl-hover{position:absolute;left:7%;top:40%;z-index:2;pointer-events:none;opacity:0;transform:translateY(12px);transition:opacity .35s var(--curve),transform .5s var(--curve);text-shadow:0 2px 18px var(--paper),0 0 2px var(--paper)}
.gl-hover.visible{opacity:1;transform:none}
.gl-hover span{display:block;font:72px/1.25 var(--kai);letter-spacing:.12em;color:var(--ink)}
.gl-hover small{display:block;margin-top:12px;font-size:12px;letter-spacing:.2em;color:var(--cinnabar)}
#sdg-sec .gl-hover{opacity:calc(var(--enter) * 0)}
#sdg-sec .gl-hover.visible{opacity:var(--enter)}
.gl-axis{position:absolute;left:50%;top:49%;width:0;height:0;transform:rotate(15deg);transform-origin:0 0}
.gl-frame{position:absolute;width:var(--card-w);height:var(--card-h);left:calc(var(--card-w) / -2);top:calc(var(--card-h) / -2);padding:0;text-align:left;background:none;border:0;will-change:transform;cursor:inherit}
.gl-surface{position:absolute;inset:0;border:1px solid var(--ink);transition:border-color .4s var(--curve),box-shadow .4s var(--curve);pointer-events:none}
.gl-surface:before,.gl-surface:after{content:"";position:absolute;width:16px;height:16px;border:2px solid var(--cinnabar)}
.gl-surface:before{left:-5px;top:-5px;border-right:0;border-bottom:0}
.gl-surface:after{right:-5px;bottom:-5px;border-left:0;border-top:0}
.gl-frame:hover .gl-surface,.gl-frame:focus-visible .gl-surface{box-shadow:6px 6px 0 var(--paper-3)}
.gl-frame:focus-visible{outline:none}
.gl-fname{position:absolute;left:0;bottom:-36px;font:22px/1.2 var(--kai);letter-spacing:.12em;white-space:nowrap;pointer-events:none}
.gl-role{position:absolute;left:0;right:0;bottom:-60px;font-size:12px;letter-spacing:.08em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.gl-id{position:absolute;right:-26px;top:0;writing-mode:vertical-rl;font-size:12px;letter-spacing:.12em;color:var(--ink-2);pointer-events:none}
.gl-hud{position:absolute;inset:0;pointer-events:none;padding:96px var(--gutter) 24px;display:flex;flex-direction:column;justify-content:space-between}
.gl-hud>*{pointer-events:auto}
.gl-title{display:flex;gap:16px;align-items:flex-end;align-self:flex-start}
.gl-title .sec-no{font-size:64px}
.gl-h{margin:0;font:400 36px/1.2 var(--kai);letter-spacing:.15em}
.gl-count{margin:2px 0 0;font-size:13px;letter-spacing:.15em;color:var(--muted)}
.gl-foot{display:flex;align-items:center;gap:18px;font-size:13px;letter-spacing:.12em;color:var(--ink-2)}
.gl-pos{font-variant-numeric:tabular-nums;white-space:nowrap}
.gl-pos b{font:400 22px/1 var(--kai);color:var(--ink)}
.gl-progress{flex:1;height:2px;background:var(--rule);position:relative;min-width:60px}
.gl-progress i{position:absolute;inset:0;background:var(--cinnabar);transform-origin:left;transform:scaleX(0)}
.gl-arrow{width:40px;height:40px;border:1px solid var(--rule-strong);border-radius:50%;font-size:18px}
.gl-arrow:hover{border-color:var(--ink);background:var(--paper-2)}
.gl-hint{color:var(--muted);white-space:nowrap}
.gl-skip{border:1px solid var(--ink);padding:7px 14px;font-size:13px;letter-spacing:.2em;white-space:nowrap}
.gl-skip:hover{background:var(--ink);color:var(--paper)}
.gl-all{background:var(--cinnabar);color:var(--seal-text);padding:8px 16px;font-size:13px;letter-spacing:.2em;white-space:nowrap}
.gl-all:hover{background:var(--cinnabar-deep)}

/* 全部少东瓜 */
.roster{position:fixed;inset:0;z-index:60;background:var(--paper)}
.roster[hidden]{display:none}
.roster .roster-stage{position:absolute;inset:0;height:auto}
.roster-grid{position:absolute;inset:0;overflow:auto;padding:110px var(--gutter) 60px;background:var(--paper);z-index:4}
.roster-bar{position:absolute;top:18px;right:var(--gutter);z-index:6;display:flex;gap:10px;align-items:center}
.roster-search{display:flex;align-items:center;gap:10px;background:var(--paper-2);border-bottom:1px solid var(--ink);padding:0 12px;font-size:13px;letter-spacing:.2em;color:var(--muted)}
.roster-search input{border:0;background:none;font:15px/1 var(--sans);color:var(--ink);padding:10px 0;width:min(220px,40vw);outline:none}
.roster-mode{border:1px solid var(--ink);padding:8px 16px;font-size:13px;letter-spacing:.2em;background:var(--paper)}
.roster-mode[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.roster-close{width:42px;height:42px;font-size:28px;line-height:1;border:1px solid var(--rule-strong);background:var(--paper)}
.roster-close:hover{border-color:var(--cinnabar);color:var(--cinnabar)}
.sdg.hit .sdg-pic{outline:3px solid var(--cinnabar);outline-offset:4px}
.sdg{cursor:pointer}
.sdg:focus-visible{outline:2px solid var(--cinnabar);outline-offset:6px}

/* 身份帖 */
.profile{border:1px solid var(--ink);background:var(--paper);color:var(--ink);padding:0;width:min(760px,calc(100% - 32px));box-shadow:12px 12px 0 var(--paper-3)}
.profile[open]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.profile::backdrop{background:#1d1b1799;backdrop-filter:blur(4px)}
.pf-close{position:absolute;right:10px;top:6px;font-size:30px;line-height:1;width:44px;height:44px;color:var(--muted)}
.pf-close:hover{color:var(--cinnabar)}
.pf-pic{background:var(--paper-2) center/cover no-repeat;border-right:1px solid var(--ink);min-height:320px;display:grid;place-items:center;font:120px/1 var(--kai);color:var(--muted)}
.pf-body{padding:40px 32px 28px}
.pf-kicker{margin:0;font-size:12px;letter-spacing:.3em;color:var(--cinnabar)}
.pf-body h2{margin:10px 0 8px;font:400 44px/1.2 var(--kai);letter-spacing:.1em}
.pf-role{display:flex;gap:12px;align-items:center;margin:0 0 20px;font-size:13px;color:var(--muted)}
.pf-dl{margin:0;border-top:1px solid var(--rule-strong)}
.pf-dl div{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px dashed var(--rule);font-size:15px}
.pf-dl dt{color:var(--muted);letter-spacing:.15em}
.pf-dl dd{margin:0;text-align:right}
.pf-resume{margin-top:24px;width:100%;padding:12px;background:var(--ink);color:var(--paper);letter-spacing:.3em}

/* 卷轴目录 */
.rail{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.rail a{position:relative;display:flex;align-items:center;gap:10px;padding:6px 0;font-size:12px;letter-spacing:.2em;color:var(--muted)}
.rail a:after{content:"";width:14px;height:2px;background:var(--rule-strong);transition:width .3s var(--curve),background .3s}
.rail a span{opacity:0;transform:translateX(6px);transition:opacity .3s,transform .3s var(--curve)}
.rail:hover a span,.rail a[aria-current=true] span{opacity:1;transform:none}
.rail a[aria-current=true]{color:var(--ink)}
.rail a[aria-current=true]:after{width:28px;background:var(--cinnabar)}
.rail-step{width:30px;height:30px;align-self:flex-end;border:1px solid var(--rule-strong);font-size:14px;line-height:1;color:var(--ink-2);background:#ece5d6cc}
.rail-step:hover{border-color:var(--ink);color:var(--ink)}

/* 风云榜 */
.rank{list-style:none;margin:0;padding:0;counter-reset:r}
.rank li{display:grid;grid-template-columns:72px minmax(120px,220px) 1fr 90px;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid var(--rule)}
.rank .no{font:44px/1 var(--kai);color:var(--ink-2)}
.rank li:nth-child(-n+3) .no{color:var(--cinnabar)}
.rank .who{font:24px/1.3 var(--kai);letter-spacing:.06em}
.rank .who small{display:block;font:12px/1.6 var(--sans);letter-spacing:.1em;color:var(--muted)}
.rank .bar{position:relative;height:14px}
.rank .bar i{position:absolute;left:0;top:0;bottom:0;width:var(--w);background:var(--ink);filter:url(#rough);transform:scaleX(0);transform-origin:left;border-radius:1px 8px 8px 1px}
.rank li:nth-child(-n+3) .bar i{background:var(--cinnabar)}
.rank .val{font:28px/1 var(--kai);text-align:right;font-variant-numeric:tabular-nums}
.rank .stamp{position:absolute;right:-6px;top:50%;font-size:15px;transform:translateY(-50%) rotate(-8deg) scale(1.8);opacity:0}
.rank .who{position:relative}

/* 百业战 */
.zhan-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.plate{margin:0;padding:12px;background:var(--paper-2);border:1px solid var(--ink);box-shadow:8px 8px 0 var(--paper-3)}
.plate img{width:100%;aspect-ratio:16/10;object-fit:cover;filter:grayscale(.55) sepia(.35) contrast(1.05)}
.plate figcaption{display:flex;justify-content:space-between;margin-top:10px;font-size:12px;letter-spacing:.25em;color:var(--muted)}
.battles,.acts{list-style:none;margin:0;padding:0}
.battle{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:20px 0;border-bottom:1px solid var(--rule)}
.battle:first-child{border-top:2px solid var(--ink)}
.battle h4{margin:0;font:400 26px/1.3 var(--kai);letter-spacing:.06em}
.battle time{font-size:14px;color:var(--ink-2);letter-spacing:.1em}
.battle .count{grid-row:1/3;grid-column:2;align-self:center;text-align:right;font:40px/1 var(--kai);color:var(--cinnabar)}
.battle .count small{display:block;font:12px/1.8 var(--sans);color:var(--muted);letter-spacing:.1em}
.zhan-list h3{margin:40px 0 8px;font:400 14px/1 var(--sans);letter-spacing:.3em;color:var(--muted)}
.acts li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px dashed var(--rule);font-size:15px}
.acts span:last-child{color:var(--muted);font-size:14px}

.battle{cursor:pointer;transition:background .3s}
.battle:hover,.battle:focus-visible{background:var(--paper-2);outline:none}
.battle:hover h4{color:var(--cinnabar)}
.zb-entry{margin:20px 0 0}
.zb-open{width:100%;padding:14px 18px;background:var(--ink);color:var(--paper);font-size:15px;letter-spacing:.3em;text-align:left}
.zb-open:hover{background:var(--cinnabar)}

/* 百业战 · 排兵布阵 */
.zb{position:fixed;inset:0;z-index:60;background:var(--paper);display:flex;flex-direction:column}
.zb[hidden]{display:none}
.zb-bar{display:flex;align-items:center;gap:20px;padding:14px var(--gutter);border-bottom:1px solid var(--rule-strong);flex-wrap:wrap}
.zb-title{display:flex;align-items:flex-end;gap:12px}
.zb-title .sec-no{font-size:44px}
.zb-h{margin:0;font:400 26px/1.2 var(--kai);letter-spacing:.12em}
.zb-sub{margin:2px 0 0;font-size:12px;letter-spacing:.12em;color:var(--muted)}
.zb-tabs{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.zb-tab{padding:8px 16px;border:1px solid var(--rule-strong);font-size:14px;letter-spacing:.15em;display:flex;gap:8px;align-items:center}
.zb-tab b{font:400 18px/1 var(--kai);color:var(--cinnabar)}
.zb-tab[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.zb-tab[aria-pressed=true] b{color:#e9b9a8}
.zb-close{width:42px;height:42px;font-size:28px;line-height:1;border:1px solid var(--rule-strong)}
.zb-close:hover{border-color:var(--cinnabar);color:var(--cinnabar)}
.zb-body{flex:1;min-height:0;overflow:auto;padding:24px var(--gutter) 40px}
.zb-empty{color:var(--muted);font-size:14px;padding:12px 0;list-style:none}
.zb-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);z-index:70;background:var(--ink);color:var(--paper);padding:10px 20px;font-size:14px;letter-spacing:.1em;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s var(--curve)}
.zb-toast.on{opacity:1;transform:translate(-50%,0)}
.zb-av{flex:none;display:grid;place-items:center;width:40px;height:40px;background:var(--paper-3);border:1px solid var(--rule-strong);overflow:hidden;font:20px/1 var(--kai);color:var(--ink-2)}
.zb-av img{width:100%;height:100%;object-fit:cover}
.zb-av.sm{width:30px;height:30px;font-size:15px}
.zb-who{display:flex;flex-direction:column;min-width:0;flex:1;text-align:left}
.zb-who strong{font:400 17px/1.25 var(--kai);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zb-who small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zb-pow{font:15px/1 var(--kai);color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
/* 总览 */
.zb-ov{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:32px;max-width:1300px;margin:0 auto}
.zb-col header{display:grid;grid-template-columns:1fr auto;align-items:end;gap:4px 16px;border-bottom:2px solid var(--ink);padding-bottom:12px;margin-bottom:6px}
.zb-col h3{margin:0;font:400 32px/1.2 var(--kai);letter-spacing:.1em}
.zb-col header p{grid-column:1;margin:0;font-size:13px;color:var(--muted);letter-spacing:.08em}
.zb-go{grid-column:2;grid-row:1/3;align-self:center;padding:10px 18px;background:var(--cinnabar);color:var(--seal-text);letter-spacing:.2em;font-size:14px}
.zb-go:hover{background:var(--cinnabar-deep)}
.zb-plist{list-style:none;margin:0;padding:0}
.zb-plist li{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px dashed var(--rule)}
.zb-rank{width:24px;text-align:right;font:14px/1 var(--kai);color:var(--muted)}
/* 沙盘 */
.zb-sandbox{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;padding-top:16px}
.zb-pool{position:sticky;top:0;align-self:start;max-height:calc(100svh - 120px);display:flex;flex-direction:column;background:var(--paper-2);border:1px solid var(--rule-strong)}
.zb-pool header{padding:12px 14px;border-bottom:1px solid var(--rule)}
.zb-ptitle{margin:0 0 8px;font-size:13px;letter-spacing:.2em;color:var(--muted)}
.zb-ptitle b{font:400 24px/1 var(--kai);color:var(--ink);letter-spacing:0}
.zb-q{width:100%;border:0;border-bottom:1px solid var(--ink);background:var(--paper);padding:8px 10px;font:14px/1.3 var(--sans);color:var(--ink);outline:none}
.zb-pcards{list-style:none;margin:0;padding:6px;overflow:auto;flex:1}
.zb-pcard{width:100%;display:flex;align-items:center;gap:10px;padding:6px 8px;border:1px solid transparent;cursor:grab}
.zb-pcard:hover{background:var(--paper);border-color:var(--rule-strong)}
.zb-pcard.sel{background:var(--paper);border-color:var(--cinnabar);box-shadow:inset 3px 0 0 var(--cinnabar)}
.zb-phint{margin:0;padding:10px 14px;border-top:1px solid var(--rule);font-size:12px;color:var(--muted);letter-spacing:.05em}
.zb-pool.over,.zb-pool:has(.over){outline:2px dashed var(--cinnabar);outline-offset:-4px}
.zb-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:18px}
.zb-status{margin:0 auto 0 0;font-size:14px;letter-spacing:.08em;color:var(--ink-2)}
.zb-status b{font:400 26px/1 var(--kai);color:var(--ink)}
.zb-status.over b,.zb-status em{color:var(--cinnabar);font-style:normal}
.zb-btn{padding:9px 16px;border:1px solid var(--ink);font-size:13px;letter-spacing:.15em}
.zb-btn:hover{background:var(--ink);color:var(--paper)}
.zb-btn.primary{background:var(--cinnabar);border-color:var(--cinnabar);color:var(--seal-text)}
.zb-btn.primary:hover{background:var(--cinnabar-deep)}
.zb-teams{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,560px),1fr));gap:24px}
.zb-team{border:1px solid var(--ink);background:var(--paper);box-shadow:8px 8px 0 var(--paper-3);padding:14px 16px 16px}
.zb-team header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.zb-tname{width:7em;border:0;border-bottom:1px solid transparent;background:none;font:400 26px/1.2 var(--kai);letter-spacing:.12em;color:var(--ink);padding:2px 0;outline:none}
.zb-tname:hover,.zb-tname:focus{border-bottom-color:var(--cinnabar)}
.zb-cap{font-size:12px;letter-spacing:.1em;color:var(--muted);display:flex;align-items:center;gap:6px}
.zb-cap select{font:14px var(--sans);border:1px solid var(--rule-strong);background:var(--paper-2);padding:3px 6px;color:var(--ink)}
.zb-tcount{margin-left:auto;font:400 22px/1 var(--kai);color:var(--ink-2)}
.zb-tcount.full{color:var(--cinnabar)}
.zb-del{border:0;padding:4px 8px;font-size:22px;line-height:1;letter-spacing:0;color:var(--muted)}
.zb-del:hover{background:none;color:var(--cinnabar)}
.zb-grid{display:grid;grid-template-columns:repeat(var(--cols,5),minmax(0,1fr));gap:6px}
.zb-grid.squads{grid-template-columns:3em repeat(var(--cols,5),minmax(0,1fr))}
.zb-sq{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-right:2px solid var(--ink);padding-right:4px}
.zb-sq b{font:400 16px/1 var(--kai);letter-spacing:.05em}
.zb-sq small{font-size:11px;color:var(--muted)}
.zb-sq.off{opacity:.35;border-right-color:var(--rule)}
.zb-team[data-role=atk]{border-top:4px solid var(--cinnabar)}
.zb-team[data-role=def]{border-top:4px solid #2f5673}
.zb-team[data-role=flex]{border-top:4px solid #6f6a60}
.zb-role select{font-weight:500}
.zb-slot{position:relative;min-height:74px;border:1px dashed var(--rule-strong);background:var(--paper-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 4px;cursor:pointer;min-width:0}
.zb-slot:hover{border-color:var(--ink)}
.zb-slot.filled{border-style:solid;border-color:var(--ink);background:var(--paper);cursor:grab}
.zb-slot.sel{border-color:var(--cinnabar);box-shadow:inset 0 0 0 2px var(--cinnabar)}
.zb-slot.over{border:2px solid var(--cinnabar);background:#b23a2b14}
.zb-slot.off{cursor:not-allowed;background:repeating-linear-gradient(135deg,transparent 0 6px,#1d1b1712 6px 7px);border-color:var(--rule);opacity:.6}
.zb-slot .zb-nm{font:14px/1.2 var(--kai);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zb-slot small{font-size:10px;color:var(--muted);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zb-no{font:14px/1 var(--kai);color:var(--rule-strong)}
.zb-x{position:absolute;right:2px;top:0;width:20px;height:20px;line-height:20px;text-align:center;font-size:14px;color:var(--muted);opacity:0}
.zb-slot.filled:hover .zb-x,.zb-slot.sel .zb-x{opacity:1}
.zb-x:hover{color:var(--cinnabar)}
.dragging{opacity:.4}
/* 分团 / 地图 切换 */
.zb-mode{display:inline-flex;border:1px solid var(--ink)}
.zb-mode button{padding:8px 16px;font-size:13px;letter-spacing:.2em}
.zb-mode button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.zb-mapmode{display:flex;flex-direction:column;gap:12px;padding-top:14px;padding-bottom:14px}
.zb-mapmode>.zb-mode{align-self:flex-start}
.zb-mapmode>div:last-child{flex:1;min-height:0}
/* 地图沙盘 */
.zp{display:grid;grid-template-columns:280px minmax(0,1fr);gap:16px;height:100%;min-height:560px}
.zp-side{overflow:auto;display:flex;flex-direction:column;gap:12px;padding-right:4px}
.zp-box{border:1px solid var(--rule-strong);background:var(--paper-2);padding:12px}
.zp-box h4{margin:0 0 10px;font:400 18px/1.2 var(--kai);letter-spacing:.15em}
.zp-tools{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.zp-tool{padding:7px 8px;border:1px solid var(--rule-strong);background:var(--paper);font-size:12px;letter-spacing:.05em;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zp-tool:first-child{grid-column:1/3}
.zp-tool[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.zp-tool.ar-atk{border-left:4px solid #b23a2b}.zp-tool.ar-mv{border-left:4px dashed #6f6a60}.zp-tool.ar-en{border-left:4px dotted #2f5673}
.zp-tool.mk{border-left:4px solid var(--c)}
.zp-tool.en{border-left:4px dashed var(--ink-2)}
.zp-hint{margin:8px 0 0;font-size:12px;color:var(--muted);line-height:1.6}
.zp-flags{display:flex;flex-direction:column;gap:6px}
.zp-flag{padding:8px 10px;border:1px solid var(--rule-strong);background:var(--paper)}
.zp-fhead{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.zp-fhead b{font:400 18px/1 var(--kai)}
.zp-fhead span:last-child{font-size:12px;color:var(--muted)}
.zp-rbadge{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:2px solid var(--c);color:var(--c);font:13px/1 var(--kai);flex:none}
.zp-fbtns{display:flex;flex-wrap:wrap;gap:4px}
.zp-ub{padding:4px 8px;border:1px solid var(--rule-strong);background:var(--paper-2);font-size:12px;display:inline-flex;gap:4px;align-items:baseline}
.zp-ub small{color:var(--muted);font-size:10px}
.zp-ub:hover{border-color:var(--ink)}
.zp-ub.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.zp-ub.on small{color:#d8cdb6}
.zp-goalrow{display:grid;grid-template-columns:auto auto 1fr;gap:8px;align-items:center;margin-bottom:6px}
.zp-goalrow b{font:400 16px/1 var(--kai)}
.zp-goalrow .zp-in{margin:0}
.zp-tpl{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;color:var(--muted)}
.zp-tpl select{flex:1;min-width:0;font:13px var(--sans);border:1px solid var(--rule-strong);background:var(--paper);padding:6px;color:var(--ink)}
.zp-sit{margin:0 0 4px;font-size:13px;display:flex;gap:8px;flex-wrap:wrap;color:var(--ink-2)}
.zp-sit b{font-weight:500;color:var(--ink)}
.zp-goalsum{flex-basis:100%;font-size:13px;color:var(--ink);letter-spacing:.03em}
.zp-selbox{border-color:var(--cinnabar);box-shadow:inset 3px 0 0 var(--cinnabar)}
.zp-names{margin:0 0 10px;font-size:13px;line-height:1.7;color:var(--ink-2)}
.zp-in{width:100%;border:0;border-bottom:1px solid var(--ink);background:var(--paper);padding:7px 9px;font:14px/1.3 var(--sans);color:var(--ink);outline:none;margin-bottom:8px}
.zp-in.sm{width:7em;margin:0}
.zp-btn{padding:8px 14px;border:1px solid var(--ink);font-size:13px;letter-spacing:.1em;background:var(--paper)}
.zp-btn:hover{background:var(--ink);color:var(--paper)}
.zp-btn.primary{width:100%;background:var(--cinnabar);border-color:var(--cinnabar);color:var(--seal-text)}
.zp-btn.danger{color:var(--cinnabar);border-color:var(--cinnabar)}
.zp-btn.danger:hover{background:var(--cinnabar);color:var(--seal-text)}
.zp-btn.sm{padding:5px 10px;font-size:12px}
.zp-seg{display:flex;align-items:center;gap:4px;margin-bottom:8px;font-size:13px}
.zp-seg span{width:3.5em;color:var(--muted);letter-spacing:.1em}
.zp-seg button{flex:1;padding:6px 4px;border:1px solid var(--rule-strong);background:var(--paper);font-size:13px}
.zp-seg button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.zp-time{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:13px;color:var(--muted)}
.zp-time span{width:5em}
.zp-stage{position:relative;display:flex;flex-direction:column;border:1px solid var(--ink);background:#e3dccc;min-height:0}
.zp-svg{flex:1;width:100%;min-height:360px;display:block;touch-action:none;cursor:grab}
.zp-stage[data-tool^="ar:"] .zp-svg{cursor:crosshair}
.zp-stage[data-tool^="mk:"] .zp-svg,.zp-stage[data-tool=en] .zp-svg{cursor:copy}
.zp-svg [data-id]{cursor:move}
.zp-phases{border-top:1px solid var(--ink);background:var(--paper);padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.zp-phrow{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}
.zp-ph{flex:none;display:flex;flex-direction:column;align-items:flex-start;padding:6px 14px;border:1px solid var(--rule-strong);background:var(--paper-2)}
.zp-ph b{font:400 16px/1.2 var(--kai);letter-spacing:.08em}
.zp-ph small{font-size:11px;color:var(--muted)}
.zp-ph[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.zp-ph[aria-pressed=true] small{color:#d8cdb6}
.zp-ph.add{justify-content:center;color:var(--cinnabar);border-style:dashed}
.zp-phinfo{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.zp-phinfo>.zp-in:first-child{width:9em;margin:0}
.zp-cue{font-size:12px;color:var(--cinnabar);letter-spacing:.05em}
.zp-nav{display:inline-flex;gap:4px;margin-left:auto}
.zp-nav+.zp-nav{margin-left:0}

/* 江湖来信 */
.letters{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:24px}
.letter{position:relative;padding:28px 28px 24px;background:var(--paper-2);border:1px solid var(--rule-strong);transition:transform .5s var(--curve),box-shadow .5s var(--curve)}
.letter:hover{transform:translateY(-4px);box-shadow:6px 6px 0 var(--paper-3)}
.letter header{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.15em;color:var(--muted)}
.letter h3{margin:14px 0 10px;font:400 26px/1.35 var(--kai);letter-spacing:.06em}
.letter p{margin:0;font-size:14px;color:var(--ink-2)}
a.letter{display:block;color:inherit;text-decoration:none}
.letter-guide{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.letter-guide header{color:#cbbfa8}
.letter-guide h3{color:var(--paper)}
.letter-guide p{color:#e3dac7}
.letter-go{display:inline-block;margin-top:16px;font-size:14px;color:var(--seal-text);background:var(--cinnabar);padding:6px 14px;letter-spacing:.1em}
.letter-guide:focus-visible{outline:3px solid var(--cinnabar);outline-offset:3px}
.letter .pin{position:absolute;right:20px;bottom:-14px;font-size:13px;transform:rotate(-6deg)}
.empty{color:var(--muted);font-size:14px}

/* 入社 */
.join{position:relative;margin:clamp(40px,8vw,120px) var(--gutter) 0;padding:clamp(56px,9vw,120px) clamp(24px,6vw,96px);background:var(--ink);color:var(--paper);overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:40px}
.join:before{content:"";position:absolute;inset:0;background:url(../img/v5-mountains.webp) center/cover;opacity:.18;filter:grayscale(1)}
.join-inner{position:relative;max-width:640px}
.join-kicker{margin:0;font-size:13px;letter-spacing:.5em;color:#c9b99b}
.join h2{margin:12px 0 16px;font:400 clamp(40px,5.6vw,80px)/1.15 var(--kai);letter-spacing:.08em}
.join p{color:#d9d0bf;margin:0}
.join-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:22px}
.join-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid #c9b99b;color:#efe6d2;font-size:14px;letter-spacing:.2em}
.join-chip i{width:8px;height:8px;border-radius:50%;background:#8a8170}
.join-chip.open{border-color:var(--cinnabar);background:#b23a2b33}
.join-chip.open i{background:#e0604c;box-shadow:0 0 0 4px #e0604c33;animation:joinpulse 2s ease-in-out infinite}
@keyframes joinpulse{50%{box-shadow:0 0 0 7px #e0604c11}}
.join-slots{font:400 26px/1 var(--kai);color:#f2d3b8;letter-spacing:.08em}
.join-req{flex-basis:100%;margin:6px 0 0;padding-left:1.2em;color:#d9d0bf;font-size:14px;line-height:1.9}
.join-seal{position:relative;font-size:clamp(40px,6vw,88px);transform:rotate(6deg);flex:none}

/* 页脚 */
.foot{padding:56px var(--gutter) 40px;display:grid;grid-template-columns:auto 1fr;column-gap:20px;font-size:13px;color:var(--muted)}
.foot p{margin:0}
.foot-mark{grid-row:1/4;font:56px/1 var(--kai);color:var(--ink)}
.foot p:first-of-type{color:var(--ink);letter-spacing:.2em}
.foot-note a{border-bottom:1px solid var(--rule-strong)}
.foot-note a:hover{color:var(--cinnabar);border-color:var(--cinnabar)}

/* 出场 */
.reveal{opacity:0;transform:translateY(24px)}
.reveal.in{opacity:1;transform:none;transition:opacity .9s var(--curve),transform 1.1s var(--curve)}
.no-motion .reveal{opacity:1;transform:none}
.no-motion .rank .bar i{transform:none}
.no-motion .rank .stamp{opacity:1;transform:translateY(-50%) rotate(-8deg)}

/* 平板 */
@media(max-width:1100px){
  .sdg-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-figure{right:-22vw;opacity:.5}
  .hero-stats{background:#ece5d6d9}
  .scroll-cue{display:none}
  .source-tag{position:relative;right:auto;bottom:auto;margin-top:12px;justify-self:start;padding-left:0}
}
/* 手机 */
@media(max-width:760px){
  .nav{gap:12px;padding:12px 16px}
  .nav-seal span{width:38px;height:38px;font-size:22px}
  .nav-join{display:none}
  .nav-id{margin-left:auto;gap:6px}
  .nav-login,.nav-admin{padding:7px 12px;font-size:13px;letter-spacing:.1em}
  .nav-logout{font-size:13px;letter-spacing:.1em}
  .nav-menu{display:grid;place-items:center}
  .nav-links{position:fixed;inset:62px 0 auto 0;flex-direction:column;gap:0;margin:0;padding:8px 16px 20px;background:var(--paper);border-bottom:1px solid var(--rule-strong);font-size:18px;
    transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .3s,transform .3s var(--curve),visibility 0s .3s}
  .nav-links a{padding:14px 0;border-bottom:1px solid var(--rule)}
  .nav.open .nav-links{opacity:1;transform:none;visibility:visible;transition:opacity .3s,transform .3s var(--curve)}
  .hero{padding:84px 16px 20px}
  .hero-figure{height:70svh;right:-38vw;bottom:14svh;opacity:.32}
  .hero-stats{background:#ece5d6d9}
  .hero-stats dt{white-space:nowrap;letter-spacing:.06em}
  .hero-blot{width:110vw;left:-20vw}
  .hero-inner{align-self:start;margin-top:4svh}
  .hero-title{font-size:min(44svh,62vw)}
  .hero-kicker{font-size:13px;letter-spacing:.4em}
  .hero-sub{font-size:20px;margin-bottom:0}
  .hero-stats{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:4px}
  .hero-stats div:nth-child(4){padding-left:0;border-left:0}
  .hero-stats dd{font-size:26px}
  .source-tag{position:relative;right:auto;bottom:auto;margin-top:12px;justify-self:start;padding-left:0}
  .scroll-cue{display:none}
  .sec-head{column-gap:14px}
  .sdg-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sdg-name{font-size:20px}
  .rank li{grid-template-columns:44px 1fr 64px;grid-template-rows:auto auto;gap:6px 14px;padding:16px 0}
  .rank .no{grid-row:1/3;font-size:34px}
  .rank .bar{grid-column:2/4;grid-row:2;height:10px}
  .rank .val{grid-column:3;grid-row:1;font-size:22px}
  .rank .who{font-size:20px}
  .zhan-grid{grid-template-columns:1fr}
  .rail{display:none}
  .gl-hud{padding:76px 16px 16px}
  .gl-title .sec-no{font-size:44px}.gl-h{font-size:28px}
  .gl-foot{flex-wrap:wrap;gap:10px}
  .gl-hint{display:none}
  .gl-progress{order:5;flex-basis:100%}
  .gl-skip{margin-left:auto}
  .gl-all{padding:7px 10px;letter-spacing:.08em}
  .gl-hover{display:none}
  .zb-bar{padding:10px 12px;gap:10px}
  .zb-title .sec-no{font-size:32px}.zb-h{font-size:20px}
  .zb-tabs{order:3;width:100%;margin:0}
  .zb-tab{flex:1;justify-content:center;padding:8px 6px}
  .zb-close{margin-left:auto}
  .zb-body{padding:14px 12px 40px}
  .zb-sandbox{grid-template-columns:1fr;gap:14px}
  .zb-pool{position:relative;max-height:42svh}
  .zb-teams{grid-template-columns:1fr}
  .zb-team{padding:10px;box-shadow:4px 4px 0 var(--paper-3)}
  .zb-tname{font-size:20px;width:5em}
  .zb-slot{min-height:62px;padding:4px 2px}
  .zb-av.sm{width:24px;height:24px}
  .zb-slot .zb-nm{font-size:12px}
  .zb-slot small{display:none}
  .zb-x{opacity:1}
  .hero-mountains,.join:before,.gl-land{background-image:url(../img/v5-mountains-m.webp)}
  /* 手机专项：整页纸纹不做混合、导航不用毛玻璃（最耗手机 GPU 的两项，画面几乎看不出差别） */
  body:before{mix-blend-mode:normal;opacity:.22}
  .nav.scrolled{backdrop-filter:none;background:#ece5d6f2}
  .gl-mist{mix-blend-mode:normal;opacity:.7}
  .zb-mapmode>div:last-child{flex:none}
  .zp{grid-template-columns:1fr;height:auto;min-height:0}
  .zp-stage{order:-1}
  .zp-svg{min-height:52svh}
  .zp-nav{margin-left:0}
  .zb-tools{gap:8px}
  .zb-status{flex-basis:100%;margin:0}
  .zb-tools .zb-btn{flex:1 1 calc(50% - 8px);padding:9px 8px;letter-spacing:.05em;white-space:nowrap}
  .roster-bar{top:12px;right:12px;left:12px;justify-content:flex-end}
  .roster .gl-hud{padding-top:72px}
  .roster-search span{display:none}
  .gl-fname{font-size:18px;bottom:-30px}.gl-role{bottom:-50px}
  .gl-id{right:-22px}
  .profile[open]{display:block}
  .pf-pic{min-height:0;height:240px;border-right:0;border-bottom:1px solid var(--ink)}
  .pf-body{padding:24px 20px}
  .pf-body h2{font-size:34px}
  .join{flex-direction:column;align-items:flex-start;margin:40px 16px 0}
  .join-seal{align-self:flex-end}
}
.no-motion *{animation:none!important;transition:none!important}