/* 默认：白天（浅色）主题 */
:root{
  --bg:#f5f2ea;
  --bg-2:#ffffff;
  --bg-3:#ece7db;
  --line:#ddd6c6;
  --fg:#2f2c26;
  --fg-dim:#5d5950;
  --fg-mute:#8e897c;
  --body-fg:#3f3b33;
  --gold:#a98a45;
  --gold-2:#7f6222;
  --accent:#0e7c8f;
  --rare:#a98a45;
  --on-gold:#fffdf7;
  --hover:rgba(120,100,60,.06);
  --tint:rgba(169,138,69,.12);
  --tint-2:rgba(169,138,69,.20);
  --shadow:rgba(80,70,50,.18);
  --shadow-lg:rgba(80,70,50,.28);
  --sidebar-w:290px;
}
/* 夜晚（深色）主题 */
:root[data-theme="dark"]{
  --bg:#12141c;
  --bg-2:#191c27;
  --bg-3:#212536;
  --line:#2d3247;
  --fg:#e8e6df;
  --fg-dim:#a8a89e;
  --fg-mute:#6f7280;
  --body-fg:#d8d7d0;
  --gold:#d3bc8e;
  --gold-2:#e8d5a8;
  --accent:#7fd1e0;
  --rare:#c9a86a;
  --on-gold:#1a1408;
  --hover:rgba(255,255,255,.04);
  --tint:rgba(211,188,142,.10);
  --tint-2:rgba(211,188,142,.18);
  --shadow:rgba(0,0,0,.5);
  --shadow-lg:rgba(0,0,0,.6);
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:"HYWenHei","Source Han Sans SC","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  font-size:15px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
#app{display:flex;height:100vh;overflow:hidden;}

/* ---------- Sidebar ---------- */
#sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  background:var(--bg-2);border-right:1px solid var(--line);
  display:flex;flex-direction:column;overflow:hidden;
}
.brand{display:flex;align-items:center;gap:12px;padding:20px 18px 16px;border-bottom:1px solid var(--line);text-decoration:none;transition:background-color .18s;}
.brand:hover{background:var(--hover);}
.brand-mark{
  width:42px;height:42px;flex:0 0 42px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--gold-2),#8a7346);
  color:var(--on-gold);font-weight:700;font-size:20px;
  display:flex;align-items:center;justify-content:center;
}
.brand-text h1{font-size:17px;letter-spacing:.06em;color:var(--gold-2);font-weight:600;}
.brand-text p{font-size:11px;color:var(--fg-mute);letter-spacing:.18em;}
#nav{flex:1;overflow-y:auto;padding:12px 0 24px;}
.nav-group{margin-bottom:4px;}
.nav-group-title{
  display:flex;align-items:center;gap:8px;
  padding:9px 18px;font-size:13px;color:var(--fg-dim);cursor:pointer;
  letter-spacing:.05em;user-select:none;
}
.nav-group-title:hover{color:var(--gold-2);background:var(--hover);}
.nav-group-title .ico{font-size:14px;opacity:.85;}
.nav-group-title .count{margin-left:auto;font-size:11px;color:var(--fg-mute);}
.nav-group-title .arrow{transition:transform .18s;font-size:10px;color:var(--fg-mute);}
.nav-group.open .nav-group-title .arrow{transform:rotate(90deg);}
.nav-items{display:none;padding:2px 0 6px;}
.nav-group.open .nav-items{display:block;}
.nav-item{
  display:block;padding:6px 18px 6px 40px;font-size:13.5px;color:var(--fg-dim);
  cursor:pointer;border-left:2px solid transparent;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nav-item:hover{color:var(--fg);background:var(--hover);}
.nav-item.active{color:var(--gold-2);border-left-color:var(--gold);background:var(--tint);}
.side-foot{padding:12px 16px;border-top:1px solid var(--line);font-size:11px;color:var(--fg-mute);}
.audit-line{display:flex;align-items:center;gap:6px;margin:0 0 10px;padding:6px 8px;border:1px solid var(--line);border-radius:6px;color:var(--fg-dim);background:var(--hover);}
.audit-line span{display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%;background:var(--accent);color:#fff;font-size:10px;font-weight:700;}
#meta-line{margin-bottom:8px;line-height:1.6;}
.ghost-btn{
  width:100%;padding:7px;background:transparent;border:1px solid var(--line);
  color:var(--fg-dim);border-radius:6px;font-size:11.5px;cursor:pointer;font-family:inherit;
}
.ghost-btn:hover{border-color:var(--gold);color:var(--gold-2);}

/* ---------- Main ---------- */
#main{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg);}
#topbar{
  display:flex;align-items:center;gap:14px;padding:12px 26px;
  border-bottom:1px solid var(--line);background:var(--bg-2);
  position:relative;z-index:20;
}
.icon-btn{display:none;background:none;border:1px solid var(--line);color:var(--fg-dim);
  border-radius:6px;width:34px;height:34px;font-size:16px;cursor:pointer;}
.icon-btn:hover{border-color:var(--gold);color:var(--gold-2);}
.theme-btn{display:block;flex:0 0 34px;}
.search-wrap{position:relative;flex:0 0 380px;max-width:52%;}
#search{
  width:100%;padding:8px 12px;background:var(--bg-3);border:1px solid var(--line);
  border-radius:8px;color:var(--fg);font-size:13.5px;font-family:inherit;outline:none;
}
#search:focus{border-color:var(--gold);}
#search::placeholder{color:var(--fg-mute);}
.search-results{
  position:absolute;top:calc(100% + 6px);left:0;right:0;max-height:60vh;overflow-y:auto;
  background:var(--bg-3);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 12px 32px var(--shadow);padding:6px;
}
.sr-item{padding:8px 10px;border-radius:6px;cursor:pointer;}
.sr-item:hover,.sr-item.sel{background:var(--tint-2);}
.sr-item .t{font-size:13.5px;color:var(--fg);}
.sr-item .s{font-size:11.5px;color:var(--fg-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sr-item .s mark,.sr-item .t mark{background:none;color:var(--gold-2);font-weight:600;}
.sr-empty{padding:14px;color:var(--fg-mute);font-size:13px;text-align:center;}
.crumb{margin-left:auto;font-size:12px;color:var(--fg-mute);}

.content{flex:1;overflow-y:auto;padding:34px 46px 120px;}
.content-inner{max-width:920px;margin:0 auto;}

/* ---------- Typography ---------- */
.page-title{font-size:28px;color:var(--gold-2);font-weight:600;letter-spacing:.02em;line-height:1.4;}
.page-sub{color:var(--fg-mute);font-size:13.5px;margin-top:6px;}
.page-head{border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:26px;}
.home-head{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;}
.page-kicker{font-size:10px;letter-spacing:.16em;color:var(--accent);font-weight:700;margin-bottom:7px;}
.home-version{flex:0 0 auto;text-align:right;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg-2);}
.home-version span{display:block;font-size:10px;letter-spacing:.1em;color:var(--fg-mute);}
.home-version strong{display:block;margin-top:2px;color:var(--gold-2);font-size:12px;font-weight:600;}
.overview-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:25px 0 32px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.overview-strip>div{background:var(--bg-2);padding:13px 16px;min-width:0;}
.overview-strip strong{display:block;font-size:18px;line-height:1.35;color:var(--gold-2);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.overview-strip span{display:block;margin-top:2px;font-size:11px;color:var(--fg-mute);letter-spacing:.03em;}
h2.sec{font-size:20px;color:var(--gold);margin:34px 0 14px;padding-left:12px;border-left:3px solid var(--gold);font-weight:600;}
h3.sec{font-size:16.5px;color:var(--gold-2);margin:24px 0 10px;font-weight:600;}
h4.sec{font-size:14.5px;color:var(--fg);margin:18px 0 8px;font-weight:600;}
p{margin:10px 0;color:var(--body-fg);}
.content ul,.content ol{margin:10px 0 10px 22px;}
.content li{margin:5px 0;color:var(--body-fg);}
.content blockquote{
  margin:14px 0;padding:10px 16px;border-left:3px solid var(--line);
  background:var(--hover);color:var(--fg-dim);border-radius:0 6px 6px 0;font-size:14px;
}
.content strong{color:var(--gold-2);font-weight:600;}
.content em{color:var(--accent);font-style:normal;}
.content code{background:var(--bg-3);padding:1px 6px;border-radius:4px;font-size:13px;color:var(--accent);}
.content a{color:var(--accent);text-decoration:none;border-bottom:1px dotted var(--accent);}

/* ---------- Meta / tags ---------- */
.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 22px;}
.tag{
  font-size:11.5px;padding:3px 10px;border-radius:20px;
  background:var(--bg-3);border:1px solid var(--line);color:var(--fg-dim);
}
.tag.gold{border-color:var(--gold);color:var(--gold-2);background:var(--tint);}
.tag.clickable{cursor:pointer;}
.tag.clickable:hover{background:var(--tint-2);color:var(--gold-2);}

.kv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin:16px 0 24px;}
.kv{background:var(--bg-2);padding:10px 14px;}
.kv .k{font-size:11px;color:var(--fg-mute);letter-spacing:.08em;}
.kv .v{font-size:14px;color:var(--fg);margin-top:2px;}

