MediaWiki:Citizen.css：修订间差异

2026年6月3日 (三) 13:44的版本

/* ════════════════════════════════════════════════════════════════
   第1部分：全局色彩系统 — OKLCH 主色调
   ════════════════════════════════════════════════════════════════ */

/* 主色相301（紫色系），对浅色和深色模式均生效 */
:root {
    --color-progressive-oklch__h: 301;
    --color-progressive-oklch__c: 0.168;
    --color-progressive-oklch__l: 48%;
}


/* ════════════════════════════════════════════════════════════════
   第2部分：浅色模式 — Surface 与文字层级
   文档来源：Theming > Surface colors / Text colors
   ════════════════════════════════════════════════════════════════ */

.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;
    }
}


/* ════════════════════════════════════════════════════════════════
   第3部分：深色模式 — Surface 与文字层级
   文档来源：Theming > Theme modes
   ════════════════════════════════════════════════════════════════ */

.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;
}


/* ════════════════════════════════════════════════════════════════
   第4部分：D竖脉经络 — 页面背景线条
   纯CSS repeating-linear-gradient，零图片零JS
   性能模式下自动关闭（遵循官方Performance mode规范）
   ════════════════════════════════════════════════════════════════ */

/* 浅色模式背景线条 — 仅在性能模式关闭时显示 */
.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;
}


/* ════════════════════════════════════════════════════════════════
   第5部分：页面标题（.firstHeading）
   ════════════════════════════════════════════════════════════════ */

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


/* ════════════════════════════════════════════════════════════════
   第6部分：章节标题
   MediaWiki 1.45 使用 .mw-heading 包裹 h2/h3 等
   ════════════════════════════════════════════════════════════════ */

.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);
}


/* ════════════════════════════════════════════════════════════════
   第7部分：Infobox 样式 — 左侧悬浮
   Citizen 原生支持 PortableInfobox 的 skinStyles
   此处对传统 .infobox 和 PortableInfobox 均做覆盖
   PC端 float:left sticky，移动端自动回流
   ════════════════════════════════════════════════════════════════ */

/* --- 传统 table.infobox --- */
@media screen and (min-width: 1200px) {
    .skin-citizen .mw-body-content .infobox {
        float: left;
        clear: left;
        width: 280px;
        margin: 0 24px 20px 0;
        position: sticky;
        top: 80px;
        z-index: 2;
    }
}

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

/* Infobox 顶部标题栏 — 渐变色 */
.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.125rem;
    letter-spacing: 2px;
    padding: 14px 16px;
    text-align: center;
    border: none;
}

/* Infobox 图片区域 */
.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;
}

/* Infobox 数据行 */
.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: 30%;
    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;
}

/* Infobox 子标题行 */
.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.9rem;
    padding: 8px 12px;
    text-align: center;
    letter-spacing: 1px;
}

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

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

.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.125rem;
    letter-spacing: 2px;
    padding: 14px 16px;
    text-align: center;
}

.skin-citizen .mw-body-content .portable-infobox .pi-image img {
    border-radius: 0;
    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;
}

/* Infobox 底部分类标签 */
.skin-citizen .mw-body-content .infobox .infobox-nav,
.skin-citizen .mw-body-content .portable-infobox .pi-navigation {
    background: var(--color-surface-2);
    padding: 8px 12px;
    text-align: center;
    font-size: 0.8rem;
}


/* ════════════════════════════════════════════════════════════════
   第8部分：目录（TOC）样式
   Citizen 自带右侧粘性 TOC，此处仅做视觉增强
   ════════════════════════════════════════════════════════════════ */

/* TOC 当前激活项高亮 */
.skin-citizen .citizen-toc__link--active {
    color: var(--color-progressive);
    font-weight: 700;
}

/* TOC 标题 */
.skin-citizen .citizen-toc__top {
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 0.8rem;
    text-transform: uppercase;
}


/* ════════════════════════════════════════════════════════════════
   第9部分：内容区卡片化
   每个章节内容包裹在白色/表面色卡片中
   ════════════════════════════════════════════════════════════════ */

/* 章节内容卡片 */
.skin-citizen .mw-body-content .mw-heading + div,
.skin-citizen .mw-body-content .mw-heading + p,
.skin-citizen .mw-body-content .mw-heading + ul,
.skin-citizen .mw-body-content .mw-heading + ol,
.skin-citizen .mw-body-content .mw-heading + dl,
.skin-citizen .mw-body-content .mw-heading + blockquote {
    background: var(--color-surface-1);
    border: 1px solid var(--color-surface-3);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}


/* ════════════════════════════════════════════════════════════════
   第10部分：表格样式（.wikitable）
   文档来源：Utility classes > Tables
   ════════════════════════════════════════════════════════════════ */

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

.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: 6px;
    border-radius: 3px;
    background: var(--color-surface-3);
    overflow: hidden;
}
.skin-citizen .mw-body-content .realm-progress-bar {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #7C3AED, #F59E0B);
}


