/* ============================================
   18183传奇发布站 - 传奇私服发布网 样式
   ============================================ */

/* ---------- Reset & Base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root{
  --gold:#e8b54a;
  --gold2:#ffd76a;
  --red:#b01f1f;
  --red2:#e03333;
  --dark:#1a0e08;
  --darker:#0f0704;
  --gray:#8a8a8a;
  --line:#3a2a1c;
}
html{ scroll-behavior:smooth; }
body{
  font-family:"Microsoft YaHei","PingFang SC","WenQuanYi Micro Hei",sans-serif;
  background:#0d0604 url("../images/bg.png") repeat;
  color:#e8dcc4;
  line-height:1.7;
  font-size:14px;
}
a{ color:#e8b54a; text-decoration:none; transition:.2s; }
a:hover{ color:#ffd76a; }
img{ max-width:100%; height:auto; border:0; }
ul,ol{ list-style:none; }
.container{ width:1180px; max-width:100%; margin:0 auto; padding:0 15px; }

/* ---------- Top Bar ---------- */
.topbar{
  background:linear-gradient(180deg,#1c0f08,#0f0704);
  border-bottom:1px solid var(--line);
  font-size:12px; color:#9a8a70; padding:6px 0;
}
.topbar .container{ display:flex; justify-content:space-between; align-items:center; }
.topbar a{ color:#c9a96a; }

/* ---------- Header / Logo ---------- */
.header{
  background:linear-gradient(180deg,#2a160c,#170a05);
  border-bottom:3px solid var(--red);
  padding:18px 0;
}
.header .container{ display:flex; align-items:center; justify-content:space-between; }
.logo{ display:flex; align-items:center; gap:14px; }
.logo h1{ font-size:30px; color:var(--gold2); text-shadow:0 2px 6px #000; letter-spacing:2px; }
.logo h1 a{ color:var(--gold2); }
.logo .en{ font-size:12px; color:#9a7a4a; letter-spacing:1px; }
.header-r{ text-align:right; }
.header-r .hotline{ color:#ffd76a; font-size:16px; font-weight:bold; }

/* ---------- Navigation ---------- */
.navwrap{ background:linear-gradient(180deg,#3a1d10,#241009); border-bottom:1px solid #000; }
.nav{ display:flex; }
.nav a{
  display:block; padding:13px 22px; color:#f0e0c0; font-size:15px;
  border-right:1px solid #4a2a18; position:relative;
}
.nav a:hover,.nav a.active{
  background:linear-gradient(180deg,#c82323,#8f1515); color:#fff;
}
.nav a.active::after{
  content:""; position:absolute; left:50%; bottom:-1px; transform:translateX(-50%);
  border:6px solid transparent; border-bottom-color:var(--gold);
}

/* ---------- Hero Banner ---------- */
.banner{
  position:relative; height:340px; overflow:hidden;
  background:linear-gradient(135deg,#2a1208,#1a0a04);
  display:flex; align-items:center; justify-content:center;
}
.banner::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 50%,rgba(232,181,74,.25),transparent 50%),
    radial-gradient(circle at 80% 50%,rgba(176,31,31,.3),transparent 50%);
}
.banner-inner{ position:relative; text-align:center; }
.banner-inner h2{
  font-size:46px; color:var(--gold2); text-shadow:0 4px 12px #000;
  letter-spacing:4px; margin-bottom:14px;
}
.banner-inner p{ color:#e0cfa0; font-size:17px; margin-bottom:20px; }
.banner-btns a{
  display:inline-block; margin:0 8px; padding:11px 30px; border-radius:4px;
  font-size:15px; font-weight:bold;
}
.btn-play{ background:linear-gradient(180deg,#e8b54a,#b8841f); color:#3a1d05; }
.btn-play:hover{ background:var(--gold2); color:#000; }
.btn-list{ background:linear-gradient(180deg,#c82323,#8f1515); color:#fff; }
.btn-list:hover{ background:var(--red2); color:#fff; }

/* ---------- Layout ---------- */
.main{ padding:26px 0 50px; }
.section-title{
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:2px solid var(--red); padding-bottom:8px; margin-bottom:18px;
}
.section-title h3{
  font-size:20px; color:var(--gold2); display:flex; align-items:center; gap:10px;
}
.section-title h3::before{
  content:""; display:inline-block; width:5px; height:20px;
  background:var(--gold); border-radius:2px;
}
.section-title a.more{ color:#9a7a4a; font-size:13px; font-weight:normal; }

/* Server list table */
.servers{ width:100%; border-collapse:collapse; background:#150a05; }
.servers th{
  background:linear-gradient(180deg,#4a2410,#2e160a); color:var(--gold2);
  padding:11px 10px; text-align:left; font-size:14px; border:1px solid #3a2a1c;
}
.servers td{ padding:11px 10px; border:1px solid #2e2018; color:#e0d2b8; }
.servers tr:nth-child(even){ background:#1a0e07; }
.servers tr:hover{ background:#24140b; }
.tag{
  display:inline-block; padding:2px 8px; border-radius:3px; font-size:12px;
  background:#2a4a18; color:#b6e88a; margin-right:4px;
}
.tag.hot{ background:#7a1a1a; color:#ffb0b0; }
.btn-enter{
  display:inline-block; padding:5px 16px; background:linear-gradient(180deg,#e8b54a,#b8841f);
  color:#3a1d05; border-radius:3px; font-weight:bold; font-size:13px;
}
.btn-enter:hover{ background:var(--gold2); color:#000; }

/* News list */
.news-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.news-item{
  display:flex; gap:12px; padding:10px; background:#150a05;
  border:1px solid #2a1c12; border-radius:4px; transition:.2s;
}
.news-item:hover{ border-color:var(--gold); }
.news-item .thumb{
  width:130px; height:86px; flex:0 0 130px; border-radius:3px;
  background:linear-gradient(135deg,#3a1d10,#241009);
  display:flex; align-items:center; justify-content:center; color:#7a5a30; font-size:12px;
}
.news-item .info{ flex:1; min-width:0; }
.news-item .info h4{
  font-size:15px; color:#f0e0c0; margin-bottom:6px; line-height:1.5;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.news-item .info h4 a{ color:#f0e0c0; }
.news-item .info h4 a:hover{ color:var(--gold2); }
.news-item .meta{ font-size:12px; color:#7a6a52; }

.list-line li{
  padding:11px 4px; border-bottom:1px dashed #2e2018;
  display:flex; justify-content:space-between; gap:12px;
}
.list-line li a{ color:#e0d2b8; flex:1; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.list-line li a:hover{ color:var(--gold2); }
.list-line li .date{ color:#7a6a52; font-size:12px; flex:0 0 auto; }

/* two col layout */
.row2{ display:grid; grid-template-columns:2fr 1fr; gap:24px; }
.row2-full{ display:grid; grid-template-columns:1fr; gap:24px; }

/* Sidebar box */
.box{ background:#150a05; border:1px solid #2a1c12; border-radius:4px; margin-bottom:22px; overflow:hidden; }
.box .box-hd{
  background:linear-gradient(180deg,#3a1d10,#241009); padding:11px 14px;
  font-size:16px; color:var(--gold2); border-left:4px solid var(--red);
}
.box .box-bd{ padding:14px; }

.rank li{ display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-bottom:1px dashed #2e2018; }
.rank .num{
  width:22px; height:22px; flex:0 0 22px; border-radius:3px; background:#3a2418;
  color:#c9a96a; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:bold;
}
.rank .num.top{ background:var(--red); color:#fff; }
.rank a{ color:#e0d2b8; }
.rank a:hover{ color:var(--gold2); }

.tags a{
  display:inline-block; padding:5px 12px; margin:0 6px 8px 0;
  background:#24140b; border:1px solid #3a2a1c; border-radius:3px; color:#c9a96a; font-size:13px;
}
.tags a:hover{ background:var(--red); color:#fff; border-color:var(--red); }

/* Article content */
.crumb{
  font-size:13px; color:#9a8a70; margin-bottom:16px; padding:10px 14px;
  background:#150a05; border:1px solid #2a1c12; border-radius:4px;
}
.crumb a{ color:#c9a96a; }
.crumb span{ color:var(--gold2); }
.article{
  background:#150a05; border:1px solid #2a1c12; border-radius:4px; padding:30px 34px;
}
.article h1{ font-size:26px; color:var(--gold2); text-align:center; line-height:1.5; margin-bottom:14px; }
.article .art-meta{ text-align:center; color:#7a6a52; font-size:13px; padding-bottom:16px; border-bottom:1px dashed #3a2a1c; margin-bottom:24px; }
.article .art-meta span{ margin:0 8px; }
.article p{ margin-bottom:16px; text-indent:2em; color:#e0d2b8; font-size:15px; line-height:1.9; }
.article h2{ font-size:20px; color:var(--gold2); margin:28px 0 14px; padding-left:12px; border-left:4px solid var(--red); }
.article h3{ font-size:17px; color:#ffd76a; margin:20px 0 10px; }
.article ul,.article ol{ margin:0 0 16px 2em; }
.article ul li{ list-style:disc; margin-bottom:8px; color:#e0d2b8; }
.article ol li{ list-style:decimal; margin-bottom:8px; color:#e0d2b8; }
.art-end{ text-align:center; color:#7a6a52; padding-top:20px; border-top:1px dashed #3a2a1c; margin-top:30px; }

/* Pagination */
.pages{ text-align:center; margin-top:26px; }
.pages a{
  display:inline-block; padding:7px 14px; margin:0 3px; background:#24140b;
  border:1px solid #3a2a1c; color:#c9a96a; border-radius:3px;
}
.pages a:hover,.pages a.cur{ background:var(--red); color:#fff; border-color:var(--red); }

/* Footer */
.footer{
  background:linear-gradient(180deg,#1c0f08,#0f0704);
  border-top:3px solid var(--red); padding:30px 0 20px; color:#8a7a60; font-size:13px;
}
.footer .container{ text-align:center; }
.footer .links{ margin-bottom:14px; }
.footer .links a{ color:#b0a080; margin:0 10px; }
.footer .links a:hover{ color:var(--gold2); }
.footer p{ margin-bottom:6px; line-height:1.9; }

/* ---------- Responsive ---------- */
@media (max-width:768px){
  .container{ width:100%; }
  .header .container{ flex-direction:column; gap:12px; }
  .banner{ height:220px; }
  .banner-inner h2{ font-size:28px; }
  .nav{ flex-wrap:wrap; }
  .nav a{ padding:10px 14px; font-size:14px; }
  .news-grid,.row2{ grid-template-columns:1fr; }
  .article{ padding:18px 14px; }
  .servers{ font-size:12px; }
  .servers th,.servers td{ padding:8px 5px; }
}
@media print{ .topbar,.header,.navwrap,.footer,.banner{ display:none; } }