/* ==========================================================================
   8SF传奇私服发布网 - 基础样式 base.css
   主题：天蓝色 · 大气隆重 · 全端自适应
   ========================================================================== */

/* ---------- 设计变量 ---------- */
:root{
  --c1:#0ea5e9;            /* 主色 天蓝 */
  --c2:#38bdf8;            /* 亮蓝 */
  --c3:#7dd3fc;            /* 浅蓝 */
  --c4:#e0f2fe;            /* 极浅蓝 */
  --navy:#072f4d;          /* 深海军蓝 */
  --navy2:#0b3d63;
  --deep:#0369a1;
  --gold:#fbbf24;          /* 金色点缀 大气 */
  --gold2:#fde68a;
  --ink:#12314c;           /* 标题色 */
  --text:#3d5a73;          /* 正文色 */
  --muted:#7d97ad;         /* 弱化色 */
  --line:#d9ecf8;          /* 分割线 */
  --bg:#eef7fd;
  --card:#ffffff;
  --grad-main:linear-gradient(135deg,#072f4d 0%,#0369a1 55%,#38bdf8 100%);
  --grad-sky:linear-gradient(120deg,#0ea5e9 0%,#38bdf8 100%);
  --grad-gold:linear-gradient(120deg,#f59e0b 0%,#fbbf24 100%);
  --shadow:0 8px 24px rgba(11,96,158,.12);
  --shadow-lg:0 18px 44px rgba(11,96,158,.20);
  --radius:14px;
  --radius-sm:10px;
  --font:'PingFang SC','Microsoft YaHei','Hiragino Sans GB','Noto Sans SC',system-ui,-apple-system,sans-serif;
}

/* ---------- Reset ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:var(--font);
  color:var(--text);
  font-size:15px;
  line-height:1.75;
  background:url('../images/bj.png') repeat top left, linear-gradient(180deg,#f2fafe 0%,var(--bg) 100%);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-x:clip; /* 防止移动端横向溢出，clip 不产生滚动容器，不影响 sticky */
}
img{max-width:100%;display:block;border:0}
a{color:var(--deep);text-decoration:none;transition:color .25s}
a:hover{color:var(--c1)}
ul,ol{list-style:none}
input,button,select,textarea{font-family:inherit;font-size:inherit;outline:none}
button{cursor:pointer;border:none;background:none}
h1,h2,h3,h4,h5{color:var(--ink);font-weight:800;line-height:1.35}
::selection{background:var(--c2);color:#fff}

/* ---------- 布局容器 ---------- */
.wrap{max-width:1240px;margin:0 auto;padding:0 18px}

/* ==========================================================================
   顶部公告条
   ========================================================================== */
.topbar{
  background:var(--grad-main);
  color:#dff2ff;
  font-size:13px;
  overflow:hidden;
  position:relative;
  z-index:60;
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:34px;gap:16px}
.topbar .tb-left{flex:1;min-width:0;overflow:hidden}
.tb-scroll{white-space:nowrap;overflow:hidden;position:relative}
.tb-scroll .tb-track{display:inline-block;animation:tbMove 30s linear infinite}
.tb-scroll a{color:#bce7ff;margin-right:38px}
.tb-scroll a:hover{color:#fff}
.tb-scroll .tb-tag{display:inline-block;background:linear-gradient(120deg,#f59e0b,#fbbf24);color:#5c3a00;font-size:11px;padding:0 8px;border-radius:9px;margin-right:8px;font-weight:700}
@keyframes tbMove{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.topbar .tb-right{display:flex;align-items:center;gap:14px;color:#a8d8f5;white-space:nowrap}
.topbar .tb-right .tb-time{font-variant-numeric:tabular-nums}

/* ==========================================================================
   头部导航
   ========================================================================== */
.header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(14,165,233,.18);
  box-shadow:0 6px 24px rgba(11,96,158,.08);
}
.header .wrap{display:flex;align-items:center;height:74px;gap:22px}
.logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
.logo img{width:auto;height:52px}
.logo .logo-txt{line-height:1.15}
.logo .logo-txt b{display:block;font-size:24px;letter-spacing:2px;
  background:linear-gradient(120deg,#0b3d63,#0ea5e9 60%,#38bdf8);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#0b3d63}
.logo .logo-txt span{font-size:11px;color:var(--muted);letter-spacing:3px;font-weight:600}
.main-nav{flex:1;display:flex;align-items:center;gap:4px}
.main-nav a{position:relative;display:inline-flex;align-items:center;gap:5px;padding:8px 13px;border-radius:10px;
  color:var(--ink);font-size:15px;font-weight:600;white-space:nowrap}
.main-nav a:hover{color:var(--c1);background:var(--c4)}
.main-nav a.on{color:#fff;background:var(--grad-sky);box-shadow:0 6px 16px rgba(14,165,233,.35)}
.main-nav a .hot-dot{width:7px;height:7px;border-radius:50%;background:#f43f5e;box-shadow:0 0 0 3px rgba(244,63,94,.18)}
.has-sub{position:relative}
.has-sub .sub{
  position:absolute;top:calc(100% + 8px);left:0;min-width:168px;background:#fff;border-radius:12px;
  box-shadow:var(--shadow-lg);padding:8px;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:all .25s;border:1px solid var(--line);z-index:120}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translateY(0)}
.has-sub .sub a{display:flex;justify-content:space-between;padding:9px 12px;border-radius:8px;font-size:14px;color:var(--text);font-weight:500}
.has-sub .sub a:hover{background:var(--c4);color:var(--deep);transform:translateX(4px)}
.has-sub .sub a em{font-style:normal;font-size:11px;color:var(--c1)}
.nav-search{display:flex;align-items:center;background:var(--c4);border:1px solid var(--line);border-radius:22px;padding:3px 4px 3px 14px;width:208px;flex-shrink:0}
.nav-search input{flex:1;border:none;background:none;color:var(--ink);font-size:13px;min-width:0}
.nav-search button{width:34px;height:34px;border-radius:50%;background:var(--grad-sky);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nav-search button:hover{box-shadow:0 4px 12px rgba(14,165,233,.5)}
.nav-toggle{display:none;width:42px;height:42px;border-radius:10px;background:var(--grad-sky);color:#fff;align-items:center;justify-content:center;flex-shrink:0}
.nav-toggle svg{width:22px;height:22px}

/* ==========================================================================
   横幅区（地址由 js/banner.js 自动配置）
   ========================================================================== */
.banner-box{padding:16px 0 4px}
.banner-frame{
  position:relative;border-radius:16px;overflow:hidden;max-width:1200px;margin:0 auto;
  box-shadow:0 14px 40px rgba(11,96,158,.28);border:1px solid rgba(125,211,252,.6)}
.banner-frame a{display:block}
.banner-frame img{width:100%;height:auto;min-height:250px;object-fit:cover}
.banner-shine{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);animation:shine 5.5s ease-in-out infinite}
@keyframes shine{0%,55%{transform:translateX(-120%)}90%,100%{transform:translateX(120%)}}

/* 广告位（仅首页） */
.ad-box{max-width:1200px;margin:12px auto 0;padding:10px;background:#fff;border:1px dashed var(--c2);border-radius:12px;min-height:60px;text-align:center}

/* ==========================================================================
   通用区块
   ========================================================================== */
.sec{padding:34px 0}
.sec-tight{padding:20px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:22px}
.sec-head .sh-l{display:flex;align-items:center;gap:12px}
.sec-head .sh-ico{width:44px;height:44px;border-radius:12px;background:var(--grad-sky);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(14,165,233,.35);flex-shrink:0}
.sec-head .sh-ico svg{width:24px;height:24px}
.sec-head h2{font-size:24px;letter-spacing:1px;position:relative}
.sec-head h2::after{content:'';position:absolute;left:0;bottom:-7px;width:46px;height:4px;border-radius:4px;background:var(--grad-gold)}
.sec-head .sh-sub{font-size:12px;color:var(--muted);margin-top:10px;letter-spacing:2px}
.sec-head .sh-more{font-size:13px;color:var(--muted);display:inline-flex;align-items:center;gap:4px}
.sec-head .sh-more:hover{color:var(--c1)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.panel-pad{padding:22px}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 20px;border-radius:10px;font-weight:700;font-size:14px;transition:all .25s;white-space:nowrap}
.btn-sky{background:var(--grad-sky);color:#fff;box-shadow:0 6px 16px rgba(14,165,233,.35)}
.btn-sky:hover{color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(14,165,233,.5)}
.btn-gold{background:var(--grad-gold);color:#5c3a00;box-shadow:0 6px 16px rgba(245,158,11,.35)}
.btn-gold:hover{color:#5c3a00;transform:translateY(-2px);box-shadow:0 10px 26px rgba(245,158,11,.5)}
.btn-ghost{background:#fff;color:var(--deep);border:1px solid var(--c2)}
.btn-ghost:hover{color:#fff;background:var(--grad-sky);border-color:transparent}
.btn-sm{padding:6px 13px;font-size:13px;border-radius:8px}

/* ---------- 徽标 ---------- */
.badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:10px;font-size:12px;font-weight:700}
.badge-hot{background:linear-gradient(120deg,#f43f5e,#fb7185);color:#fff}
.badge-new{background:var(--grad-sky);color:#fff}
.badge-gold{background:var(--grad-gold);color:#5c3a00}
.badge-line{background:var(--c4);color:var(--deep)}

/* ---------- 标签 ---------- */
.tag{display:inline-block;padding:3px 12px;border-radius:14px;background:var(--c4);color:var(--deep);font-size:12px;margin:0 8px 8px 0}
.tag:hover{background:var(--grad-sky);color:#fff}

/* ---------- 面包屑 ---------- */
.crumb{padding:16px 0 0;font-size:13px;color:var(--muted)}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--c1)}
.crumb i{font-style:normal;margin:0 8px;color:#bcd6e8}
.crumb b{color:var(--deep);font-weight:600}

/* ---------- 分页 ---------- */
.pager{display:flex;align-items:center;justify-content:center;gap:8px;margin:24px 0 8px;flex-wrap:wrap}
.pager a,.pager span{min-width:36px;height:36px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;background:#fff;border:1px solid var(--line);color:var(--text);font-size:14px;transition:all .2s}
.pager a:hover{border-color:var(--c1);color:var(--c1)}
.pager .cur{background:var(--grad-sky);color:#fff;border-color:transparent;font-weight:700;box-shadow:0 4px 12px rgba(14,165,233,.35)}
.pager .dot{background:none;border:none;color:var(--muted)}
.pager .disabled{opacity:.45;pointer-events:none}

/* ---------- 游戏图片自动适配 ---------- */
.img-fit{position:relative;overflow:hidden;background:var(--c4)}
.img-fit img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;position:absolute;inset:0}
.img-fit:hover img{transform:scale(1.08)}
.img-fit .if-tag{position:absolute;left:10px;top:10px;z-index:2}

/* ---------- 返回顶部 ---------- */
#goTop{position:fixed;right:22px;bottom:30px;width:46px;height:46px;border-radius:50%;background:var(--grad-sky);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(14,165,233,.45);opacity:0;visibility:hidden;transform:translateY(14px);transition:all .3s;z-index:200}
#goTop.show{opacity:1;visibility:visible;transform:translateY(0)}
#goTop svg{width:20px;height:20px}

/* ---------- 入场动画 ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- 页脚 ---------- */
.footer{background:var(--grad-main);color:#c6e6fb;margin-top:44px;position:relative;overflow:hidden}
.footer::before{content:'';position:absolute;inset:0;background:radial-gradient(600px 260px at 12% 0%,rgba(56,189,248,.25),transparent 70%)}
.footer .wrap{position:relative;padding:38px 18px 22px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:30px;margin-bottom:26px}
.foot-col h4{color:#fff;font-size:16px;margin-bottom:14px;letter-spacing:1px}
.foot-col h4::after{content:'';display:block;width:34px;height:3px;border-radius:3px;background:var(--grad-gold);margin-top:8px}
.foot-col a{display:block;color:#a9d4f2;font-size:13px;padding:4px 0}
.foot-col a:hover{color:#fff;transform:translateX(4px)}
.foot-brand{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.foot-brand img{height:44px}
.foot-brand b{font-size:22px;color:#fff;letter-spacing:2px}
.foot-desc{font-size:13px;line-height:2;color:#9cc8e8}
.foot-contact li{font-size:13px;padding:5px 0;color:#a9d4f2}
.foot-contact li b{color:var(--gold2);font-weight:600}
.foot-contact li a{display:inline;padding:0;color:#ffd77a}
.foot-btm{border-top:1px solid rgba(255,255,255,.14);padding-top:16px;text-align:center;font-size:12.5px;color:#8dbedf;line-height:2}
.foot-btm a{color:#8dbedf}
.foot-btm a:hover{color:#fff}

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width:1080px){
  .nav-search{display:none}
  .main-nav a{padding:8px 10px;font-size:14px}
  .logo img{height:46px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .header .wrap{height:62px}
  .nav-toggle{display:flex}
  .logo img{height:42px}
  .logo .logo-txt b{font-size:19px}
  .logo .logo-txt span{display:none}
  .main-nav{
    position:fixed;top:62px;left:0;right:0;bottom:0;background:rgba(7,47,77,.97);
    flex-direction:column;align-items:stretch;padding:18px 16px 40px;gap:4px;
    transform:translateX(105%);transition:transform .35s ease;overflow-y:auto;z-index:99}
  .main-nav.open{transform:translateX(0)}
  .main-nav a{color:#dff2ff;padding:13px 14px;font-size:15px;border-radius:10px}
  .main-nav a:hover{background:rgba(56,189,248,.15);color:#fff}
  .main-nav a.on{background:var(--grad-sky)}
  .has-sub .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:rgba(255,255,255,.06);margin:2px 0 2px 10px;border:none;display:none}
  .has-sub.open .sub{display:block}
  .has-sub .sub a{color:#bcdff5;padding:10px 12px}
  .has-sub .sub a:hover{background:rgba(56,189,248,.14);color:#fff}
  .topbar .tb-right span:last-child{display:none}
  .banner-box{padding:10px 0 0}
  .banner-frame img{min-height:130px}
  .sec-head h2{font-size:20px}
  .foot-grid{grid-template-columns:1fr;gap:22px}
  .sec{padding:24px 0}
}
@media (max-width:520px){
  body{font-size:14px}
  .wrap{padding:0 12px}
  .banner-frame{border-radius:10px}
  .sec-head h2{font-size:18px}
  .sec-head .sh-ico{width:38px;height:38px}
}