/* ---------- Cards ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:18px 0;}
.card{
  background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
  padding:15px 16px;cursor:pointer;transition:.16s;
}
.card:hover{border-color:var(--gold);transform:translateY(-2px);background:var(--bg-3);}
.card .c-title{font-size:15px;color:var(--gold-2);font-weight:600;margin-bottom:5px;}
.card .c-desc{font-size:12.5px;color:var(--fg-dim);line-height:1.7;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.card .c-foot{font-size:11px;color:var(--fg-mute);margin-top:9px;display:flex;gap:8px;flex-wrap:wrap;}

/* ---------- Act blocks ---------- */
.act{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;margin:16px 0;overflow:hidden;}
.act-head{padding:13px 18px;background:var(--tint);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;}
.act-no{
  flex:0 0 auto;font-size:11px;padding:2px 9px;border-radius:4px;
  background:var(--gold);color:var(--on-gold);font-weight:700;letter-spacing:.04em;
}
.act-title{font-size:16px;color:var(--gold-2);font-weight:600;}
.act-ver{margin-left:auto;font-size:11.5px;color:var(--fg-mute);}
.act-body{padding:16px 20px 20px;}

/* ---------- Timeline ---------- */
.tl{position:relative;margin:12px 0 0 6px;padding-left:26px;}
.tl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:linear-gradient(180deg,var(--gold),var(--line) 60%,transparent);}
.tl-era{position:relative;margin:30px 0 12px;}
.tl-era .era-name{font-size:13px;letter-spacing:.2em;color:var(--gold);font-weight:600;}
.tl-era::before{content:"";position:absolute;left:-26px;top:5px;width:11px;height:11px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--tint);}
.tl-node{position:relative;margin:0 0 20px;}
.tl-node::before{content:"";position:absolute;left:-24px;top:8px;width:7px;height:7px;border-radius:50%;background:var(--bg);border:2px solid var(--fg-mute);}
.tl-node:hover::before{border-color:var(--gold);background:var(--gold);}
.tl-date{font-size:11.5px;color:var(--fg-mute);letter-spacing:.06em;}
.tl-title{font-size:15px;color:var(--gold-2);font-weight:600;cursor:pointer;}
.tl-title:hover{text-decoration:underline;}
.tl-text{font-size:13.5px;color:var(--fg-dim);margin-top:3px;}

