/* ============ 1.76 赤月终极 · 极品+3 宣传站 ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  background: #0d0a08 url("../img/bg-texture.png") repeat;
  color: #d8c9a3;
  line-height: 1.6;
}
a { color: #f5c842; text-decoration: none; }
a:hover { color: #ff5544; }
img { border: 0; max-width: 100%; }

/* ---------- 顶部通栏 ---------- */
.topbar {
  background: linear-gradient(180deg, #1a0505 0%, #0d0a08 100%);
  border-bottom: 1px solid #3a1515;
  font-size: 13px;
  color: #9a8a6a;
}
.topbar-inner {
  width: 1200px; margin: 0 auto; padding: 6px 0;
  display: flex; justify-content: space-between;
}
.topbar b { color: #f5c842; }

/* ---------- 头部 LOGO + 登录入口 ---------- */
.header {
  width: 1200px; margin: 0 auto; padding: 18px 0;
  display: flex; align-items: center; justify-content: space-between;
}
.logo {
  font-size: 38px; font-weight: 900; letter-spacing: 4px;
  background: linear-gradient(180deg, #fff2b0 0%, #f5c842 45%, #b8860b 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 18px rgba(245,200,66,.25);
}
.logo small {
  display: block; font-size: 13px; letter-spacing: 6px; color: #c8102e;
  -webkit-text-fill-color: #c8102e; font-weight: normal; margin-top: 2px;
}
.header-right { text-align: right; font-size: 13px; color: #9a8a6a; }
.header-right .btn-login {
  display: inline-block; margin-top: 6px; padding: 8px 26px;
  background: linear-gradient(180deg, #e63946, #8b0000);
  color: #fff; font-weight: bold; border-radius: 3px;
  border: 1px solid #ff8a80; cursor: pointer;
}
.header-right .btn-login:hover { background: linear-gradient(180deg, #ff5566, #b00000); }

/* ---------- 导航 ---------- */
.nav {
  background: linear-gradient(180deg, #2a0808 0%, #180404 100%);
  border-top: 1px solid #5a1a1a; border-bottom: 2px solid #f5c842;
}
.nav-inner { width: 1200px; margin: 0 auto; display: flex; }
.nav a {
  flex: 1; text-align: center; padding: 14px 0; font-size: 16px; font-weight: bold;
  color: #f0e0b8; letter-spacing: 3px; border-right: 1px dashed #3a1515;
}
.nav a:last-child { border-right: 0; }
.nav a:hover, .nav a.active {
  background: linear-gradient(180deg, #c8102e, #7a0000); color: #fff;
}

/* ---------- Banner ---------- */
.banner {
  width: 1200px; height: 320px; margin: 18px auto;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(200,16,46,.55), transparent 60%),
    radial-gradient(ellipse at 75% 60%, rgba(245,200,66,.35), transparent 55%),
    linear-gradient(135deg, #1a0505 0%, #2b0a0a 50%, #0d0a08 100%);
  border: 1px solid #5a1a1a; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.banner::before {
  content: "⚔ 赤月恶魔 ⚔"; position: absolute; right: -30px; bottom: -40px;
  font-size: 160px; color: rgba(200,16,46,.12); font-weight: 900;
}
.banner h1 {
  font-size: 56px; color: #f5c842; letter-spacing: 8px;
  text-shadow: 0 0 20px rgba(245,200,66,.5), 0 4px 0 #5a0000;
}
.banner p { font-size: 18px; color: #ffd9d0; margin-top: 10px; letter-spacing: 4px; }
.banner .tag {
  margin-top: 18px; padding: 6px 18px; border: 1px solid #f5c842;
  color: #f5c842; font-size: 14px; border-radius: 20px;
}

/* ---------- 滚动公告 ---------- */
.notice {
  width: 1200px; margin: 0 auto 18px; padding: 10px 16px;
  background: #1a1208; border: 1px solid #3a2a10; font-size: 14px;
  display: flex; align-items: center;
}
.notice .label {
  color: #fff; background: #c8102e; padding: 2px 10px; border-radius: 2px;
  margin-right: 12px; font-weight: bold;
}
.notice .scroll { flex: 1; overflow: hidden; height: 22px; }
.notice .scroll div { white-space: nowrap; animation: scroll 22s linear infinite; }
@keyframes scroll {
  0% { transform: translateX(100%); } 100% { transform: translateX(-100%); }
}

/* ---------- 主体布局 ---------- */
.container { width: 1200px; margin: 0 auto 30px; }
.row { display: flex; gap: 18px; margin-bottom: 18px; }
.panel {
  background: #14100c; border: 1px solid #3a2a10; flex: 1;
}
.panel-title {
  background: linear-gradient(90deg, #5a0a0a 0%, #2a0808 100%);
  padding: 10px 16px; font-size: 16px; font-weight: bold; color: #f5c842;
  border-bottom: 1px solid #5a1a1a; display: flex; justify-content: space-between; align-items: center;
}
.panel-title a { font-size: 12px; color: #9a8a6a; font-weight: normal; }
.panel-body { padding: 16px; }

/* 开服列表 */
.server-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.server-table th, .server-table td {
  padding: 10px 8px; text-align: center; border-bottom: 1px dashed #2a2010;
}
.server-table th { color: #f5c842; background: #1c150c; }
.server-table td.status-open { color: #5dff7a; font-weight: bold; }
.server-table td.status-wait { color: #ffb84d; }
.btn-play {
  display: inline-block; padding: 4px 14px; background: linear-gradient(180deg,#f5c842,#b8860b);
  color: #2a1500; font-weight: bold; border-radius: 2px;
}

/* 特色卡片 */
.features { display: flex; flex-wrap: wrap; gap: 14px; }
.feature-card {
  width: calc(33.33% - 10px); background: #1c150c; border: 1px solid #3a2a10;
  padding: 18px; text-align: center;
}
.feature-card .icon { font-size: 36px; }
.feature-card h3 { color: #f5c842; margin: 8px 0; font-size: 16px; }
.feature-card p { font-size: 13px; color: #b8a67a; }

/* 新闻列表 */
.news-list { list-style: none; }
.news-list li {
  padding: 9px 4px; border-bottom: 1px dashed #2a2010; font-size: 14px;
  display: flex; justify-content: space-between;
}
.news-list li:hover { background: #1c150c; }
.news-list .date { color: #7a6a4a; font-size: 12px; }

/* 职业 */
.classes { display: flex; gap: 14px; }
.class-card {
  flex: 1; text-align: center; padding: 22px 12px; background: #1c150c;
  border: 1px solid #3a2a10;
}
.class-card h3 { font-size: 22px; letter-spacing: 4px; margin-bottom: 8px; }
.class-card.warrior h3 { color: #ff5544; }
.class-card.mage h3 { color: #66aaff; }
.class-card.taoist h3 { color: #5dff7a; }
.class-card p { font-size: 13px; color: #b8a67a; }

/* 下载页 */
.dl-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px; border-bottom: 1px dashed #2a2010;
}
.dl-item:last-child { border-bottom: 0; }
.dl-info h4 { color: #f5c842; font-size: 16px; }
.dl-info p { font-size: 13px; color: #9a8a6a; margin-top: 4px; }
.btn-dl {
  padding: 10px 26px; background: linear-gradient(180deg,#5d9cff,#1a4ea0);
  color: #fff; font-weight: bold; border-radius: 3px;
}

/* 登录页 */
.login-wrap {
  width: 420px; margin: 40px auto; background: #14100c;
  border: 1px solid #5a1a1a; padding: 30px;
}
.login-wrap h2 { text-align: center; color: #f5c842; margin-bottom: 20px; letter-spacing: 4px; }
.login-wrap label { display: block; margin: 12px 0 4px; font-size: 13px; color: #9a8a6a; }
.login-wrap input {
  width: 100%; padding: 10px; background: #0a0806; border: 1px solid #3a2a10;
  color: #f0e0b8; font-size: 14px;
}
.login-wrap input:focus { outline: none; border-color: #f5c842; }
.btn-submit {
  width: 100%; margin-top: 20px; padding: 12px; font-size: 16px; font-weight: bold;
  background: linear-gradient(180deg,#e63946,#8b0000); color: #fff; border: 0; cursor: pointer;
  letter-spacing: 6px;
}
.btn-submit:hover { background: linear-gradient(180deg,#ff5566,#b00000); }
.login-tip { text-align: center; margin-top: 14px; font-size: 12px; color: #7a6a4a; }

/* QQ群弹窗 */
.qq-mask {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.75);
  z-index: 9999; justify-content: center; align-items: center;
}
.qq-mask.show { display: flex; }
.qq-box {
  width: 380px; background: #1c150c; border: 2px solid #f5c842;
  padding: 26px; text-align: center; position: relative;
  box-shadow: 0 0 40px rgba(245,200,66,.3);
}
.qq-box .close {
  position: absolute; right: 10px; top: 6px; font-size: 22px; cursor: pointer;
  color: #9a8a6a;
}
.qq-box .close:hover { color: #ff5544; }
.qq-box h3 { color: #f5c842; font-size: 20px; margin-bottom: 6px; letter-spacing: 2px; }
.qq-box .sub { font-size: 13px; color: #9a8a6a; margin-bottom: 16px; }
.qq-qrcode {
  width: 180px; height: 180px; margin: 0 auto 14px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  color: #333; font-size: 12px; border: 4px solid #2a1500;
}
.qq-group-no {
  font-size: 22px; font-weight: bold; color: #fff; background: #12b7f5;
  display: inline-block; padding: 8px 22px; border-radius: 4px; margin: 6px 0 14px;
  letter-spacing: 2px;
}
.qq-box .btn-add {
  display: block; padding: 10px; background: linear-gradient(180deg,#12b7f5,#0a7ab0);
  color: #fff; font-weight: bold; border-radius: 3px;
}
.qq-remind { font-size: 12px; color: #7a6a4a; margin-top: 10px; }

/* 页脚 */
.footer {
  background: #0a0806; border-top: 2px solid #3a1515; padding: 24px 0;
  text-align: center; font-size: 12px; color: #6a5a3a; line-height: 1.9;
}
.footer .qq { color: #12b7f5; font-weight: bold; }

/* 内容页通用 */
.page-title {
  font-size: 24px; color: #f5c842; padding: 16px 0; border-bottom: 1px solid #3a2a10;
  margin-bottom: 16px; letter-spacing: 3px;
}
.content p { margin-bottom: 12px; font-size: 14px; color: #c8b88a; }
.content h3 { color: #ff8a66; margin: 18px 0 8px; }

/* ============ 高端单页风格（参考 B-0028） ============ */
.topline { background:#0a0806; border-bottom:1px solid #3a2a10; }
.topline-inner { width:1200px; margin:0 auto; padding:10px 0; display:flex; justify-content:space-between; align-items:center; }
.topline-left { display:flex; align-items:center; gap:14px; }
.mini-logo { font-weight:900; font-size:18px; letter-spacing:2px; background:linear-gradient(180deg,#fff2b0,#f5c842); -webkit-background-clip:text; background-clip:text; color:transparent; }
.topline .slogan { color:#c8102e; font-size:13px; border-left:1px solid #3a2a10; padding-left:14px; }
.topline-right { display:flex; gap:26px; font-size:14px; }
.topline-right a { color:#d8c9a3; }
.topline-right a:hover { color:#f5c842; }

.hero { position:relative; height:640px; overflow:hidden;
  background:radial-gradient(ellipse at 50% 30%, rgba(255,210,100,.55), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(120,30,10,.9), transparent 70%),
    linear-gradient(180deg,#3a1a08 0%,#8a4a10 35%,#d4942a 55%,#5a2a08 80%,#1a0a05 100%);
  display:flex; align-items:center; justify-content:center; }
.hero-goldglow { position:absolute; inset:0; background:radial-gradient(circle at 50% 45%, rgba(255,240,180,.35), transparent 45%); }
.hero-pillar { position:absolute; top:0; bottom:0; width:110px;
  background:linear-gradient(90deg, transparent, rgba(180,120,40,.55) 30%, rgba(255,210,120,.7) 50%, rgba(180,120,40,.55) 70%, transparent); }
.hero-pillar.left { left:8%; } .hero-pillar.right { right:8%; }
.hero-inner { position:relative; text-align:center; z-index:2; }
.hero-logo { font-size:96px; font-weight:900; letter-spacing:12px; line-height:1;
  background:linear-gradient(180deg,#fff8d0 0%,#ffd700 40%,#b8860b 75%,#fff2b0 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 40px rgba(255,200,60,.5); position:relative; display:inline-block; }
.hero-logo .badge { position:absolute; top:8px; right:-46px; font-size:16px; letter-spacing:2px;
  background:#c8102e; color:#fff; padding:4px 8px; border-radius:3px; -webkit-text-fill-color:#fff; writing-mode:vertical-lr; }
.hero-sub { margin-top:22px; font-size:24px; font-weight:bold; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.6); letter-spacing:4px; }
.hero-tag { margin:14px auto 0; display:table; padding:6px 26px;
  background:linear-gradient(180deg, rgba(180,30,30,.9), rgba(120,10,10,.9));
  color:#ffd980; font-size:16px; letter-spacing:4px; border-top:1px solid #ffcf6b; border-bottom:1px solid #ffcf6b; }
.hero-btns { margin-top:40px; display:flex; gap:18px; justify-content:center; align-items:center; }
.hbtn { display:inline-block; padding:14px 30px; font-weight:bold; letter-spacing:2px; color:#fff; border-radius:3px; text-align:center; }
.hbtn.red { background:linear-gradient(180deg,#d43a3a,#8a0f0f); border:1px solid #ff8a70; }
.hbtn.gold { background:linear-gradient(180deg,#ffe27a,#d49a1e 50%,#8a5a08); color:#3a1c00; border:1px solid #fff2b0; box-shadow:0 0 24px rgba(255,210,90,.6); }
.hbtn.gold.big { padding:18px 46px; font-size:22px; }
.hbtn small { display:block; font-size:10px; letter-spacing:3px; opacity:.8; }
.coin { position:absolute; font-size:22px; color:#ffd24d; opacity:.8; text-shadow:0 0 10px #ffb800; }
.coin.c1 { top:30%; left:22%; } .coin.c2 { top:55%; right:20%; } .coin.c3 { bottom:18%; left:30%; font-size:16px; }

.section { width:1100px; margin:0 auto; padding:60px 0 20px; }
.sec-title { display:flex; align-items:center; justify-content:center; gap:24px; margin-bottom:36px; }
.sec-title .cn { font-size:34px; font-weight:900; letter-spacing:10px; color:#f5c842; text-shadow:0 0 16px rgba(245,200,66,.3); }
.sec-title .en { text-align:center; font-size:12px; letter-spacing:6px; color:#c8102e; margin-top:4px; }
.sec-title .deco { flex:1; height:1px; background:linear-gradient(90deg, transparent,#8a5a1a, transparent); position:relative; max-width:220px; }
.sec-title .deco::before { content:""; position:absolute; left:50%; top:-3px; width:7px; height:7px; background:#f5c842; transform:translateX(-50%) rotate(45deg); }

.scroll-panel { position:relative; background:linear-gradient(180deg,#2a1a0c,#1a1008); border:1px solid #5a3a14; padding:40px 60px; }
.scroll-rod { position:absolute; top:10px; bottom:10px; width:18px;
  background:linear-gradient(90deg,#6a4a1a,#c89a4a,#6a4a1a); border-radius:9px; }
.scroll-rod.left { left:-9px; } .scroll-rod.right { right:-9px; }
.version-list { list-style:none; }
.version-list li { padding:10px 14px; margin-bottom:8px; font-size:15px; color:#e8d8a8; background:rgba(0,0,0,.25); border-left:3px solid #c8102e; }
.version-list li span { color:#ff6b5a; font-weight:bold; margin-right:8px; }

.equip-row { display:flex; align-items:center; justify-content:center; gap:30px; }
.arrow { font-size:40px; color:#8a6a2a; cursor:pointer; padding:10px; }
.equip-card { width:220px; }
.equip-frame { background:#000; border:2px solid #8a6a2a; padding:50px 0; text-align:center; color:#fff; font-size:26px; letter-spacing:4px; }
.equip-frame small { display:block; margin-top:6px; font-size:12px; letter-spacing:6px; color:#f5c842; }
.equip-frame.big { padding:90px 0; font-size:40px; }
.equip-big { display:flex; justify-content:center; }
.equip-big .equip-frame { width:800px; }
.dots { text-align:center; margin-top:18px; }
.dots i { display:inline-block; width:10px; height:10px; background:#3a2a10; border-radius:50%; margin:0 4px; }
.dots i.on { background:#f5c842; }

.side-tool { position:fixed; right:0; top:40%; z-index:900; background:#14100c; border:1px solid #5a1a1a; border-right:0; padding:10px; width:110px; text-align:center; }
.st-title { font-size:13px; color:#f5c842; margin-bottom:6px; }
.st-mini { font-size:14px; font-weight:bold; color:#fff; padding:8px 0; background:linear-gradient(180deg,#c8102e,#7a0000); margin-bottom:8px; }
.st-btn { display:block; padding:8px 0; margin-bottom:6px; font-size:13px; color:#fff; border-radius:2px; }
.st-btn.red { background:linear-gradient(180deg,#d43a3a,#8a0f0f); }
.st-btn.blue { background:linear-gradient(180deg,#12b7f5,#0a6a9a); }

.footer.dark { background:#000; padding:26px 0; }
.foot-inner { width:1100px; margin:0 auto; display:flex; gap:30px; align-items:center; }
.foot-logo { font-size:30px; font-weight:900; letter-spacing:4px; background:linear-gradient(180deg,#fff2b0,#b8860b); -webkit-background-clip:text; background-clip:text; color:transparent; }
.foot-text { font-size:12px; color:#6a5a3a; line-height:1.9; }
.foot-text .qq { color:#12b7f5; }
.hero-logo-img { display:block; width:560px; max-width:80vw; margin:0 auto; filter:drop-shadow(0 0 24px rgba(255,140,20,.55)); }
.hero-logo-wrap { position:relative; display:inline-block; padding:36px 70px; border-radius:50%; }
.hero-logo-wrap::before {
  content:""; position:absolute; inset:-20px -40px; z-index:-1;
  background: radial-gradient(ellipse at center, rgba(15,3,0,.85) 0%, rgba(40,10,0,.55) 45%, transparent 72%);
}
.hero-logo-wrap .hero-logo-img {
  display:block; width:560px; max-width:80vw; margin:0 auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.85)) drop-shadow(0 0 28px rgba(255,150,20,.75));
}
.hero-divider { display:flex; align-items:center; justify-content:center; gap:14px; width:540px; max-width:82%; margin:6px auto 0; }
.hero-divider i { flex:1; height:2px; background:linear-gradient(90deg, transparent, #ff7a3c 60%, #ffd24d); box-shadow:0 0 8px rgba(255,90,30,.8); }
.hero-divider i:last-child { background:linear-gradient(90deg, #ffd24d, #ff7a3c 40%, transparent); }
.hero-divider span { color:#ff4a2a; font-size:16px; text-shadow:0 0 12px #ff3000; }
.hero-logo-wrap::before { inset:-36px -70px !important;
  background: radial-gradient(ellipse at center, rgba(5,1,0,.96) 0%, rgba(25,6,0,.78) 52%, transparent 76%) !important; }
.hero { background:
  linear-gradient(rgba(10,3,0,.18), rgba(10,3,0,.45)),
  url("../img/bg-hero.jpg") center center / cover no-repeat !important; }
.hero-pillar, .hero-goldglow { display:none !important; }
.hero-logo-wrap::before {
  inset:-40px -60px !important;
  background: radial-gradient(ellipse at center,
    rgba(50,18,0,.55) 0%,
    rgba(50,18,0,.28) 45%,
    transparent 72%) !important;
  filter: blur(6px);
}
.mini-logo { height:26px; width:auto; vertical-align:middle; }
.foot-logo { height:46px; width:auto; }
.st-mini { width:90px; height:auto; margin:0 auto 8px; display:block; }
.topline .slogan {
  color:#ffd24d !important; font-weight:bold; letter-spacing:2px;
  text-shadow:0 0 8px rgba(255,80,30,.8), 0 1px 2px #000;
}
.sec-title { justify-content:center !important; }
.sec-title > div { text-align:center; min-width:220px; }
.sec-title .cn { padding-left:10px; }
.sec-title .deco { flex:0 1 200px !important; max-width:200px !important; }
.equip-img { width:220px; display:block; border:2px solid #8a6a2a; box-shadow:0 0 18px rgba(0,0,0,.6); }
.equip-card { width:220px !important; height:280px !important; overflow:hidden; }
.equip-img { width:100%; height:100%; object-fit:cover; display:block; border:2px solid #8a6a2a; box-shadow:0 0 18px rgba(0,0,0,.6); }
.equip-card { width:242px !important; height:308px !important; overflow:hidden; }