/* ================================================================
   岁月长河 · 人物关系图 — 卡片式
   ================================================================ */

* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family:"Noto Serif SC","宋体","华文楷体",serif;
    background:#2C221A;
    color:#E8DCC7;
    line-height:1.6; letter-spacing:0.03em;
    min-height:100vh; display:flex; flex-direction:column;
    position:relative;
}
body::before {
    content:''; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:0.025;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.figures-header, .figures-main, .figures-footer { position:relative; z-index:1; }

/* ===== 顶部 ===== */
.figures-header {
    background:#2C221A; padding:44px 20px 36px; text-align:center;
    border-bottom:1px solid rgba(232,220,199,0.08);
}
.page-title { color:#E8DCC7; font-size:34px; font-weight:700; letter-spacing:0.2em; margin-bottom:6px; }
.page-subtitle { color:rgba(232,220,199,0.4); font-size:12px; letter-spacing:0.3em; margin-bottom:22px; }
.site-nav { display:flex; justify-content:center; gap:10px; }
.site-nav a {
    color:rgba(232,220,199,0.45); text-decoration:none; font-size:12px;
    padding:6px 18px; border:1px solid rgba(232,220,199,0.12);
    transition:all 0.3s; letter-spacing:0.1em; border-radius:20px;
}
.site-nav a:hover, .site-nav a.active { background:rgba(156,42,42,0.15); border-color:#9C2A2A; color:#E8DCC7; }

/* ===== 主区域 ===== */
.figures-main { flex:1; max-width:1200px; margin:0 auto; padding:28px 20px; width:100%; }

/* ===== 控制栏 ===== */
.controls {
    display:flex; flex-wrap:wrap; gap:20px; margin-bottom:32px;
    padding:0 0 24px; border-bottom:1px solid rgba(232,220,199,0.10);
}
.control-group { display:flex; flex-direction:column; gap:6px; }
.control-group label { font-size:11px; color:rgba(232,220,199,0.35); letter-spacing:0.15em; }
.era-lens { display:flex; flex-wrap:wrap; gap:6px; }
.era-chip {
    padding:6px 14px; border:1px solid rgba(232,220,199,0.12);
    background:transparent; color:rgba(232,220,199,0.4);
    font-family:inherit; font-size:11px; cursor:pointer; border-radius:20px;
    transition:all 0.3s; letter-spacing:0.08em;
}
.era-chip:hover { border-color:#9C2A2A; color:#E8DCC7; }
.era-chip.active { background:rgba(156,42,42,0.15); border-color:#9C2A2A; color:#E8DCC7; }

/* ===== 卡片网格 ===== */
.figure-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
    gap:16px;
}
.empty-hint { grid-column:1/-1; text-align:center; color:rgba(232,220,199,0.3); padding:40px 0; }

.figure-card {
    background:rgba(232,220,199,0.03);
    border:1px solid rgba(232,220,199,0.08);
    border-radius:16px; padding:20px 16px; text-align:center;
    cursor:pointer; transition:all 0.3s;
}
.figure-card:hover {
    background:rgba(232,220,199,0.06);
    border-color:rgba(232,220,199,0.2);
    transform:translateY(-2px);
}

.card-side {
    width:24px; height:24px; border-radius:50%; margin:0 auto 10px;
    display:flex; align-items:center; justify-content:center;
    font-size:11px; color:#E8DCC7;
}
.card-avatar {
    width:48px; height:48px; border-radius:50%; margin:0 auto 8px;
    display:flex; align-items:center; justify-content:center;
    color:#E8DCC7; font-size:20px; font-weight:700;
    background-position:center; background-size:cover;
}
.card-name { font-size:15px; color:#E8DCC7; letter-spacing:1px; margin-bottom:2px; }
.card-role { font-size:11px; color:rgba(232,220,199,0.35); margin-bottom:10px; }
.card-meta { display:flex; gap:10px; justify-content:center; }
.card-meta span { font-size:10px; color:rgba(232,220,199,0.25); letter-spacing:0.08em; }

/* ===== 抽屉 ===== */
.drawer-overlay {
    position:fixed; inset:0; z-index:99; background:rgba(0,0,0,0.4);
    display:none;
}
.drawer-overlay.show { display:block; }

.drawer {
    position:fixed; top:0; right:-420px; z-index:100;
    width:380px; height:100vh; background:#2C221A;
    border-left:1px solid rgba(232,220,199,0.10);
    padding:32px 28px; overflow-y:auto;
    transition:right 0.4s cubic-bezier(0.4,0,0.2,1);
}
.drawer.open { right:0; }

.drawer-close {
    position:absolute; top:16px; right:16px;
    background:none; border:none; color:rgba(232,220,199,0.4);
    font-size:24px; cursor:pointer; font-family:inherit;
}
.drawer-close:hover { color:#E8DCC7; }

.drawer-header { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.drawer-avatar {
    width:52px; height:52px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:#E8DCC7; font-size:22px; font-weight:700; flex-shrink:0;
    background-position:center; background-size:cover;
}
.drawer-name { font-size:20px; color:#E8DCC7; letter-spacing:2px; }
.drawer-role { font-size:12px; color:rgba(232,220,199,0.4); margin-top:2px; }
.drawer-desc { font-size:13px; color:rgba(232,220,199,0.6); line-height:1.8; margin-bottom:24px; }

.drawer-section { margin-bottom:24px; }
.drawer-section h3 { font-size:11px; color:rgba(232,220,199,0.3); letter-spacing:0.2em; margin-bottom:10px; text-transform:uppercase; }

.event-tag {
    display:block; padding:8px 0; border-bottom:1px solid rgba(232,220,199,0.05);
    color:rgba(232,220,199,0.55); text-decoration:none; font-size:13px;
    transition:color 0.2s;
}
.event-tag:hover { color:#9C2A2A; }
.event-tag:last-child { border-bottom:none; }

.rel-chip {
    display:inline-block; padding:4px 10px; border-radius:12px;
    font-size:11px; margin:0 4px 6px 0;
}
.rel-chip.cooperative { color:#8B9D83; border:1px solid rgba(139,157,131,0.2); }
.rel-chip.opposing { color:#9C2A2A; border:1px solid rgba(156,42,42,0.2); }

/* ===== 底部 ===== */
.figures-footer {
    text-align:center; padding:28px;
    color:rgba(232,220,199,0.25); font-size:11px; letter-spacing:0.12em;
    border-top:1px solid rgba(232,220,199,0.06);
}
.footer-nav { margin-top:8px; display:flex; justify-content:center; gap:10px; align-items:center; }
.footer-nav a { color:rgba(232,220,199,0.35); text-decoration:none; font-size:11px; }
.footer-nav a:hover { color:#E8DCC7; }
.footer-nav span { color:rgba(232,220,199,0.1); }

@media (max-width:768px) {
    .figure-grid { grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:10px; }
    .drawer { width:100vw; right:-100vw; }
    .page-title { font-size:26px; }
}