/* ════════════════════════════════════════════════════════════════
   第11部分：Navbox 底部导航
   ════════════════════════════════════════════════════════════════ */

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

.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);
}

/* Navbox 内分隔符样式 */
.skin-citizen .mw-body-content .navbox-list a {
    white-space: nowrap;
}


/* ════════════════════════════════════════════════════════════════
   第12部分：分类标签
   ════════════════════════════════════════════════════════════════ */

.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);
}


/* ════════════════════════════════════════════════════════════════
   第13部分：链接样式
   ════════════════════════════════════════════════════════════════ */

/* 正文链接悬停下划线 */
.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;
}

/* 外部链接 */
.skin-citizen .mw-body-content a.external {
    color: var(--color-link);
}


/* ════════════════════════════════════════════════════════════════
   第14部分：引用与脚注
   ════════════════════════════════════════════════════════════════ */

/* 块引用（经典台词区域可用） */
.skin-citizen .mw-body-content blockquote {
    border-left: 4px solid var(--color-progressive);
    background: var(--color-surface-2);
    border-radius: 0 8px 8px 0;
    padding: 14px 20px;
    margin: 12px 0;
    font-style: italic;
    color: var(--color-base);
}

/* 参考文献列表 */
.skin-citizen .mw-body-content .references {
    font-size: 0.85rem;
    color: var(--color-subtle);
}


/* ════════════════════════════════════════════════════════════════
   第15部分：Tabber 扩展标签页样式
   Citizen 原生 skinStyles 支持 Tabber/TabberNeue
   此处做配色覆盖
   ════════════════════════════════════════════════════════════════ */

.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: var(--color-surface-1);
    border: 1px solid var(--color-surface-3);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 16px;
}


/* ════════════════════════════════════════════════════════════════
   第16部分：Mermaid 图表样式（角色关系图/势力图）
   ════════════════════════════════════════════════════════════════ */

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


/* ════════════════════════════════════════════════════════════════
   第17部分：图片样式
   ════════════════════════════════════════════════════════════════ */

/* 图片边框与圆角 */
.skin-citizen .mw-body-content .thumb .thumbinner {
    border: 1px solid var(--color-surface-3);
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-surface-1);
}

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

/* 关闭图片悬停放大（保持稳定阅读体验） */
:root {
    --transform-image-hover: none;
}


/* ════════════════════════════════════════════════════════════════
   第18部分：页面宽度
   文档来源：Theming > Layout
   角色词条需要更宽空间容纳左Infobox+中内容+右TOC
   ════════════════════════════════════════════════════════════════ */

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

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


/* ════════════════════════════════════════════════════════════════
   第19部分：自定义角色/IP/境界/势力 标签色
   用于Infobox底部或正文中的分类标记
   ════════════════════════════════════════════════════════════════ */

/* 角色标签 */
.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;
}

/* IP标签 */
.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;
}


/* ════════════════════════════════════════════════════════════════
   第20部分：角色关系卡片
   用于词条内"人物关系"章节
   ════════════════════════════════════════════════════════════════ */

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

.skin-citizen .relation-card {
    background: var(--color-surface-1);
    border: 1px solid var(--color-surface-3);
    border-radius: 10px;
    padding: 12px;
    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: 60px;
    height: 60px;
    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;
}


/* ════════════════════════════════════════════════════════════════
   第21部分：经典台词区块
   ════════════════════════════════════════════════════════════════ */

.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;
    position: relative;
}

.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;
}


/* ════════════════════════════════════════════════════════════════
   第22部分：战绩统计条
   用于战绩表格上方的统计摘要
   ════════════════════════════════════════════════════════════════ */

.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;
}


/* ════════════════════════════════════════════════════════════════
   第23部分：剧透折叠区块
   ════════════════════════════════════════════════════════════════ */

.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;
}


/* ════════════════════════════════════════════════════════════════
   第24部分：移动端响应式
   Citizen 本身是移动端优先，此处做额外优化
   ════════════════════════════════════════════════════════════════ */

@media screen and (max-width: 1199px) {
    /* 移动端 Infobox 恢复正常文档流 */
    .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(2, 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: 1fr;
    }

    /* 小屏 Navbox 紧凑化 */
    .skin-citizen .mw-body-content .navbox-group {
        display: block;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--color-surface-3);
    }
}


/* ════════════════════════════════════════════════════════════════
   第25部分：打印样式
   ════════════════════════════════════════════════════════════════ */

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


/* ════════════════════════════════════════════════════════════════
   第26部分：毛玻璃效果微调
   文档来源：Recipes > Turn off frosted glass
   保留毛玻璃但降低模糊度，提升性能
   ════════════════════════════════════════════════════════════════ */

:root {
    --backdrop-filter-frosted-glass: blur(10px) saturate(120%);
}


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