/* ============================================================
   武林世界 · 官方站 — 浅色明亮 · 卡通武侠主题
   单一样式表：静态页与 Flask 公开页共用
   ============================================================ */

:root{
  --cream:    #fdf7ea;   /* 页面底色 暖奶油 */
  --cream2:   #f7eed9;   /* 间隔区块底 */
  --paper:    #ffffff;   /* 卡片 */
  --ink:      #5a4633;   /* 正文 暖褐 */
  --ink-strong:#33271a;  /* 标题 */
  --muted:    #a4906f;   /* 柔和说明文字 */
  --red:      #e0584c;   /* 主色 朱红 */
  --red-d:    #c8453a;
  --jade:     #2fa98b;   /* 次色 竹青 */
  --jade-d:   #259177;
  --gold:     #eaa83a;   /* 高亮金 */
  --line:     #efe0c6;   /* 描边 */
  --line2:    #e6d4b4;
  --wood:     #3a2a1c;   /* 页脚 */
  --shadow:   0 10px 28px rgba(150,110,60,.16);
  --shadow-sm:0 4px 14px rgba(150,110,60,.14);
  --radius:   16px;
  --radius-sm:11px;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:#ffffff;
  color:var(--ink);
  font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB","Source Han Sans CN",system-ui,sans-serif;
  font-size:15px; line-height:1.7; min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--jade-d); text-decoration:none; transition:color .15s; }
a:hover{ color:var(--red); }
img{ max-width:100%; display:block; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 22px; }
.muted{ color:var(--muted); }