/* ---------- Search / list rows ---------- */
.row{border-bottom:1px solid var(--line);padding:13px 4px;cursor:pointer;}
.row:hover{background:var(--hover);}
.row .r-t{font-size:14.5px;color:var(--gold-2);font-weight:600;}
.row .r-s{font-size:13px;color:var(--fg-dim);margin-top:3px;}

body,#sidebar,#topbar,.search-results,.kv{transition:background-color .32s ease,color .28s ease,border-color .32s ease;}
.page-enter{animation:moonlit-page-in .28s ease both;}
@keyframes moonlit-page-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* ---------- 图片：角色 ---------- */
.char-hero{display:flex;gap:24px;align-items:flex-start;}
.char-hero .char-main{flex:1;min-width:0;}
.char-portrait{
  flex:0 0 168px;width:168px;height:206px;border-radius:14px;
  border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(160deg,var(--bg-3),var(--bg-2));
  display:flex;align-items:center;justify-content:center;
}
.char-portrait img{width:100%;height:100%;object-fit:contain;display:block;}
.card.has-thumb{display:flex;gap:12px;align-items:center;}
.card.has-thumb .thumb{
  flex:0 0 56px;width:56px;height:56px;border-radius:10px;overflow:hidden;
  background:var(--bg-3);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
}
.card.has-thumb .thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.card.has-thumb .c-main{flex:1;min-width:0;}

