MediaWiki:Citizen.css：修订间差异

2026年6月3日 (三) 14:35的版本

/* ================================================================
   国漫TV · MediaWiki:Citizen.css  v2
   方案：幽紫幻境 + D竖脉经络 + A导航 + A页脚
   适配：Citizen v3.16.1 · MediaWiki 1.45+
   版本：v2 — 新增三栏留白 / 段落卡片 / 导航重排 / 四列页脚
   写入位置：后台编辑 MediaWiki:Citizen.css（完全替换旧版）
   ================================================================ */


/* ╔══════════════════════════════════════════════════════════════╗
   ║  第1部分：全局色彩系统                                       ║
   ╚══════════════════════════════════════════════════════════════╝ */

:root {
    --color-progressive-oklch__h: 301;
    --color-progressive-oklch__c: 0.168;
    --color-progressive-oklch__l: 48%;
    --transform-image-hover: none;
    --backdrop-filter-frosted-glass: blur(10px) saturate(120%);
}

/* ── 浅色模式 ── */
.skin-theme-clientpref-day {
    --color-surface-0: #F8F6FC;
    --color-surface-1: #FFFFFF;
    --color-surface-2: #F3F0FF;
    --color-surface-3: #EDE9FE;
    --color-surface-4: #DDD6FE;
    --color-base: #2D2640;
    --color-emphasized: #1A1033;
    --color-subtle: #7C7394;
    --color-link: #6D28D9;
}

@media screen and (prefers-color-scheme: light) {
    .skin-theme-clientpref-os {
        --color-surface-0: #F8F6FC;
        --color-surface-1: #FFFFFF;
        --color-surface-2: #F3F0FF;
        --color-surface-3: #EDE9FE;
        --color-surface-4: #DDD6FE;
        --color-base: #2D2640;
        --color-emphasized: #1A1033;
        --color-subtle: #7C7394;
        --color-link: #6D28D9;
    }
}

/* ── 深色模式 ── */
.skin-theme-clientpref-night {
    --color-surface-0: #110D1B;
    --color-surface-1: #1A1428;
    --color-surface-2: #231C34;
    --color-surface-3: #2D2540;
    --color-surface-4: #3D3356;
    --color-base: #D4CEE4;
    --color-emphasized: #F0ECF8;
    --color-subtle: #8E85A6;
    --color-link: #C4B5FD;
}

@media screen and (prefers-color-scheme: dark) {
    .skin-theme-clientpref-os {
        --color-surface-0: #110D1B;
        --color-surface-1: #1A1428;
        --color-surface-2: #231C34;
        --color-surface-3: #2D2540;
        --color-surface-4: #3D3356;
        --color-base: #D4CEE4;
        --color-emphasized: #F0ECF8;
        --color-subtle: #8E85A6;
        --color-link: #C4B5FD;
    }
}

