/* ============================================================
   百度乐 · 传奇私服发布网 — 全站基础样式 style.css
   暗黑大气主题 / 自适应PC+手机 / SEO 语义化
   ============================================================ */
:root{
  --c1:#d4a237; --c2:#8c1f18; --c3:#f2d98a;
  --dark:#0c0910; --dark2:#171221; --panel:#1e1728; --panel2:#251c31;
  --line:#3a2f4a; --txt:#e8e0d0; --muted:#b8ad9c;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:url(/images/bj.png) no-repeat center top fixed;background-size:cover;
  color:var(--txt);font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB",sans-serif;
  font-size:15px;line-height:1.85;
}
a{color:var(--c3);text-decoration:none;transition:color .2s}
a:hover{color:#fff;text-decoration:underline}
img{max-width:100%;vertical-align:middle;border:0}
ul,ol{list-style:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 12px}

/* ---------------- 顶部导航 ---------------- */
.site-head{background:linear-gradient(180deg,rgba(22,14,20,.97),rgba(9,6,12,.94));border-bottom:3px solid var(--c1);box-shadow:0 4px 18px rgba(0,0,0,.55);position:relative;z-index:20}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0}
.logo{display:flex;align-items:center;gap:10px}
.logo img{height:52px;width:auto}
.site-name{font-size:26px;font-weight:bold;color:var(--c3);text-shadow:0 0 14px rgba(212,162,55,.55);letter-spacing:2px}
.site-name small{display:block;font-size:12px;color:var(--muted);font-weight:normal;letter-spacing:1px}
.nav{display:flex;flex-wrap:wrap;gap:3px;justify-content:flex-end}
.nav a{display:block;padding:7px 11px;border-radius:6px;color:var(--txt);font-size:14px;white-space:nowrap}
.nav a:hover,.nav a.on{background:linear-gradient(180deg,var(--c2),#5c100c);color:#fff;text-decoration:none;box-shadow:0 0 12px rgba(140,31,24,.55)}
.nav-toggle{display:none}

/* ---------------- 横幅 ---------------- */
.banner{margin:14px auto;overflow:hidden;border-radius:10px;border:2px solid rgba(212,162,55,.35);box-shadow:0 8px 28px rgba(0,0,0,.55)}
.banner img{display:block;width:100%;height:auto}

/* ---------------- 广告位 ---------------- */
.ad-box{margin:12px auto;min-height:10px}
#cq_tui{min-height:10px}

/* ---------------- 面包屑 ---------------- */
.bread{font-size:13px;color:var(--muted);padding:10px 0;border-bottom:1px dashed var(--line);margin-bottom:14px}
.bread a{color:var(--muted)}
.bread a:hover{color:var(--c3)}

/* ---------------- 布局骨架 ---------------- */
.lay .grid{display:grid;gap:16px;align-items:start}
.lay .grid.g2l{grid-template-columns:300px 1fr}
.lay .grid.g2r{grid-template-columns:1fr 300px}
.lay .grid.g3{grid-template-columns:1fr 1fr 1fr}
.lay .grid.g1{grid-template-columns:1fr}
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:14px 0}
.card-grid.c2{grid-template-columns:repeat(2,1fr)}
.card-grid.c3{grid-template-columns:repeat(3,1fr)}
.head-c{flex-direction:column;align-items:center;text-align:center}
.hero-t{text-align:center}

/* ---------------- 面板/卡片 ---------------- */
.panel{background:linear-gradient(180deg,rgba(30,23,40,.92),rgba(22,16,30,.94));border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:16px;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.panel h2,.panel h3{color:var(--c3);font-size:18px;margin-bottom:10px;padding-left:10px;border-left:4px solid var(--c1);line-height:1.4}
.panel h3{font-size:16px}
.panel h1.page-h1{font-size:26px;color:var(--c3);margin-bottom:10px;padding-left:10px;border-left:4px solid var(--c1);text-shadow:0 0 14px rgba(212,162,55,.35)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.5)}
.card .pic{position:relative;display:block;overflow:hidden}
.card .pic img{display:block;width:100%;height:150px;object-fit:cover;transition:transform .4s}
.card:hover .pic img{transform:scale(1.06)}
.card .info{padding:10px 12px}
.card .info h3{font-size:15px;margin-bottom:6px}
.card .info h3 a{color:var(--txt)}
.card .info h3 a:hover{color:var(--c3);text-decoration:none}
.card .info p{font-size:13px;color:var(--muted)}
.card .tag{position:absolute;left:8px;top:8px;background:linear-gradient(90deg,var(--c2),#5c100c);color:#fff;font-size:12px;padding:2px 8px;border-radius:4px}

/* ---------------- 列表 ---------------- */
.list li{display:flex;justify-content:space-between;gap:10px;padding:8px 2px;border-bottom:1px dashed rgba(58,47,74,.6);font-size:14px}
.list li a{color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.list li a:hover{color:var(--c3)}
.list li em{font-style:normal;color:var(--c1);font-size:13px;white-space:nowrap}
.list-num li a::before{content:attr(data-n);display:inline-block;min-width:22px;margin-right:8px;color:var(--c1);font-weight:bold}
.list-num li:nth-child(-n+3) a::before{color:#ff5a3c}

/* ---------------- 开服表格 ---------------- */
.tb-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tb{width:100%;border-collapse:collapse;font-size:14px}
table.tb th{background:linear-gradient(180deg,var(--c2),#5c100c);color:#fff;padding:9px 10px;text-align:left;white-space:nowrap}
table.tb td{padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
table.tb tr:nth-child(even) td{background:rgba(255,255,255,.02)}
table.tb a{color:var(--txt)}
table.tb a:hover{color:var(--c3)}
table.tb .hot{color:#ff5a3c;font-weight:bold}
.btn-dl{display:inline-block;background:linear-gradient(180deg,#f0c14b,#b8860b);color:#3a2400!important;font-weight:bold;padding:3px 12px;border-radius:5px;font-size:13px;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.btn-dl:hover{filter:brightness(1.12);text-decoration:none}
.btn-main{display:inline-block;background:linear-gradient(180deg,var(--c1),#9c7415);color:#231500!important;font-weight:bold;padding:10px 34px;border-radius:8px;font-size:16px;box-shadow:0 4px 14px rgba(212,162,55,.4);letter-spacing:2px}
.btn-main:hover{filter:brightness(1.1);text-decoration:none;transform:translateY(-1px)}
.btn-ghost{display:inline-block;border:1px solid var(--c1);color:var(--c1);padding:7px 18px;border-radius:6px;font-size:14px}
.btn-ghost:hover{background:var(--c1);color:#231500;text-decoration:none}

/* ---------------- 文章 ---------------- */
.article h1{font-size:26px;color:var(--c3);margin-bottom:8px;line-height:1.5;text-shadow:0 0 12px rgba(212,162,55,.3)}
.article .meta{font-size:13px;color:var(--muted);padding-bottom:10px;border-bottom:1px dashed var(--line);margin-bottom:14px}
.article .meta span{margin-right:16px}
.article img.pic-main{display:block;width:100%;max-height:420px;object-fit:cover;border-radius:10px;margin:10px 0 14px;border:1px solid var(--line)}
.article p{margin-bottom:12px;text-align:justify}
.article h2{color:var(--c3);font-size:20px;margin:18px 0 10px;padding-left:12px;border-left:4px solid var(--c1)}
.article ul.tips{margin:10px 0 14px;padding:12px 16px;background:rgba(212,162,55,.06);border:1px dashed rgba(212,162,55,.4);border-radius:8px}
.article ul.tips li{list-style:disc inside;margin-bottom:6px;font-size:14px;color:var(--txt)}
.related{margin-top:18px;padding-top:12px;border-top:1px solid var(--line)}
.related h3{color:var(--c3);font-size:16px;margin-bottom:8px}
.related ul{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px}
.related li{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------------- 服务器信息块 ---------------- */
.sv-hero{background:linear-gradient(135deg,rgba(140,31,24,.22),rgba(212,162,55,.10) 55%,rgba(10,7,12,.6));border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:16px;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.sv-hero h1{color:var(--c3);font-size:24px;margin-bottom:6px;text-shadow:0 0 14px rgba(212,162,55,.4)}
.sv-hero .sv-tag{color:var(--muted);font-size:13px;margin-bottom:12px}
.sv-info{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0}
.sv-info .it{background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:8px;padding:8px 12px}
.sv-info .it b{display:block;color:var(--c3);font-size:15px}
.sv-info .it span{font-size:12px;color:var(--muted)}
.sv-feat{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.sv-feat .ft{background:rgba(212,162,55,.07);border:1px dashed rgba(212,162,55,.35);border-radius:8px;padding:6px 10px;font-size:13px;color:var(--txt)}

/* ---------------- 页脚 ---------------- */
.site-foot{background:linear-gradient(180deg,rgba(14,10,18,.95),rgba(6,4,9,.98));border-top:3px solid var(--c1);margin-top:24px;padding:18px 0 12px;font-size:13px;color:var(--muted)}
.site-foot h4{color:var(--c3);font-size:13px;display:inline;margin-right:6px}
.foot-line{padding:4px 0;border-bottom:1px dashed rgba(58,47,74,.5)}
.foot-line a{color:var(--muted);display:inline-block;margin:0 4px}
.foot-line a:hover{color:var(--c3)}
.foot-copy{text-align:center;padding-top:10px;color:#8d8271;line-height:2}
.foot-copy a{color:var(--c1)}

/* ---------------- 返回顶部 ---------------- */
#backtop{position:fixed;right:18px;bottom:24px;width:44px;height:44px;border-radius:50%;background:linear-gradient(180deg,var(--c1),#9c7415);color:#231500;font-size:20px;line-height:44px;text-align:center;cursor:pointer;display:none;z-index:99;box-shadow:0 4px 14px rgba(0,0,0,.5)}
#backtop.show{display:block}

/* ---------------- 分类筛选 ---------------- */
.filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.filter-bar input{flex:1;min-width:200px;background:rgba(0,0,0,.4);border:1px solid var(--line);color:var(--txt);padding:8px 14px;border-radius:6px;outline:none;font-size:14px}
.filter-bar input:focus{border-color:var(--c1)}
.search-form{display:flex;gap:8px}
.search-form input{background:rgba(0,0,0,.5);border:1px solid var(--line);color:var(--txt);padding:8px 14px;border-radius:6px;outline:none;font-size:14px;width:230px}
.search-form input:focus{border-color:var(--c1)}
.search-form button{background:linear-gradient(180deg,var(--c1),#9c7415);border:0;color:#231500;font-weight:bold;padding:8px 18px;border-radius:6px;cursor:pointer}

/* ---------------- 响应式 ---------------- */
@media (max-width:1024px){
  .card-grid{grid-template-columns:repeat(3,1fr)}
  .sv-info{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .head-in{flex-direction:column;align-items:stretch}
  .site-name{font-size:22px}
  .nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  .nav a{font-size:13px;padding:6px 9px}
  .lay .grid.g2l,.lay .grid.g2r{grid-template-columns:1fr}
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .card-grid.c3{grid-template-columns:repeat(2,1fr)}
  .sv-info{grid-template-columns:repeat(2,1fr)}
  .sv-feat{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:repeat(2,1fr)}
  .related ul{grid-template-columns:1fr}
  .article h1{font-size:21px}
  .search-form input{width:150px}
}
@media (max-width:520px){
  .card-grid,.card-grid.c3{grid-template-columns:1fr}
  .sv-info,.sv-feat{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .btn-main{padding:9px 22px;font-size:14px}
}