/* ---------- 图片：物品（武器/怪物/食物/材料） ---------- */
.item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:14px;margin:18px 0;}
.item-card{
  background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
  padding:12px 12px 14px;cursor:pointer;text-align:center;
  transition:.16s,background-color .22s,border-color .22s;
}
.item-card:hover{border-color:var(--gold);transform:translateY(-2px);background:var(--bg-3);}
.item-card .ic{width:100%;height:104px;display:flex;align-items:center;justify-content:center;margin-bottom:8px;}
.item-card .ic img{max-width:100%;max-height:100%;object-fit:contain;display:block;}
.item-card .ic-name{font-size:13.5px;color:var(--gold-2);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.item-card .ic-sub{font-size:11.5px;color:var(--fg-mute);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.item-hero{display:flex;gap:24px;align-items:flex-start;}
.item-hero .item-main{flex:1;min-width:0;}
.item-hero .item-pic{
  flex:0 0 136px;width:136px;height:136px;border-radius:14px;
  border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(160deg,var(--bg-3),var(--bg-2));
  display:flex;align-items:center;justify-content:center;
}
.item-hero .item-pic img{max-width:88%;max-height:88%;object-fit:contain;display:block;}
.stars{color:var(--rare);font-size:12px;letter-spacing:1.5px;}
.no-img{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:var(--fg-mute);font-size:24px;
}

@media (max-width:640px){
  .char-hero,.item-hero{flex-direction:column;gap:16px;}
  .char-portrait{flex:none;width:100%;height:200px;}
  .item-hero .item-pic{flex:none;width:100%;height:180px;}
  .home-head{align-items:flex-start;flex-direction:column;gap:14px;}
  .home-version{text-align:left;}
  .overview-strip{grid-template-columns:repeat(2,minmax(0,1fr));}
}

.placeholder{color:var(--fg-mute);padding:60px 0;text-align:center;font-size:14px;}
hr{border:none;border-top:1px solid var(--line);margin:26px 0;}

@media (max-width:900px){
  #sidebar{position:fixed;left:0;top:0;bottom:0;z-index:50;transform:translateX(-100%);transition:.22s;}
  #sidebar.open{transform:none;box-shadow:0 0 40px var(--shadow-lg);}
  .icon-btn{display:block;}
  .search-wrap{flex:1;max-width:none;}
  .crumb{display:none;}
  .content{padding:22px 18px 100px;}
  .page-title{font-size:22px;}
}