/* ===================== 顶部导航 ===================== */
.site-header{
  position:sticky; top:0; z-index:200;
  background:rgba(255,253,247,.92);
  backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:2px solid var(--line);
  box-shadow:0 3px 14px rgba(150,110,60,.08);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:70px; gap:14px; }
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand img{ height:42px; width:auto; filter:drop-shadow(0 2px 3px rgba(160,80,30,.25)); }
.brand .brand-fallback{ font-size:22px; font-weight:800; color:var(--red); letter-spacing:2px; }
.main-nav{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.nav-link{
  color:var(--ink-strong); font-size:15.5px; font-weight:600;
  padding:8px 16px; border-radius:999px; line-height:1;
  transition:all .15s; white-space:nowrap;
}
.nav-link:hover{ background:#fceede; color:var(--red); }
.nav-link.active{ background:var(--red); color:#fff; box-shadow:0 4px 12px rgba(224,88,76,.35); }
.nav-toggle{ display:none; font-size:24px; background:none; border:none; color:var(--red); cursor:pointer; padding:4px 8px; }

/* ===================== 按钮 ===================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; font-size:15px; font-weight:700; line-height:1;
  padding:13px 26px; border-radius:999px; border:none; cursor:pointer;
  transition:transform .12s, box-shadow .15s, background .15s; text-align:center;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn-primary{ background:linear-gradient(180deg,#ec6a5e,#e0584c); color:#fff; box-shadow:0 8px 20px rgba(224,88,76,.35); }
.btn-primary:hover{ background:linear-gradient(180deg,#ef7468,#d44e43); color:#fff; box-shadow:0 12px 26px rgba(224,88,76,.45); }
.btn-jade{ background:linear-gradient(180deg,#37b89a,#2fa98b); color:#fff; box-shadow:0 8px 20px rgba(47,169,139,.32); }
.btn-jade:hover{ color:#fff; box-shadow:0 12px 26px rgba(47,169,139,.42); }
.btn-ghost{ background:#fff; color:var(--red); border:2px solid #f3c9c3; box-shadow:var(--shadow-sm); }
.btn-ghost:hover{ color:var(--red-d); border-color:var(--red); }
.btn-gold{ background:linear-gradient(180deg,#f1b94e,#eaa83a); color:#5a3a10; box-shadow:0 8px 20px rgba(234,168,58,.35); }
.btn-lg{ padding:16px 36px; font-size:17px; }
.btn-block{ display:flex; width:100%; }

/* ===================== 主视觉 Hero ===================== */
.hero{ padding:34px 0 6px; }
.hero-card{
  position:relative; border-radius:24px; overflow:hidden;
  box-shadow:var(--shadow); border:3px solid #fff;
  outline:2px solid var(--line2);
}
.hero-card img.hero-img{ width:100%; height:auto; display:block; }
.hero-scrim{
  position:absolute; left:0; right:0; bottom:0; height:46%;
  background:linear-gradient(180deg, rgba(40,26,12,0) 0%, rgba(40,26,12,.55) 70%, rgba(40,26,12,.72) 100%);
  display:flex; align-items:flex-end;
}
.hero-meta{ display:flex; gap:10px; padding:0 26px 22px; flex-wrap:wrap; width:100%; }
.hero-chip{
  background:rgba(255,255,255,.92); color:var(--ink-strong);
  border-radius:999px; padding:7px 16px; font-size:13.5px; font-weight:700;
  box-shadow:0 3px 10px rgba(0,0,0,.18);
}
.hero-chip b{ color:var(--red); }
.hero-chip .dot{ color:#27ae60; }
.hero-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; padding:26px 0 8px; }

/* ===================== 通用区块 ===================== */
.section{ padding:54px 0; }
.section.alt{ background:#faf8f4; border-top:1px solid #f0eee9; border-bottom:1px solid #f0eee9; }
.section-head{ text-align:center; margin-bottom:34px; }
.section-title{
  font-size:30px; font-weight:800; color:var(--ink-strong); letter-spacing:2px;
  display:inline-block; position:relative; padding-bottom:12px;
}
.section-title::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:0;
  width:54px; height:4px; border-radius:4px; background:linear-gradient(90deg,var(--red),var(--gold));
}
.section-sub{ color:var(--muted); font-size:15px; margin-top:14px; }

/* ===================== 特色卡片 ===================== */
.features-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.feature-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 18px; text-align:center; box-shadow:var(--shadow-sm);
  transition:transform .15s, box-shadow .15s;
}
.feature-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.feature-card .ficon{
  width:78px; height:78px; margin:0 auto 14px; border-radius:50%;
  background:linear-gradient(180deg,#fff3df,#fce6cf); display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 3px #fff, 0 6px 14px rgba(180,120,60,.18);
}
.feature-card .ficon img{ width:46px; height:46px; }
.feature-card h3{ color:var(--ink-strong); font-size:18px; margin-bottom:8px; }
.feature-card p{ color:var(--muted); font-size:13.5px; line-height:1.6; }

/* ===================== 首页 公告/攻略 双栏 ===================== */
.home-cols{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.panel{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:2px solid var(--line); }
.panel-head h2{ font-size:20px; color:var(--ink-strong); display:flex; align-items:center; gap:9px; }
.panel-head h2::before{ content:""; width:6px; height:20px; border-radius:3px; background:var(--red); }
.panel-head .more{ font-size:13px; color:var(--muted); font-weight:600; }
.panel-head .more:hover{ color:var(--red); }
.list{ list-style:none; }
.list li a{ display:flex; gap:12px; align-items:baseline; padding:13px 22px; border-bottom:1px dashed var(--line); color:var(--ink); }
.list li:last-child a{ border-bottom:none; }
.list li a:hover{ background:#fdf3e4; }
.list .li-title{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.list .li-date{ color:#b6a487; font-size:12.5px; flex-shrink:0; }
.list .li-badge{ flex-shrink:0; font-size:11px; font-weight:700; color:#fff; background:var(--jade); border-radius:6px; padding:1px 8px; }

/* ===================== 下载横幅 ===================== */
.download-banner{ background:linear-gradient(120deg,#e0584c,#eaa83a); color:#fff; border-radius:22px; padding:38px 40px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; box-shadow:var(--shadow); }
.download-banner h2{ font-size:26px; letter-spacing:2px; margin-bottom:6px; }
.download-banner p{ opacity:.95; font-size:15px; }

/* ===================== 卡片（下载/通用） ===================== */
.card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:26px 28px; }
.card h2,.card h3{ color:var(--ink-strong); }
.card code{ color:var(--red-d); background:#fbeee0; padding:2px 7px; border-radius:5px; font-size:13px; }
.page-title{ text-align:center; font-size:30px; font-weight:800; color:var(--ink-strong); letter-spacing:2px; margin-bottom:8px; }
.page-sub{ text-align:center; color:var(--muted); margin-bottom:34px; }

/* ===================== 表单（账号管理/注册） ===================== */
.form-page{ max-width:480px; margin:48px auto 70px; padding:0 22px; }
.form-card{ background:var(--paper); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); padding:34px 32px; }
.form-card h2{ text-align:center; font-size:24px; color:var(--ink-strong); letter-spacing:2px; }
.form-sub{ text-align:center; color:var(--muted); font-size:14px; margin:10px 0 22px; }
.form-group{ margin-bottom:18px; }
.form-group label{ display:block; font-size:13.5px; font-weight:600; color:var(--ink-strong); margin-bottom:7px; }
.form-group input{
  width:100%; padding:13px 15px; font-size:15px; font-family:inherit;
  border:2px solid var(--line2); border-radius:11px; background:#fffdf8; color:var(--ink-strong);
  transition:border-color .15s, box-shadow .15s;
}
.form-group input:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 4px rgba(224,88,76,.13); }
.form-foot{ text-align:center; margin-top:18px; color:var(--muted); font-size:14px; }
.form-note{ margin-top:20px; padding-top:16px; border-top:1px dashed var(--line); color:var(--muted); font-size:13px; line-height:1.9; }

/* tabs（注册/登录切换） */
.tabs{ display:flex; gap:8px; background:#f6ead6; border-radius:999px; padding:5px; margin-bottom:24px; }
.tab{ flex:1; text-align:center; padding:10px; border-radius:999px; font-weight:700; color:var(--muted); cursor:pointer; transition:all .15s; }
.tab.active{ background:#fff; color:var(--red); box-shadow:var(--shadow-sm); }

/* alerts */
.alert{ border-radius:11px; padding:12px 15px; font-size:14px; margin-bottom:16px; border:1px solid transparent; }
.alert-error{ background:#fdecea; color:#c0392b; border-color:#f5c6c0; }
.alert-success{ background:#e8f8ef; color:#1e8a5a; border-color:#bce8d0; }
.alert-info{ background:#fff5e2; color:#a9772a; border-color:#f3dcae; }

/* ===================== 公告/攻略 列表（CMS） ===================== */
.article-list{ list-style:none; }
.article-item{ display:block; padding:18px 4px; border-bottom:1px solid var(--line); color:inherit; transition:background .12s; border-radius:10px; }
.article-item:hover{ background:#fdf3e4; }
.article-row{ display:flex; align-items:flex-start; gap:14px; }
.article-title{ color:var(--ink-strong); font-size:17px; font-weight:700; margin-bottom:5px; }
.article-item:hover .article-title{ color:var(--red); }
.article-summary{ color:var(--muted); font-size:14px; }
.article-meta{ color:#b6a487; font-size:12.5px; margin-top:5px; }

/* 分类标签胶囊 */
.cat-tag{ flex-shrink:0; display:inline-block; padding:4px 12px; border-radius:999px; font-size:12.5px; font-weight:700; min-width:72px; text-align:center; color:#fff; }
.cat-新手入门{ background:#3aa87a; }
.cat-掉落设置{ background:#e0884c; }
.cat-精炼攻略{ background:#d8584c; }
.cat-装备获取{ background:#7a6bd0; }
.cat-活动玩法{ background:#e0a83a; }

/* 分类筛选 chips */
.cat-filter{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:28px; }
.cat-chip{ padding:9px 20px; border-radius:999px; border:2px solid var(--line2); background:#fff; color:var(--muted); font-size:14px; font-weight:700; cursor:pointer; transition:all .15s; }
.cat-chip:hover{ color:var(--red); border-color:#f0bdb6; }
.cat-chip.active{ background:var(--red); color:#fff; border-color:var(--red); box-shadow:0 5px 14px rgba(224,88,76,.3); }

/* 文章正文 */
.article-wrap{ max-width:820px; margin:40px auto 70px; }
.article-head{ text-align:center; margin-bottom:8px; }
.article-h1{ font-size:28px; color:var(--ink-strong); font-weight:800; }
.article-info{ text-align:center; color:var(--muted); font-size:13px; margin:12px 0 26px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.article-body{ color:var(--ink); font-size:16px; line-height:1.95; }
.article-body h1,.article-body h2,.article-body h3{ color:var(--ink-strong); margin:22px 0 12px; }
.article-body h2{ font-size:21px; border-left:5px solid var(--red); padding-left:12px; }
.article-body p{ margin:13px 0; }
.article-body a{ color:var(--red); text-decoration:underline; }
.article-body img{ max-width:100%; height:auto; border-radius:12px; margin:14px 0; border:1px solid var(--line); }
.article-body blockquote{ border-left:4px solid var(--gold); padding:8px 16px; margin:14px 0; background:#fff7e6; border-radius:0 10px 10px 0; color:#8a6a2a; }
.article-body code{ background:#fbeee0; color:var(--red-d); padding:2px 6px; border-radius:5px; }
.article-body ul,.article-body ol{ padding-left:24px; margin:12px 0; }
.back-link{ display:inline-block; margin-bottom:14px; color:var(--muted); font-size:14px; }
.back-link:hover{ color:var(--red); }

.empty-hint{ text-align:center; color:var(--muted); padding:60px 0; }

/* ===================== 页脚 ===================== */
.site-footer{ background:var(--wood); color:#d9c6ad; margin-top:60px; padding:42px 0 22px; }
.footer-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.site-footer h4{ color:#ffd98a; font-size:15px; margin-bottom:12px; }
.site-footer p{ font-size:13.5px; line-height:1.9; color:#cdb89a; }
.site-footer a{ color:#cdb89a; }
.site-footer a:hover{ color:#ffd98a; }
.site-footer b{ color:#ffd98a; }
.footer-copy{ text-align:center; margin-top:26px; padding-top:18px; border-top:1px solid #58432e; color:#9b8568; font-size:12.5px; }

/* ===================== QQ 群二维码弹窗 ===================== */
.qr-modal{ position:fixed; inset:0; z-index:1000; background:rgba(40,26,12,.55); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; padding:20px; }
.qr-modal.show{ display:flex; animation:qrfade .2s ease; }
@keyframes qrfade{ from{ opacity:0; } to{ opacity:1; } }
.qr-box{ background:#fff; border-radius:20px; padding:26px 26px 22px; text-align:center; max-width:340px; width:100%; box-shadow:0 20px 50px rgba(0,0,0,.35); animation:qrpop .22s ease; }
@keyframes qrpop{ from{ transform:scale(.9); opacity:.5; } to{ transform:scale(1); opacity:1; } }
.qr-box img{ width:248px; height:auto; margin:6px auto 14px; border-radius:12px; border:1px solid var(--line); }
.qr-box h3{ color:var(--ink-strong); font-size:19px; margin-bottom:4px; }
.qr-box p{ color:var(--muted); font-size:14px; margin-bottom:16px; }
.qr-box .qr-num{ color:var(--red); font-weight:800; font-size:18px; letter-spacing:1px; }
.qr-close{ margin-top:4px; }

/* ===================== 首页主视觉(图片置顶 + 导航叠加右上) ===================== */
.home-hero{ position:relative; width:100%; line-height:0; }
.home-hero-img{ width:100%; height:auto; display:block; }
.home-hero-topgrad{ position:absolute; top:0; left:0; right:0; height:130px; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(18,18,30,.42) 0%, rgba(18,18,30,0) 100%); }
.home-hero-nav{ position:absolute; top:0; right:0; z-index:3; display:flex; gap:4px; padding:18px 30px; line-height:1; }
.hnav-link{ color:#fff; font-size:15px; font-weight:600; padding:8px 15px; border-radius:999px; white-space:nowrap;
  text-shadow:0 1px 5px rgba(0,0,0,.6); transition:all .15s; }
.hnav-link:hover{ background:rgba(255,255,255,.22); color:#fff; }
.hnav-link.active{ background:var(--red); color:#fff; text-shadow:none; box-shadow:0 4px 12px rgba(224,88,76,.45); }
.home-hero-toggle{ display:none; position:absolute; top:14px; right:18px; z-index:4; font-size:24px; color:#fff;
  background:rgba(0,0,0,.35); border:none; border-radius:9px; cursor:pointer; padding:5px 11px; }
.home-hero-meta{ position:absolute; left:32px; bottom:26px; z-index:3; display:flex; gap:10px; flex-wrap:wrap; line-height:1.4; }

/* ===================== 指引攻略：左分类 + 右标题 ===================== */
.guide-board{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:4px 0; }
.guide-row{ display:flex; align-items:flex-start; gap:20px; padding:20px 26px; border-bottom:1px dashed var(--line2); }
.guide-row:last-child{ border-bottom:none; }
.guide-cat{ flex-shrink:0; width:110px; padding-top:3px; }
.guide-cat .cat-pill{ display:block; width:100%; text-align:center; padding:10px 0; border-radius:999px; color:#fff; font-weight:700; font-size:15px; }
.guide-titles{ flex:1; min-width:0; display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center; padding-top:8px; }
.guide-titles a{ color:var(--ink); font-size:15.5px; position:relative; }
.guide-titles a:hover{ color:var(--red); }
.guide-titles .g-empty{ color:var(--muted); font-size:14px; }

/* ===================== 响应式 ===================== */
@media (max-width:900px){
  .features-grid{ grid-template-columns:repeat(2,1fr); }
  .home-cols{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:18px; text-align:center; }
}
@media (max-width:760px){
  .home-hero-nav{ display:none; position:absolute; top:54px; right:14px; left:14px; flex-direction:column; gap:0;
    background:rgba(20,20,30,.92); border-radius:12px; padding:6px 0; }
  .home-hero-nav.open{ display:flex; }
  .hnav-link{ width:100%; border-radius:0; text-shadow:none; padding:12px 18px; }
  .home-hero-toggle{ display:block; }
  .home-hero-meta{ left:14px; bottom:12px; gap:6px; }
  .guide-row{ flex-direction:column; gap:10px; padding:16px 18px; }
  .guide-cat{ width:auto; } .guide-cat .cat-pill{ display:inline-block; width:auto; padding:7px 18px; }
}
@media (max-width:760px){
  .nav-toggle{ display:block; }
  .main-nav{ position:absolute; top:70px; left:0; right:0; flex-direction:column; gap:0;
    background:#fffdf7; border-bottom:2px solid var(--line); box-shadow:var(--shadow); display:none; padding:8px 0; }
  .main-nav.open{ display:flex; }
  .nav-link{ width:100%; border-radius:0; padding:14px 22px; }
  .nav-link.active{ box-shadow:none; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .download-banner{ flex-direction:column; text-align:center; }
  .section-title{ font-size:24px; }
}