/* ── 纯黑模式 ── */
.skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1 {
    --color-surface-0: #000000;
    --color-surface-1: #0D0A14;
    --color-surface-2: #151020;
    --color-surface-3: #1E182C;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  第2部分：D竖脉经络背景线条                                   ║
   ╚══════════════════════════════════════════════════════════════╝ */

.citizen-feature-performance-mode-clientpref-0.skin-theme-clientpref-day .mw-page-container {
    background-image:
        repeating-linear-gradient(90deg,
            transparent, transparent 80px,
            rgba(124, 58, 237, 0.03) 80px, rgba(124, 58, 237, 0.03) 81px,
            transparent 81px, transparent 100px,
            rgba(124, 58, 237, 0.018) 100px, rgba(124, 58, 237, 0.018) 101px
        );
    background-attachment: fixed;
}

.citizen-feature-performance-mode-clientpref-0.skin-theme-clientpref-night .mw-page-container {
    background-image:
        repeating-linear-gradient(90deg,
            transparent, transparent 80px,
            rgba(196, 181, 253, 0.025) 80px, rgba(196, 181, 253, 0.025) 81px,
            transparent 81px, transparent 100px,
            rgba(196, 181, 253, 0.015) 100px, rgba(196, 181, 253, 0.015) 101px
        );
    background-attachment: fixed;
}

@media screen and (prefers-color-scheme: light) {
    .citizen-feature-performance-mode-clientpref-0.skin-theme-clientpref-os .mw-page-container {
        background-image:
            repeating-linear-gradient(90deg,
                transparent, transparent 80px,
                rgba(124, 58, 237, 0.03) 80px, rgba(124, 58, 237, 0.03) 81px,
                transparent 81px, transparent 100px,
                rgba(124, 58, 237, 0.018) 100px, rgba(124, 58, 237, 0.018) 101px
            );
        background-attachment: fixed;
    }
}

@media screen and (prefers-color-scheme: dark) {
    .citizen-feature-performance-mode-clientpref-0.skin-theme-clientpref-os .mw-page-container {
        background-image:
            repeating-linear-gradient(90deg,
                transparent, transparent 80px,
                rgba(196, 181, 253, 0.025) 80px, rgba(196, 181, 253, 0.025) 81px,
                transparent 81px, transparent 100px,
                rgba(196, 181, 253, 0.015) 100px, rgba(196, 181, 253, 0.015) 101px
            );
        background-attachment: fixed;
    }
}

.citizen-feature-performance-mode-clientpref-1 .mw-page-container {
    background-image: none;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  第3部分：页面宽度 — 加宽以容纳三栏留白                       ║
   ╚══════════════════════════════════════════════════════════════╝ */

:root.citizen-feature-custom-width-clientpref-standard {
    --width-layout: 1240px;
}

:root.citizen-feature-custom-width-clientpref-wide {
    --width-layout: 1680px;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  第4部分：顶部导航栏 — 方案A 单行通栏                         ║
   ║  Citizen header 在 top 模式下的样式覆盖                       ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* 导航栏整体背景 */
.citizen-header {
    background: linear-gradient(135deg, #1A1033 0%, #2D1B69 100%);
    border-bottom: 1px solid rgba(124, 58, 237, 0.15);
}

/* Logo区域 */
.citizen-header__logo {
    border-radius: 8px;
}

/* 导航栏按钮（搜索/用户/菜单等） */
.citizen-header__button {
    border-radius: 8px;
}

.citizen-header__button:hover {
    background-color: rgba(124, 58, 237, 0.15);
}

/* 搜索触发区域 */
.citizen-search-trigger {
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
}

.citizen-search-trigger:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(124, 58, 237, 0.3);
}

/* 侧边抽屉（汉堡菜单展开后）导航链接 */
.citizen-drawer {
    border-right: 1px solid var(--color-surface-3);
}

.citizen-drawer .mw-portal .vector-menu-content-list a {
    border-radius: 6px;
    padding: 6px 12px;
}

.citizen-drawer .mw-portal .vector-menu-content-list a:hover {
    background: var(--color-surface-3);
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  第5部分：页面标题与章节标题                                   ║
   ╚══════════════════════════════════════════════════════════════╝ */

.skin-citizen .firstHeading {
    font-weight: 900;
    letter-spacing: 1px;
}

.skin-citizen .mw-body-content .mw-heading h2 {
    border-left: 4px solid var(--color-progressive);
    padding-left: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.skin-citizen .mw-body-content .mw-heading h3 {
    border-left: 3px solid var(--color-surface-4);
    padding-left: 10px;
    font-weight: 700;
}

.skin-citizen .mw-body-content .mw-heading h4 {
    padding-left: 10px;
    font-weight: 600;
    color: var(--color-subtle);
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  第6部分：Infobox — 左侧悬浮独立卡片                         ║
   ║  PC端：固定宽度 + sticky + 圆角卡片 + 与内容区间距             ║
   ║  移动端：自动回流全宽                                         ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* --- 传统 table.infobox --- */
.skin-citizen .mw-body-content .infobox {
    border: 1px solid var(--color-surface-3);
    border-radius: 14px;
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

@media screen and (min-width: 1100px) {
    .skin-citizen .mw-body-content .infobox {
        float: left;
        clear: left;
        width: 260px;
        margin: 0 24px 20px 0;
        position: sticky;
        top: 80px;
        z-index: 2;
    }
}

.skin-citizen .mw-body-content .infobox > caption,
.skin-citizen .mw-body-content .infobox > tbody > tr:first-child > th {
    background: linear-gradient(135deg, #7C3AED 0%, #F59E0B 100%);
    color: #FFFFFF;
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: 2px;
    padding: 14px 16px;
    text-align: center;
    border: none;
}

.skin-citizen .mw-body-content .infobox .infobox-image,
.skin-citizen .mw-body-content .infobox > tbody > tr > td[colspan] {
    background: var(--color-surface-2);
    padding: 8px;
    text-align: center;
}

.skin-citizen .mw-body-content .infobox .infobox-image img {
    border-radius: 8px;
    max-width: 100%;
    height: auto;
}

.skin-citizen .mw-body-content .infobox th {
    background: var(--color-surface-2);
    color: var(--color-subtle);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 6px 12px;
    text-align: left;
    white-space: nowrap;
    width: 35%;
    vertical-align: top;
    border-bottom: 1px solid var(--color-surface-3);
}

.skin-citizen .mw-body-content .infobox td {
    padding: 6px 12px;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--color-surface-3);
    vertical-align: top;
}

.skin-citizen .mw-body-content .infobox .infobox-header,
.skin-citizen .mw-body-content .infobox th[colspan] {
    background: var(--color-surface-3);
    color: var(--color-emphasized);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 8px 12px;
    text-align: center;
    letter-spacing: 1px;
}

/* --- PortableInfobox --- */
.skin-citizen .mw-body-content .portable-infobox {
    border: 1px solid var(--color-surface-3);
    border-radius: 14px;
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

@media screen and (min-width: 1100px) {
    .skin-citizen .mw-body-content .portable-infobox {
        float: left;
        clear: left;
        width: 260px;
        margin: 0 24px 20px 0;
        position: sticky;
        top: 80px;
        z-index: 2;
    }
}

.skin-citizen .mw-body-content .portable-infobox .pi-header {
    background: linear-gradient(135deg, #7C3AED 0%, #F59E0B 100%);
    color: #FFFFFF;
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: 2px;
    padding: 14px 16px;
    text-align: center;
}

.skin-citizen .mw-body-content .portable-infobox .pi-image img {
    width: 100%;
    height: auto;
}

.skin-citizen .mw-body-content .portable-infobox .pi-item {
    border-bottom: 1px solid var(--color-surface-3);
}

.skin-citizen .mw-body-content .portable-infobox .pi-data-label {
    background: var(--color-surface-2);
    color: var(--color-subtle);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 6px 12px;
}

.skin-citizen .mw-body-content .portable-infobox .pi-data-value {
    padding: 6px 12px;
    font-size: 0.85rem;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  第7部分：目录（TOC）— 右侧独立卡片                           ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* TOC 容器卡片化 */
.citizen-toc {
    background: #FFFFFF;
    border-radius: 14px;
    border: 1px solid var(--color-surface-3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    padding: 16px 14px;
}

.skin-theme-clientpref-night .citizen-toc {
    background: var(--color-surface-1);
}

.skin-citizen .citizen-toc__top {
    font-weight: 800;
    letter-spacing: 1px;
    font-size: 0.8rem;
    text-transform: uppercase;
    padding-bottom: 8px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--color-surface-3);
}

.skin-citizen .citizen-toc__link--active {
    color: var(--color-progressive);
    font-weight: 700;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  第8部分：内容区段落独立白色卡片（修正版）                     ║
   ║  MW 1.45 用 <section data-mw-section-id> 包裹标题+内容       ║
   ║  直接对 section 做卡片 = 标题和内容一起包在白色卡片里          ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* 每个顶级 section（h2级别章节）= 一张独立卡片 */
.skin-citizen .mw-body-content .mw-parser-output > section {
    background: #FFFFFF;
    border: 1px solid var(--color-surface-3);
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

/* 深色模式 */
.skin-theme-clientpref-night .skin-citizen .mw-body-content .mw-parser-output > section {
    background: var(--color-surface-1);
}

/* 嵌套的子section（h3/h4级别）不重复加卡片，保持透明 */
.skin-citizen .mw-body-content .mw-parser-output > section > section {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 8px;
    box-shadow: none;
}

/* 卡片内章节标题间距微调 */
.skin-citizen .mw-body-content .mw-parser-output > section > .mw-heading {
    margin-top: 0;
    padding-top: 0;
}

/* Infobox 所在 section 不加双层白背景 */
.skin-citizen .mw-body-content .mw-parser-output > section > .infobox,
.skin-citizen .mw-body-content .mw-parser-output > section > .portable-infobox {
    margin-top: 0;
}

/* Navbox 所在 section 透明（Navbox 自身已有样式） */
.skin-citizen .mw-body-content .mw-parser-output > section:has(.navbox) {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  第9部分：表格样式                                            ║
   ╚══════════════════════════════════════════════════════════════╝ */

.skin-citizen .mw-body-content .wikitable {
    border: 1px solid var(--color-surface-3);
    border-radius: 12px;
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.skin-theme-clientpref-night .skin-citizen .mw-body-content .wikitable {
    background: var(--color-surface-1);
}

.skin-citizen .mw-body-content .wikitable th {
    background: var(--color-surface-2);
    color: var(--color-emphasized);
    font-weight: 700;
    padding: 10px 14px;
    border-bottom: 2px solid var(--color-surface-4);
    font-size: 0.875rem;
    letter-spacing: 0.3px;
}

.skin-citizen .mw-body-content .wikitable td {
    padding: 8px 14px;
    border-bottom: 1px solid var(--color-surface-3);
    font-size: 0.875rem;
    vertical-align: top;
}

.citizen-animations-ready .skin-citizen .mw-body-content .wikitable tbody tr {
    transition: background-color var(--transition-hover);
}

.skin-citizen .mw-body-content .wikitable tbody tr:hover {
    background-color: var(--color-surface-2);
}

/* 战绩表格颜色标记 */
.skin-citizen .mw-body-content .wikitable .result-win { color: #10B981; font-weight: 700; }
.skin-citizen .mw-body-content .wikitable .result-lose { color: #EF4444; font-weight: 700; }
.skin-citizen .mw-body-content .wikitable .result-draw { color: #F59E0B; font-weight: 700; }

/* 境界进度条 */
.skin-citizen .mw-body-content .realm-progress {
    height: 5px;
    border-radius: 3px;
    background: var(--color-surface-3);
    overflow: hidden;
    margin-top: 4px;
}
.skin-citizen .mw-body-content .realm-progress-bar {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #7C3AED, #F59E0B);
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  第10部分：Navbox 底部导航                                    ║
   ╚══════════════════════════════════════════════════════════════╝ */

.skin-citizen .mw-body-content .navbox {
    border: 1px solid var(--color-surface-3);
    border-radius: 14px;
    overflow: hidden;
    margin: 24px 0;
    background: #FFFFFF;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.skin-theme-clientpref-night .skin-citizen .mw-body-content .navbox {
    background: var(--color-surface-1);
}

.skin-citizen .mw-body-content .navbox-title {
    background: linear-gradient(135deg, #7C3AED 0%, #F59E0B 100%);
    color: #FFFFFF;
    font-weight: 700;
    padding: 10px 16px;
    text-align: center;
    letter-spacing: 1px;
    font-size: 0.9rem;
}

.skin-citizen .mw-body-content .navbox-title a {
    color: #FFFFFF;
    font-weight: 700;
}

.skin-citizen .mw-body-content .navbox-group {
    background: var(--color-surface-2);
    font-weight: 700;
    padding: 8px 14px;
    min-width: 80px;
    white-space: nowrap;
    font-size: 0.85rem;
    color: var(--color-emphasized);
    border-right: 2px solid var(--color-surface-4);
    vertical-align: middle;
}

.skin-citizen .mw-body-content .navbox-list {
    padding: 6px 14px;
    font-size: 0.85rem;
}

.skin-citizen .mw-body-content .navbox-even { background: var(--color-surface-2); }
.skin-citizen .mw-body-content .navbox-odd { background: var(--color-surface-1); }


/* ╔══════════════════════════════════════════════════════════════╗
   ║  第11部分：分类标签                                           ║
   ╚══════════════════════════════════════════════════════════════╝ */

.skin-citizen .mw-normal-catlinks {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--color-surface-3);
}

.skin-citizen .mw-normal-catlinks a {
    display: inline-block;
    background: var(--color-surface-2);
    color: var(--color-link);
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    margin: 2px 3px;
    font-weight: 500;
    border: 1px solid var(--color-surface-3);
}

.citizen-animations-ready .skin-citizen .mw-normal-catlinks a {
    transition: background-color var(--transition-hover), color var(--transition-hover);
}

.skin-citizen .mw-normal-catlinks a:hover {
    background: var(--color-progressive);
    color: #FFFFFF;
    border-color: var(--color-progressive);
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  第12部分：链接样式                                           ║
   ╚══════════════════════════════════════════════════════════════╝ */

.skin-citizen .mw-body-content a:not(.new):not(.external):hover {
    text-decoration: underline;
    text-decoration-color: var(--color-progressive);
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
}

.skin-citizen .mw-body-content a.new { color: #DC2626; }
.skin-theme-clientpref-night .skin-citizen .mw-body-content a.new { color: #FCA5A5; }


/* ╔══════════════════════════════════════════════════════════════╗
   ║  第13部分：引用 / 经典台词                                    ║
   ╚══════════════════════════════════════════════════════════════╝ */

.skin-citizen .mw-body-content blockquote {
    border-left: 4px solid var(--color-progressive);
    background: var(--color-surface-2);
    border-radius: 0 10px 10px 0;
    padding: 14px 20px;
    margin: 12px 0;
    font-style: italic;
    color: var(--color-base);
}

.skin-citizen .quote-block {
    background: var(--color-surface-2);
    border-left: 4px solid var(--color-progressive);
    border-radius: 0 10px 10px 0;
    padding: 14px 20px;
    margin: 10px 0;
}

.skin-citizen .quote-block .quote-text {
    font-size: 0.95rem;
    font-style: italic;
    line-height: 1.7;
    color: var(--color-emphasized);
}

.skin-citizen .quote-block .quote-source {
    font-size: 0.8rem;
    color: var(--color-subtle);
    margin-top: 6px;
    text-align: right;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  第14部分：Tabber / Mermaid / 图片                            ║
   ╚══════════════════════════════════════════════════════════════╝ */

.skin-citizen .tabber__header {
    border-bottom: 2px solid var(--color-surface-3);
}

.skin-citizen .tabber__tab--active {
    border-bottom-color: var(--color-progressive);
    color: var(--color-progressive);
    font-weight: 700;
}

.skin-citizen .tabber__panel {
    background: #FFFFFF;
    border: 1px solid var(--color-surface-3);
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 16px;
}

.skin-citizen .mw-body-content .mermaid {
    background: #FFFFFF;
    border: 1px solid var(--color-surface-3);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    overflow-x: auto;
}

.skin-citizen .mw-body-content .thumb .thumbinner {
    border: 1px solid var(--color-surface-3);
    border-radius: 10px;
    overflow: hidden;
    background: #FFFFFF;
}

.skin-citizen .mw-body-content .thumbcaption {
    font-size: 0.8rem;
    color: var(--color-subtle);
    padding: 6px 10px;
    line-height: 1.4;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  第15部分：自定义标签（角色/IP/境界/势力）                      ║
   ╚══════════════════════════════════════════════════════════════╝ */

.skin-citizen .tag-character {
    display: inline-block;
    background: #F3F0FF; color: #6D28D9;
    padding: 2px 8px; border-radius: 4px;
    font-size: 0.8rem; font-weight: 500; margin: 1px 2px;
}
.skin-theme-clientpref-night .tag-character {
    background: rgba(124, 58, 237, 0.15); color: #C4B5FD;
}

.skin-citizen .tag-ip {
    display: inline-block;
    background: #FEF3C7; color: #B45309;
    padding: 2px 8px; border-radius: 4px;
    font-size: 0.8rem; font-weight: 500; margin: 1px 2px;
}
.skin-theme-clientpref-night .tag-ip {
    background: rgba(245, 158, 11, 0.15); color: #FDE68A;
}

.skin-citizen .tag-realm {
    display: inline-block;
    background: #ECFDF5; color: #047857;
    padding: 2px 8px; border-radius: 4px;
    font-size: 0.8rem; font-weight: 500; margin: 1px 2px;
}
.skin-theme-clientpref-night .tag-realm {
    background: rgba(16, 185, 129, 0.15); color: #A7F3D0;
}

.skin-citizen .tag-faction {
    display: inline-block;
    background: #FEE2E2; color: #B91C1C;
    padding: 2px 8px; border-radius: 4px;
    font-size: 0.8rem; font-weight: 500; margin: 1px 2px;
}
.skin-theme-clientpref-night .tag-faction {
    background: rgba(239, 68, 68, 0.15); color: #FCA5A5;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  第16部分：角色关系卡片网格                                    ║
   ╚══════════════════════════════════════════════════════════════╝ */

.skin-citizen .relation-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    margin: 12px 0;
}

.skin-citizen .relation-card {
    background: var(--color-surface-2);
    border: 1px solid var(--color-surface-3);
    border-radius: 10px;
    padding: 12px 8px;
    text-align: center;
}

.citizen-animations-ready .skin-citizen .relation-card {
    transition: box-shadow var(--transition-hover), border-color var(--transition-hover);
}

.skin-citizen .relation-card:hover {
    border-color: var(--color-progressive);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.1);
}

.skin-citizen .relation-card img {
    width: 56px; height: 56px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 6px;
    border: 2px solid var(--color-surface-3);
}

.skin-citizen .relation-card .relation-name {
    font-weight: 700; font-size: 0.85rem; color: var(--color-link);
}

.skin-citizen .relation-card .relation-type {
    font-size: 0.75rem; color: var(--color-subtle); margin-top: 2px;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  第17部分：战绩统计条 / 剧透折叠                               ║
   ╚══════════════════════════════════════════════════════════════╝ */

.skin-citizen .battle-stats {
    display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap;
}
.skin-citizen .battle-stats .stat-win {
    background: rgba(16, 185, 129, 0.1); color: #10B981;
    padding: 4px 12px; border-radius: 6px; font-weight: 700; font-size: 0.85rem;
}
.skin-citizen .battle-stats .stat-lose {
    background: rgba(239, 68, 68, 0.1); color: #EF4444;
    padding: 4px 12px; border-radius: 6px; font-weight: 700; font-size: 0.85rem;
}
.skin-citizen .battle-stats .stat-draw {
    background: rgba(245, 158, 11, 0.1); color: #F59E0B;
    padding: 4px 12px; border-radius: 6px; font-weight: 700; font-size: 0.85rem;
}

.skin-citizen .spoiler-box {
    background: var(--color-surface-2);
    border: 1px dashed var(--color-surface-4);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 10px 0;
}

.skin-citizen .spoiler-box summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--color-progressive);
    font-size: 0.9rem;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  第18部分：页脚 — 方案A 四列信息式                             ║
   ║  覆盖 Citizen 默认 footer 样式                                ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* 页脚整体背景 */
.citizen-footer,
#footer {
    background: linear-gradient(135deg, #0F0A1A 0%, #1A1033 100%);
    border-top: 2px solid rgba(124, 58, 237, 0.15);
    padding: 32px 24px 16px;
}

/* 页脚文字颜色 */
.citizen-footer,
.citizen-footer a,
#footer,
#footer a {
    color: rgba(228, 220, 245, 0.5);
}

.citizen-footer a:hover,
#footer a:hover {
    color: #C4B5FD;
}

/* 页脚列表横排 */
.citizen-footer ul,
#footer ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.citizen-footer li,
#footer li {
    font-size: 0.8rem;
}

/* 页脚信息行 */
.citizen-footer__info,
#footer-info {
    font-size: 0.75rem;
    color: rgba(228, 220, 245, 0.3);
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    text-align: center;
}

/* 页脚图标 */
.citizen-footer__icons img,
#footer-icons img {
    opacity: 0.4;
}

.citizen-footer__icons img:hover,
#footer-icons img:hover {
    opacity: 0.7;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  第19部分：移动端响应式                                       ║
   ╚══════════════════════════════════════════════════════════════╝ */

@media screen and (max-width: 1099px) {
    .skin-citizen .mw-body-content .infobox,
    .skin-citizen .mw-body-content .portable-infobox {
        float: none;
        width: 100%;
        margin: 0 0 16px 0;
        position: static;
    }

    .skin-citizen .relation-card-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .skin-citizen .mw-body-content .wikitable {
        display: block;
        overflow-x: auto;
    }
}

@media screen and (max-width: 600px) {
    .skin-citizen .relation-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .skin-citizen .mw-body-content .navbox-group {
        display: block;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--color-surface-3);
    }

    .skin-citizen .mw-body-content .mw-heading + div,
    .skin-citizen .mw-body-content .mw-heading + p {
        padding: 14px 16px;
    }
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  第20部分：打印样式                                           ║
   ╚══════════════════════════════════════════════════════════════╝ */

@media print {
    .mw-page-container { background-image: none !important; }
    .citizen-toc { background: transparent; border: none; box-shadow: none; }
    .navbox, .spoiler-box, .battle-stats { display: none; }
    .infobox, .portable-infobox { float: none; width: 100%; position: static; }
}


/* ══════════════════════════ 结束 ══════════════════════════════ */