:root{
  --bg:#12100C; --panel:#1B1712; --panel-2:#221C15;
  --line:#302819; --line-soft:#26200F;
  --ink:#EAE5D8; --ink-2:#C6BEAB; --muted:#94896F;
  --gold:#D2A648; --gold-hi:#EFC974; --gold-dim:#8E7028;
  --warm:#C8794A; --jade:#5FA684;
  --stone:linear-gradient(180deg,#1F1A13 0%,#171208 100%);
  --r:4px;
  --f-song:"Songti SC","Source Han Serif SC","Noto Serif SC","STSong",SimSun,"宋体",serif;
  --f-body:"PingFang SC","HarmonyOS Sans SC","Source Han Sans SC","Microsoft YaHei","微软雅黑",system-ui,sans-serif;
  --f-num:Bahnschrift,"DIN Alternate","Roboto Condensed","Segoe UI",ui-sans-serif,sans-serif;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#EAE7DE; --panel:#F5F3EC; --panel-2:#EDEAE1;
    --line:#D0CCBD; --line-soft:#DEDACD;
    --ink:#1A1811; --ink-2:#454031; --muted:#75705E;
    --gold:#8C6C1C; --gold-hi:#6F5512; --gold-dim:#BCA669;
    --warm:#A05226; --jade:#2A7355;
    --stone:linear-gradient(180deg,#F7F5EE 0%,#EBE8DF 100%);
  }
}
:root[data-theme="light"]{
  --bg:#EAE7DE; --panel:#F5F3EC; --panel-2:#EDEAE1;
  --line:#D0CCBD; --line-soft:#DEDACD;
  --ink:#1A1811; --ink-2:#454031; --muted:#75705E;
  --gold:#8C6C1C; --gold-hi:#6F5512; --gold-dim:#BCA669;
  --warm:#A05226; --jade:#2A7355;
  --stone:linear-gradient(180deg,#F7F5EE 0%,#EBE8DF 100%);
}
:root[data-theme="dark"]{
  --bg:#12100C; --panel:#1B1712; --panel-2:#221C15;
  --line:#302819; --line-soft:#26200F;
  --ink:#EAE5D8; --ink-2:#C6BEAB; --muted:#94896F;
  --gold:#D2A648; --gold-hi:#EFC974; --gold-dim:#8E7028;
  --warm:#C8794A; --jade:#5FA684;
  --stone:linear-gradient(180deg,#1F1A13 0%,#171208 100%);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font:16px/1.85 var(--f-body); overflow-x:hidden}
a{color:var(--gold-hi)}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:2px}
.wrap{max-width:980px; margin:0 auto; padding:0 22px}
.ico{width:26px; height:26px; stroke:currentColor; fill:none;
     stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex:none}

/* 顶栏 */
.top{position:sticky; top:0; z-index:30; background:var(--stone); border-bottom:1px solid var(--line)}
.top-in{display:flex; align-items:center; gap:14px; max-width:980px; margin:0 auto; padding:11px 22px}
.top .mark{font:700 15px/1 var(--f-song); letter-spacing:.14em; color:var(--gold-hi); white-space:nowrap}
.top nav{margin-left:auto; display:flex; gap:2px; flex-wrap:wrap}
.top nav a{color:var(--muted); text-decoration:none; font-size:13.5px; padding:6px 10px; border-radius:2px}
.top nav a:hover{color:var(--gold-hi); background:color-mix(in oklab,var(--gold) 12%,transparent)}
.themebtn{background:none; border:1px solid var(--line); color:var(--muted); border-radius:2px;
          padding:5px 9px; cursor:pointer; font:12px/1 var(--f-body)}
.themebtn:hover{border-color:var(--gold-dim); color:var(--gold-hi)}

/* 首屏：游戏实景打底，压两层暗罩保证文字可读 */
.hero{position:relative; border-bottom:1px solid var(--line); overflow:hidden; background:#0E0B07}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(90deg, rgba(14,11,7,.95) 0%, rgba(14,11,7,.78) 46%, rgba(14,11,7,.34) 100%),
    linear-gradient(0deg,  rgba(14,11,7,.90) 0%, rgba(14,11,7,.16) 48%, rgba(14,11,7,.52) 100%),
    var(--shot, radial-gradient(120% 90% at 78% 18%, rgba(210,166,72,.16), transparent 62%))
    center/cover no-repeat;
}
.hero-in{position:relative; z-index:1; padding:12vh 0 9vh}
.eyebrow{font:600 11.5px/1 var(--f-body); letter-spacing:.26em; color:var(--muted); margin:0 0 22px}
.hero h1{margin:0; font:700 clamp(38px,8vw,72px)/1.25 var(--f-song); letter-spacing:.16em; text-wrap:balance}
.hero .sub{margin:18px 0 0; font-size:clamp(15px,2vw,17px); max-width:44em; line-height:1.9}
/* 首屏固定深色，不跟随主题 —— 底图本身是暗的，浅色主题下反白读不清 */
.hero .eyebrow{color:#B0A084}
.hero h1{color:#F3E8CF}
.hero .sub{color:#D8CEB8}
.hero .meta{color:#B0A084}
.hero .btn.ghost{border-color:#4C412D; color:#DED4BD}
.hero .btn.ghost:hover{border-color:#8E7028; color:#EFC974}
.hero .copy{border-color:#4C412D; color:#B0A084}

.acts{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:30px}
.btn{display:inline-flex; align-items:center; gap:9px; text-decoration:none; border-radius:var(--r);
     padding:13px 26px; font:600 15px/1 var(--f-body); letter-spacing:.05em;
     border:1px solid var(--gold-dim); color:var(--gold-hi);
     background:color-mix(in oklab,var(--gold) 16%,transparent)}
.btn:hover{background:color-mix(in oklab,var(--gold) 28%,transparent)}
.btn .ico{width:19px; height:19px}
.btn.ghost{background:none}
.meta{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:20px 0 0;
      font-size:13px; color:var(--muted)}
.meta code{font:700 14px/1 var(--f-num); letter-spacing:.13em; color:var(--gold-hi);
      background:color-mix(in oklab,var(--gold) 14%,transparent);
      border:1px solid var(--gold-dim); border-radius:2px; padding:5px 9px; user-select:all}
.copy{background:none; border:1px solid var(--line); color:var(--muted); border-radius:2px;
      padding:5px 9px; cursor:pointer; font:12px/1 var(--f-body)}
.copy:hover{border-color:var(--gold-dim); color:var(--gold-hi)}
.copy.done{border-color:var(--jade); color:var(--jade)}
.open{font:500 13px/1 var(--f-num); letter-spacing:.05em}
.open b{color:var(--gold-hi); font-weight:600}

/* 内容段 */
.sec{padding:58px 0; border-bottom:1px solid var(--line)}
.sec h2{margin:0 0 6px; font:700 clamp(21px,3vw,28px)/1.5 var(--f-song); letter-spacing:.05em}
.sec .lede{margin:0 0 28px; color:var(--muted); font-size:14.5px; max-width:48ch}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(236px,1fr)); gap:13px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:20px}
.card .ico{color:var(--c,var(--gold)); margin-bottom:13px}
.card h3{margin:0 0 6px; font:700 17px/1.5 var(--f-song); letter-spacing:.04em; color:var(--ink)}
.card p{margin:0; font-size:14px; line-height:1.85; color:var(--muted)}
.card b{color:var(--c,var(--gold-hi)); font-weight:600}

.quote{padding:64px 0; border-bottom:1px solid var(--line); text-align:center}
.quote blockquote{margin:0 auto; font:700 clamp(20px,3.4vw,30px)/1.7 var(--f-song);
      letter-spacing:.04em; max-width:20ch; color:var(--gold-hi); text-wrap:balance}
.quote cite{display:block; margin-top:16px; font-style:normal; color:var(--muted); font-size:13px}

.doors{display:grid; grid-template-columns:repeat(auto-fit,minmax(226px,1fr)); gap:13px}
.door{display:block; text-decoration:none; padding:20px;
      background:var(--panel); border:1px solid var(--line); border-radius:var(--r)}
.door:hover{border-color:var(--gold-dim); background:var(--panel-2)}
.door .ico{color:var(--gold); margin-bottom:12px}
.door h3{margin:0 0 5px; font:700 17px/1.4 var(--f-song); letter-spacing:.05em; color:var(--gold-hi)}
.door p{margin:0; font-size:13.5px; line-height:1.75; color:var(--muted)}
.door.bounty{border-color:var(--gold-dim)}
.door .award{color:var(--gold-hi); font-weight:600}
.door .code{font:700 13px/1 var(--f-num); letter-spacing:.1em; color:var(--gold-hi)}

/* 争霸战相册：左一张大图，右四张小图；点图看原图 */
.shots{display:grid; grid-template-columns:1.55fr 1fr 1fr; grid-template-rows:auto auto; gap:10px}
.shot{position:relative; margin:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--r);
      background:#0E0B07; cursor:zoom-in; aspect-ratio:4/3}
.shot.big{grid-row:span 2; aspect-ratio:auto}
.shot img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.3,1), filter .3s}
.shot:hover img{transform:scale(1.04); filter:brightness(1.08)}
.shot::after{content:""; position:absolute; inset:0; pointer-events:none;
      box-shadow:inset 0 0 0 1px rgba(239,201,116,0); transition:box-shadow .3s}
.shot:hover::after{box-shadow:inset 0 0 0 1px rgba(239,201,116,.55)}
.shot figcaption{position:absolute; left:0; right:0; bottom:0; padding:22px 14px 10px;
      font:600 13px/1.4 var(--f-song); letter-spacing:.08em; color:#F3E8CF;
      background:linear-gradient(0deg,rgba(14,11,7,.88),transparent)}
.shots-note{margin:14px 0 0; font-size:13px; color:var(--muted)}
.lb{position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
    background:rgba(8,6,4,.92); padding:4vh 16px; cursor:zoom-out}
.lb img{max-width:100%; max-height:100%; border:1px solid #4C412D; border-radius:var(--r); box-shadow:0 20px 60px rgba(0,0,0,.6)}
@media (max-width:640px){
  .shots{grid-template-columns:1fr 1fr}
  .shot.big{grid-column:span 2; grid-row:auto; aspect-ratio:4/3}
}

/* 新闻 */
.news-lead{display:grid; grid-template-columns:260px 1fr; text-decoration:none; color:inherit;
  background:var(--panel); border:1px solid var(--gold-dim); border-radius:var(--r); overflow:hidden}
.news-lead:hover{background:var(--panel-2)}
.news-lead:hover .news-more{color:var(--gold-hi)}
.news-art{position:relative; min-height:170px; background:#0E0B07; overflow:hidden}
.news-art img{position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover}
.news-body{padding:20px 22px}
.news-meta{margin:0 0 6px; font:500 12.5px/1 var(--f-num); color:var(--muted); letter-spacing:.05em}
.news-tag{display:inline-block; margin-right:10px; padding:4px 7px; border-radius:2px; font:600 11.5px/1 var(--f-body); letter-spacing:.1em;
  color:var(--gold-hi); border:1px solid var(--gold-dim); background:color-mix(in oklab,var(--gold) 12%,transparent)}
.news-body h3{margin:0 0 6px; font:700 20px/1.5 var(--f-song); letter-spacing:.06em; color:var(--gold-hi)}
.news-body p{margin:0; font-size:14px; line-height:1.85; color:var(--muted)}
.news-more{display:inline-block; margin-top:10px; font-size:13.5px; color:var(--gold)}
@media (max-width:640px){ .news-lead{grid-template-columns:1fr} .news-art{min-height:130px} }

.foot{padding:32px 0 50px; color:var(--muted); font-size:12.5px; line-height:1.9}
.foot .tag{margin:0 0 10px; font:600 15px/1.8 var(--f-song); letter-spacing:.08em; color:var(--gold-hi)}

@media (max-width:640px){
  .hero-in{padding:8vh 0 7vh}
  .sec{padding:44px 0}
  .btn{padding:12px 20px; font-size:14.5px}
}
@media (prefers-reduced-motion: no-preference){
  .fade{opacity:0; transform:translateY(8px); animation:up .6s cubic-bezier(.2,.7,.3,1) forwards}
  .fade:nth-child(1){animation-delay:.05s} .fade:nth-child(2){animation-delay:.18s}
  .fade:nth-child(3){animation-delay:.32s} .fade:nth-child(4){animation-delay:.44s}
  .fade:nth-child(5){animation-delay:.54s}
  @keyframes up{to{opacity:1; transform:none}}
}
/* ---- 0918 动效与手机适配 ---- */
html{scroll-behavior:smooth}
[id]{scroll-margin-top:64px}
.top{transition:box-shadow .3s}
.top.scrolled{box-shadow:0 6px 24px rgba(0,0,0,.32)}
.top nav a{position:relative; transition:color .2s, background-color .2s}
.top nav a::after{content:""; position:absolute; left:10px; right:10px; bottom:3px; height:1px; background:var(--gold);
  transform:scaleX(0); transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.top nav a.on{color:var(--gold-hi)}
.top nav a.on::after{transform:scaleX(1)}
.themebtn{transition:border-color .2s, color .2s}
.btn,.card,.door,.news-lead,.back,.steps li{transition:transform .3s cubic-bezier(.2,.7,.3,1), border-color .25s, background-color .25s, box-shadow .3s}
.btn,.back{position:relative; overflow:hidden}
.btn::before,.back::before{content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(239,201,116,.26),transparent); transform:skewX(-20deg)}
@media (hover:hover){
  .btn:hover,.back:hover{transform:translateY(-2px)}
  .btn:hover::before,.back:hover::before{left:130%; transition:left .7s ease}
  .card:hover,.door:hover,.steps li:hover{transform:translateY(-3px); border-color:var(--gold-dim); box-shadow:0 12px 28px rgba(0,0,0,.25)}
  .news-lead:hover{transform:translateY(-3px); box-shadow:0 14px 34px rgba(0,0,0,.3)}
}
.btn:active,.door:active,.news-lead:active,.back:active{transform:scale(.98)}
@media (prefers-reduced-motion: no-preference){
  .js .rv:not(.in){opacity:0}
  .js .rv.in{animation:rvUp .7s cubic-bezier(.2,.7,.3,1) var(--d,0s) backwards}
  @keyframes rvUp{from{opacity:0; transform:translateY(20px)}}
  .lb{animation:lbIn .25s ease}
  .lb img{animation:lbZoom .35s cubic-bezier(.2,.7,.3,1)}
  @keyframes lbIn{from{opacity:0}}
  @keyframes lbZoom{from{opacity:0; transform:scale(.94)}}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  [id]{scroll-margin-top:100px}
  .top-in{flex-wrap:wrap; gap:6px 10px; padding:9px 16px 0}
  .themebtn{margin-left:auto; padding:7px 12px}
  .top nav{order:3; flex:1 0 100%; margin:0 -16px; padding:0 10px 4px; flex-wrap:nowrap; overflow-x:auto;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent); mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .top nav::-webkit-scrollbar{display:none}
  .top nav a{white-space:nowrap; padding:9px 11px; font-size:14px}
  .sec .lede{margin-bottom:20px}
  .card{padding:16px}
}

@media (prefers-reduced-motion: no-preference){
  .hero-bg{will-change:transform; animation:kb 26s ease-in-out infinite alternate; transform-origin:70% 40%}
  @keyframes kb{to{transform:scale(1.08) translate(-1.5%,-1%)}}
  @keyframes glow{to{box-shadow:0 0 64px 18px rgba(239,201,116,.42)}}
  @keyframes sway{from{transform:rotate(-7deg)} to{transform:rotate(7deg)}}
}
@media (max-width:640px){
  .hero-in{padding:7vh 16px 6vh}
  .hero h1{letter-spacing:.1em}
  .eyebrow{margin-bottom:16px; letter-spacing:.18em}
  .acts{gap:10px; margin-top:24px}
  .acts .btn{flex:1 1 100%; justify-content:center; padding:14px 18px}
  .meta{gap:6px 14px; font-size:12.5px}
  .cards,.doors{grid-template-columns:1fr; gap:10px}
  .door{padding:16px}
  .card .ico,.door .ico{margin-bottom:8px}
  .shots{gap:6px}
  .shot figcaption{font-size:12px; padding:16px 10px 8px}
  .shots-note{display:none}
  .door h3{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px}
  .copy{padding:7px 12px}
  .lb{padding:0}
  .news-body{padding:16px}
  .news-body h3{font-size:18px}
}