:root{
  --red:#c01820;
  --red-deep:#7a0d12;
  --gold:#e6c26a;
  --gold-soft:#f0e0b8;
  --ink:#0a0608;
  --panel:rgba(20,8,10,.82);
  --line:rgba(192,24,32,.45);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Microsoft YaHei","微软雅黑",Tahoma,Arial,sans-serif;
  background:#0a0608 url("../images/body.jpg") repeat-y center top;
  color:#eee;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
ul{list-style:none}

/* ---------- 顶部黑色导航栏（与大漢沉默网站一致） ---------- */
.nav{
  width:1920px;height:70px;margin:0 auto;
  position:relative;                 /* 随页面滚动，不盖住视频 */
  background:#000;border-bottom:1px solid #333;
}
.nav-inner{
  height:70px;display:flex;align-items:center;justify-content:space-between;
  padding:0 25% 0 20%;               /* 前留20%放Logo，后留25%空白 */
}
.nav-left{display:flex;align-items:center;gap:14px;flex:1}
.nav-logo{
  width:140px;height:70px;object-fit:contain;
  pointer-events:none;flex-shrink:0;
}
.nav-divider{color:#666;font-size:20px;font-weight:300}
.nav-slogan{
  color:#c0c0c0;font-size:20px;letter-spacing:2px;white-space:nowrap;
  text-shadow:0 0 8px rgba(255,255,255,.25);
}
.nav-right{display:flex;align-items:center;gap:22px;flex-shrink:0}
.nav-btn{
  color:#e8d398;font-size:17px;letter-spacing:1px;padding:8px 4px;
  position:relative;transition:color .2s;white-space:nowrap;
}
.nav-btn::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,#f5d67b,#c9a24b);
  transform:scaleX(0);transform-origin:center;transition:transform .2s;
}
.nav-btn:hover{color:#fff;text-shadow:0 0 10px #f5d67b}
.nav-btn:hover::after{transform:scaleX(1)}
/* 背景音乐开关按钮（导航栏最后一个按钮后） */
.music-toggle{
  color:#e8d398;font-size:20px;font-style:normal;cursor:pointer;user-select:none;
  padding:6px 12px;border:1px solid #6b5a24;border-radius:20px;
  background:linear-gradient(180deg,#1c1710,#0e0b07);
  box-shadow:inset 0 0 6px rgba(245,214,123,.15);
  transition:color .2s,border-color .2s,box-shadow .2s;white-space:nowrap;
}
.music-toggle:hover{color:#fff;border-color:#f5d67b;box-shadow:0 0 10px rgba(245,214,123,.35)}
.music-toggle.on{color:#ffd15c;border-color:#f5d67b;box-shadow:0 0 12px rgba(245,214,123,.5)}

/* ---------- 首屏（固定1920×1080居中） ---------- */
.hero{
  position:relative;width:1920px;height:1080px;margin-left:-960px;left:50%;
  overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.hero video,.hero .poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
}
.hero-inner{position:relative;z-index:10;text-align:center;padding:0 20px;margin-top:30px}
.hero-title{
  font-size:clamp(40px,8vw,96px);font-weight:900;letter-spacing:12px;
  color:var(--gold);
  text-shadow:0 0 24px rgba(192,24,32,.9),0 4px 0 #000,0 0 60px rgba(230,194,106,.4);
}
.hero-sub{
  margin-top:14px;font-size:clamp(14px,1.6vw,20px);letter-spacing:6px;color:#d8c9a8;
}

/* 下载按钮（用 an.png 红金框） */
.hero-btns{
  margin-top:648px;display:flex;gap:34px;justify-content:center;flex-wrap:wrap;
}
.btn{
  width:330px;max-width:80vw;height:120px;position:relative;display:block;
  background:url("../images/an.png") no-repeat center/contain;
}
.btn .txt{
  position:absolute;top:52%;left:0;right:0;transform:translateY(-50%);
  text-align:center;color:#fff;
}
.btn .txt b{display:block;font-size:26px;letter-spacing:4px;text-shadow:0 2px 4px #000}
.btn .txt span{display:block;margin-top:4px;font-size:12px;letter-spacing:2px;opacity:.75}
.btn{transition:transform .25s,filter .25s}
.btn:hover{transform:translateY(-6px);filter:brightness(1.15)}

/* ---------- 游戏介绍整图 + 公告叠加 ---------- */
.mid{
  position:relative;container-type:inline-size;width:1920px;left:50%;
  /* ★可调点① 918ps.png 上移量(px)：数字越大整段(含装备区/底部)越往上，越小越往下 */
  margin-left:-960px;margin-top:-1080px;z-index:5;
}
.mid>img{width:100%;height:auto;aspect-ratio:1920/2308}
.news{
  position:absolute;left:40.6%;top:64.7%;width:36.6%;height:15.7%;
  display:flex;flex-direction:column;justify-content:space-evenly;
  padding:0 1.2%;
}
.news li{
  color:var(--gold-soft);font-size:1.05cqw;line-height:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 1px 2px #000;letter-spacing:1px;
}
.news li::before{content:"◆ ";color:var(--red)}

/* ---------- 装备展示 ---------- */
.items{
  max-width:1322px;margin:0 auto;
  /* ★可调点② "装备展示"标题牌 与 装备卡片 的间距：负=卡片往上靠近标题，正=往下拉开 */
  margin-top:-100px;
  padding:20px 0 60px;
  display:flex;flex-direction:column;gap:18px;
}
/* 各排左右外边缘统一对齐到容器两边 */
.row{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
/* ★可调点⑥ 里面图片宽度(px)=390/620/1300；卡片外宽=图片+22(边框内边距)，已换算好 */
.r3 .card{flex:0 0 412px;width:412px}
.r2 .card{flex:0 0 642px;width:642px}
.r1 .card{flex:0 0 100%;width:100%}
.card{
  background:linear-gradient(180deg,#2a0a0c,#140506);
  border:1px solid rgba(192,24,32,.6);
  box-shadow:0 0 0 1px #000,0 10px 28px rgba(0,0,0,.6),inset 0 0 26px rgba(0,0,0,.75);
  padding:10px;display:flex;flex-direction:column;
  transition:box-shadow .3s;
}
.card:hover{box-shadow:0 0 0 1px #000,0 10px 28px rgba(0,0,0,.6),0 0 22px rgba(192,24,32,.5),inset 0 0 26px rgba(0,0,0,.75)}
.card .pic{overflow:hidden;background:#000}
.card .pic img{width:100%;height:auto;display:block}
.card .cap{
  padding:10px 0 4px;text-align:center;color:var(--gold);
  font-size:15px;letter-spacing:3px;
  background:linear-gradient(90deg,transparent,rgba(192,24,32,.22),transparent);
}

/* ---------- 底部页脚（与大漢沉默网站一致，参考图1） ---------- */
.footer{
  width:1920px;margin:0 auto;padding:40px 0 30px;
  background:linear-gradient(180deg,#050608,#0a0d12 60%,#111318);
  border-top:1px solid #2a2d33;
}
.footer-inner{
  width:1500px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:70px;
}
.footer-logo{
  width:240px;height:120px;object-fit:contain;flex-shrink:0;
}
.footer-text{display:flex;flex-direction:column;gap:10px}
.footer-line-1{color:#cfd3da;font-size:15px;letter-spacing:1px;line-height:1.5}
.footer-line-2{color:#9aa0ab;font-size:14px;letter-spacing:1px}
.footer-line-3{color:#9aa0ab;font-size:14px;letter-spacing:1px}
.footer-link{color:#fff;font-weight:bold;text-decoration:underline;transition:color .2s}
.footer-link:hover{color:#ffd15c}

/* ---------- 右侧悬浮工具条 ---------- */
.side{
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:900;
  display:flex;flex-direction:column;
}
.side a{
  writing-mode:vertical-rl;padding:16px 8px;font-size:14px;letter-spacing:3px;
  background:rgba(20,6,8,.9);border:1px solid var(--line);border-right:0;
  border-radius:6px 0 0 6px;color:var(--gold-soft);transition:background .25s;
}
.side a+a{margin-top:6px}
.side a:hover{background:var(--red-deep);color:#fff}

/* 背景音乐开关 */
.music-btn{
  position:fixed;left:18px;bottom:18px;z-index:900;
  padding:9px 16px;font-size:13px;letter-spacing:2px;cursor:pointer;
  color:var(--gold-soft);background:rgba(20,6,8,.9);
  border:1px solid var(--line);border-radius:20px;
}
.music-btn:hover{background:var(--red-deep);color:#fff}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .hero-btns{gap:18px}
  .btn{width:280px;height:102px}
  .btn .txt b{font-size:22px}
  .row.r3{grid-template-columns:repeat(2,1fr)}
  .side{display:none}
  /* 小屏下公告字仍随图缩放，保证不错位 */
  .news li{font-size:1.4cqw}
}
@media (max-width:560px){
  .row.r3,.row.r2{grid-template-columns:1fr}
  .hero{min-height:520px}
}