/* ==========================================================================
   Sunny 主题 · 游戏/数据面板 公共样式（panel.css）
   --------------------------------------------------------------------------
   适用：我的原神 / 守望先锋 / 彩虹六号 / B站 / Steam 五个展示页

   使用方式：
     1) 页面引入本文件（放在各模块自己的 css 之前）
     2) 公共结构统一用 .pn-* 类名（名片 / 指标 / 工具栏 / 卡片墙 / 抽屉 / 空状态）
     3) 各模块只写自己独有的部分，主题色通过 --pn-theme 覆盖

   设计：玻璃拟态 + 主题色驱动 + 大数字信息层级
   所有变量都有默认值，未定义主题变量时也能独立工作
   尺寸取值统一走 0.25 / 0.5 / 0.75 / 1 / 1.5rem 这几档
   ========================================================================== */

/* ==========================================================================
   1. 设计令牌
   ========================================================================== */

/* 五个面板容器共用一套 --pn-* 令牌 */
.gs, .gs-dw,
.mb,
.ow, .ow-dw,
.r6, .r6-dw,
.st {
    --pn-bg:         var(--background, #ffffff);
    --pn-bg-soft:    var(--under-background, #f6f7fb);
    --pn-card:       var(--background, #ffffff);
    --pn-text:       var(--main, #2b3445);
    --pn-text-2:     var(--C, rgba(43, 52, 69, .68));
    --pn-text-3:     var(--B, rgba(43, 52, 69, .42));
    --pn-line:       var(--A, rgba(43, 52, 69, .12));
    --pn-line-soft:  var(--O, rgba(43, 52, 69, .06));
    --pn-fill:       var(--P, rgba(43, 52, 69, .05));

    --pn-radius:     var(--radius, 1rem);
    --pn-radius-sm:  calc(var(--pn-radius) * .5);
    --pn-radius-lg:  calc(var(--pn-radius) * 1.5);

    --pn-shadow:     0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -8px rgba(16, 24, 40, .10);
    --pn-shadow-lg:  0 2px 4px rgba(16, 24, 40, .05), 0 24px 48px -16px rgba(16, 24, 40, .18);
}

/* 各面板主题色 + 模块自有色板（唯一需要逐模块定义的东西） */
.gs, .gs-dw             { --pn-theme: var(--theme, #607ab3); }
.mb                         { --pn-theme: #fb7299; --pn-theme-deep: #e35d85;
                              --mb-green: #5ec95e; --mb-blue: #6aa8e8; --mb-gold: #d9a441; }
.ow, .ow-dw             { --pn-theme: #f99e1a; }
.r6, .r6-dw                 { --pn-theme: var(--theme, #f2913d); }
.st                         { --pn-theme: #1a9fff; --pn-theme-deep: #0b7ed0;
                              --st-on: #5ec95e; --st-gold: #d9a441; }

/* 派生色：深色版（原神 / 守望 / 彩虹六号按主题色算）/ 柔和版（五页通用） */
.gs, .gs-dw,
.ow, .ow-dw,
.r6, .r6-dw { --pn-theme-deep: color-mix(in srgb, var(--pn-theme) 82%, #101418); }

.gs, .gs-dw,
.mb,
.ow, .ow-dw,
.r6, .r6-dw,
.st { --pn-theme-soft: color-mix(in srgb, var(--pn-theme) 12%, transparent); }

/* 强调色：默认跟随主题色，模块可覆盖（如原神按元素色驱动） */
.gs, .gs-dw,
.mb,
.ow, .ow-dw,
.r6, .r6-dw,
.st {
    --pn-accent:       var(--pn-theme);
    --pn-accent-deep:  var(--pn-theme-deep);
    --pn-accent-soft:  var(--pn-theme-soft);
    /* 卡片主色（角色卡/干员卡），默认跟随强调色 */
    --pn-c:            var(--pn-accent);
    --pn-cd:           var(--pn-accent-deep);
    --pn-cs:           color-mix(in srgb, var(--pn-accent) 22%, transparent);
}

/* --------------------------------------------------------------------------
   旧变量别名：各模块 CSS 里的独有组件仍在用 --gs-* / --ow-* 等，
   统一指向 --pn-*，这样值只在这里定义一次，主题改一处全站生效。
   -------------------------------------------------------------------------- */
.gs, .gs-dw {
    --gs-bg: var(--pn-bg);           --gs-bg-soft: var(--pn-bg-soft);
    --gs-card: var(--pn-card);       --gs-text: var(--pn-text);
    --gs-text-2: var(--pn-text-2);   --gs-text-3: var(--pn-text-3);
    --gs-line: var(--pn-line);       --gs-line-soft: var(--pn-line-soft);
    --gs-fill: var(--pn-fill);       --gs-theme: var(--pn-theme);
    --gs-theme-soft: var(--pn-theme-soft);
    --gs-radius: var(--pn-radius);   --gs-radius-sm: var(--pn-radius-sm);
    --gs-radius-lg: var(--pn-radius-lg);
    --gs-shadow: var(--pn-shadow);   --gs-shadow-lg: var(--pn-shadow-lg);
}
.mb {
    --mb-bg: var(--pn-bg);           --mb-bg-soft: var(--pn-bg-soft);
    --mb-card: var(--pn-card);       --mb-text: var(--pn-text);
    --mb-text-2: var(--pn-text-2);   --mb-text-3: var(--pn-text-3);
    --mb-line: var(--pn-line);       --mb-line-soft: var(--pn-line-soft);
    --mb-fill: var(--pn-fill);       --mb-theme: var(--pn-theme);
    --mb-theme-deep: var(--pn-theme-deep);
    --mb-theme-soft: var(--pn-theme-soft);
    --mb-radius: var(--pn-radius);   --mb-radius-sm: var(--pn-radius-sm);
    --mb-radius-lg: var(--pn-radius-lg);
    --mb-shadow: var(--pn-shadow);   --mb-shadow-lg: var(--pn-shadow-lg);
}
.ow, .ow-dw {
    --ow-bg: var(--pn-bg);           --ow-bg-soft: var(--pn-bg-soft);
    --ow-card: var(--pn-card);       --ow-text: var(--pn-text);
    --ow-text-2: var(--pn-text-2);   --ow-text-3: var(--pn-text-3);
    --ow-line: var(--pn-line);       --ow-line-soft: var(--pn-line-soft);
    --ow-fill: var(--pn-fill);       --ow-theme: var(--pn-theme);
    --ow-theme-soft: var(--pn-theme-soft);
    --ow-radius: var(--pn-radius);   --ow-radius-sm: var(--pn-radius-sm);
    --ow-radius-lg: var(--pn-radius-lg);
    --ow-shadow: var(--pn-shadow);   --ow-shadow-lg: var(--pn-shadow-lg);
}
.r6, .r6-dw {
    --r6-bg: var(--pn-bg);           --r6-bg-soft: var(--pn-bg-soft);
    --r6-card: var(--pn-card);       --r6-text: var(--pn-text);
    --r6-text-2: var(--pn-text-2);   --r6-text-3: var(--pn-text-3);
    --r6-line: var(--pn-line);       --r6-line-soft: var(--pn-line-soft);
    --r6-fill: var(--pn-fill);       --r6-theme: var(--pn-theme);
    --r6-theme-soft: var(--pn-theme-soft);
    --r6-radius: var(--pn-radius);   --r6-radius-sm: var(--pn-radius-sm);
    --r6-radius-lg: var(--pn-radius-lg);
    --r6-shadow: var(--pn-shadow);   --r6-shadow-lg: var(--pn-shadow-lg);
}
.st {
    --st-bg: var(--pn-bg);           --st-bg-soft: var(--pn-bg-soft);
    --st-card: var(--pn-card);       --st-text: var(--pn-text);
    --st-text-2: var(--pn-text-2);   --st-text-3: var(--pn-text-3);
    --st-line: var(--pn-line);       --st-line-soft: var(--pn-line-soft);
    --st-fill: var(--pn-fill);       --st-theme: var(--pn-theme);
    --st-theme-deep: var(--pn-theme-deep);
    --st-theme-soft: var(--pn-theme-soft);
    --st-radius: var(--pn-radius);   --st-radius-sm: var(--pn-radius-sm);
    --st-radius-lg: var(--pn-radius-lg);
    --st-shadow: var(--pn-shadow);   --st-shadow-lg: var(--pn-shadow-lg);
}

/* ==========================================================================
   2. 基础重置
   ========================================================================== */
.gs, .mb, .ow, .r6, .st {
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
    color: var(--pn-text);
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: .01em;
    -webkit-font-smoothing: antialiased;
}

.gs *, .gs *::before, .gs *::after,
.mb *, .mb *::before, .mb *::after,
.ow *, .ow *::before, .ow *::after,
.r6 *, .r6 *::before, .r6 *::after,
.st *, .st *::before, .st *::after { box-sizing: border-box; }

.gs i, .gs em, .mb i, .mb em, .ow i, .ow em, .r6 i, .r6 em, .st i, .st em { font-style: normal; }
.gs b, .gs strong, .mb b, .mb strong, .ow b, .ow strong, .r6 b, .r6 strong, .st b, .st strong { font-weight: 700; }
.gs a, .mb a, .ow a, .r6 a, .st a { text-decoration: none; color: inherit; }

/* 数字统一等宽，避免跳动 */
.pn-metric-val, .pn-stat-v { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ==========================================================================
   3. 头部名片 Hero
   ========================================================================== */
.pn-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    margin-bottom: 1rem;
    background: var(--pn-card);
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-radius-lg);
    box-shadow: var(--pn-shadow);
}

/* 背景大图 + 遮罩渐变（可选，没有就不显示） */
.pn-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center 30%;
    filter: saturate(1.06);
    transform: scale(1.05);
}
.pn-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(105deg,
            var(--pn-card) 6%,
            color-mix(in srgb, var(--pn-card) 88%, transparent) 40%,
            color-mix(in srgb, var(--pn-card) 42%, transparent) 74%,
            transparent 100%),
        linear-gradient(180deg, transparent 35%,
            color-mix(in srgb, var(--pn-card) 92%, transparent) 100%);
}

/* 主题色光晕 */
.pn-hero-deco {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(58rem 22rem at 88% -18%,
            color-mix(in srgb, var(--pn-theme) 26%, transparent), transparent 70%),
        radial-gradient(30rem 16rem at 4% 108%,
            color-mix(in srgb, var(--pn-theme) 16%, transparent), transparent 70%);
}

.pn-hero-in {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
}

/* ---------- 头像 ---------- */
.pn-pfp { position: relative; flex: 0 0 auto; width: 92px; height: 92px; }

.pn-pfp-ring {
    position: absolute;
    inset: -.25rem;
    border-radius: 50%;
    opacity: .9;
    background: conic-gradient(from 140deg,
        var(--pn-accent),
        color-mix(in srgb, var(--pn-accent) 30%, transparent) 35%,
        var(--pn-accent) 60%,
        color-mix(in srgb, var(--pn-accent) 30%, transparent) 85%,
        var(--pn-accent));
    animation: pnSpin 14s linear infinite;
}

.pn-pfp-in {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--pn-card);
    border: 3px solid var(--pn-card);
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(16, 24, 40, .16);
}
.pn-pfp-in img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 头像加载失败时的文字兜底 */
.pn-pfp-txt {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: 2rem;
    font-weight: 800;
    color: var(--pn-accent-deep);
    background: linear-gradient(135deg, var(--pn-accent-soft), var(--pn-card));
}

/* 头像下方的等级徽章 */
.pn-pfp-lv {
    position: absolute;
    left: 50%;
    bottom: -.5rem;
    transform: translateX(-50%);
    padding: .1rem .5rem;
    font-size: .68rem;
    font-weight: 700;
    white-space: nowrap;
    color: #fff;
    background: var(--pn-accent-deep);
    border: 2px solid var(--pn-card);
    border-radius: 999px;
    letter-spacing: .02em;
}

/* ---------- 身份信息 ---------- */
.pn-id { flex: 1 1 16rem; min-width: 0; }

.pn-id-name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .01em;
}

.pn-id-uid {
    padding: .12rem .5rem;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--pn-text-3);
    background: var(--pn-fill);
    border: 1px solid var(--pn-line);
    border-radius: 999px;
}

.pn-id-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }

/* ---------- 信息胶囊 ---------- */
.pn-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .75rem;
    font-size: .74rem;
    font-weight: 600;
    color: var(--pn-text-2);
    background: var(--pn-fill);
    border: 1px solid var(--pn-line-soft);
    border-radius: 999px;
    backdrop-filter: blur(8px);
}
.pn-chip b { color: var(--pn-text); font-size: .82rem; }

.pn-chip-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pn-accent-deep);
}

.pn-chip.is-theme {
    background: var(--pn-theme-soft);
    border-color: color-mix(in srgb, var(--pn-theme) 22%, transparent);
    color: color-mix(in srgb, var(--pn-theme) 82%, var(--pn-text));
}

/* ==========================================================================
   4. 指标网格
   ========================================================================== */
.pn-metrics {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    background: color-mix(in srgb, var(--pn-card) 55%, transparent);
    border-top: 1px solid var(--pn-line-soft);
    backdrop-filter: blur(14px);
}

.pn-metric {
    padding: 1rem .5rem;
    text-align: center;
    border-right: 1px solid var(--pn-line-soft);
    transition: background .22s ease;
}
.pn-metric:last-child { border-right: 0; }
.pn-metric:hover { background: var(--pn-fill); }

.pn-metric-val {
    display: block;
    font-size: 1.42rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--pn-text);
}
.pn-metric-val small { color: var(--pn-text-3); font-size: .78rem; font-weight: 700; margin-left: .1rem; }

.pn-metric-key {
    display: block;
    margin-top: .25rem;
    font-size: .7rem;
    letter-spacing: .06em;
    color: var(--pn-text-3);
}

/* ==========================================================================
   5. 区块与工具栏
   ========================================================================== */
.pn-blk { margin-bottom: 1.25rem; }

.pn-blk-h {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
    font-size: .86rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--pn-text-2);
}
.pn-blk-h em {
    padding: .06rem .5rem;
    font-size: .68rem;
    font-weight: 700;
    color: #fff;
    background: var(--pn-accent);
    border-radius: 999px;
}

.pn-bar-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
    justify-content: space-between;
}

.pn-scroll-x {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: .5rem;
    padding: 0 .25rem;
}

.pn-sorts { display: flex; flex-wrap: wrap; gap: .25rem; }

/* 搜索框（B站 / Steam 共用）：放大镜图标内嵌在输入框左侧 */
.pn-search {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 180px;
    max-width: 320px;
}
.pn-search svg {
    position: absolute;
    left: .7rem;
    width: 16px;
    height: 16px;
    color: var(--pn-text-3);
    pointer-events: none;
}
.pn-search input {
    width: 100%;
    padding: .5rem .8rem .5rem 2.1rem;
    font-size: .84rem;
    font-family: inherit;
    color: var(--pn-text);
    background: var(--pn-card);
    border: 1px solid var(--pn-line);
    border-radius: 999px;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.pn-search input::placeholder { color: var(--pn-text-3); }
.pn-search input:focus {
    border-color: color-mix(in srgb, var(--pn-theme) 50%, transparent);
    box-shadow: 0 0 0 3px var(--pn-theme-soft);
}

/* 排序按钮（文字型） */
.pn-sbtn {
    padding: .38rem .75rem;
    font-size: .76rem;
    font-weight: 600;
    color: var(--pn-text-3);
    cursor: pointer;
    user-select: none;
    border-radius: 999px;
    transition: color .18s ease, background .18s ease;
}
.pn-sbtn:hover { background: var(--pn-fill); color: var(--pn-text); }
.pn-sbtn.is-on { background: var(--pn-theme-soft); color: var(--pn-theme); }

/* 筛选按钮（带计数徽标） */
.pn-fbtn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .72rem;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--pn-text-2);
    background: var(--pn-fill);
    border: 1px solid var(--pn-line);
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    transition: all .18s ease;
}
.pn-fbtn:hover { border-color: var(--pn-theme); color: var(--pn-text); }
.pn-fbtn.is-on {
    color: #fff;
    background: var(--pn-accent);
    border-color: var(--pn-accent);
}
.pn-fbtn i {
    padding: 0 .25rem;
    font-size: .68rem;
    color: var(--pn-text-3);
    background: var(--pn-line-soft);
    border-radius: 999px;
}
.pn-fbtn.is-on i { background: rgba(255, 255, 255, .22); color: #fff; }

/* 数据更新时间 */
.pn-upd {
    display: block;
    margin: .5rem 0 0;
    font-size: .74rem;
    color: var(--pn-text-3);
}

/* ==========================================================================
   6. 卡片墙（角色 / 干员 / 英雄）
   ========================================================================== */
.pn-roster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
}

.pn-pc {
    position: relative;
    padding: 0;
    overflow: hidden;
    background: var(--pn-card);
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-radius);
    box-shadow: var(--pn-shadow);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pn-pc:hover {
    transform: translateY(-.25rem);
    border-color: color-mix(in srgb, var(--c, var(--pn-c)) 45%, var(--pn-line));
    box-shadow: var(--pn-shadow-lg);
}
.pn-pc:focus-visible { outline: 2px solid var(--c, var(--pn-c)); outline-offset: 2px; }
.pn-pc[hidden] { display: none; }
.pn-pc.is-hide { display: none; }   /* 想保留淡入动画的页面用它代替 hidden */

.pn-pc-art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: linear-gradient(160deg, var(--cs, var(--pn-cs)), var(--pn-fill));
}
.pn-pc-art img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}
.pn-pc:hover .pn-pc-art img { transform: scale(1.05); }

/* 图片加载失败时的文字兜底 */
.pn-pc-fallback {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
    opacity: .5;
    color: var(--c, var(--pn-c));
}

.pn-pc-body { padding: .75rem; }

.pn-pc-name { font-size: 1rem; font-weight: 800; letter-spacing: .01em; }

.pn-pc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-top: .25rem;
    font-size: .7rem;
    color: var(--pn-text-3);
    flex-direction: column;
}

.pn-pc-score { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; }
.pn-pc-score-t { flex: 1; height: 5px; overflow: hidden; background: var(--pn-fill); border-radius: 999px; }
.pn-pc-score-f {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--cs, var(--pn-cs)), var(--c, var(--pn-c)));
    border-radius: 999px;
    transition: width .5s ease;
}

/* ==========================================================================
   7. 统计小格
   ========================================================================== */
.pn-stat {
    padding: .75rem .5rem;
    text-align: center;
    background: var(--pn-fill);
    border: 1px solid transparent;
    border-radius: var(--pn-radius-sm);
    transition: transform .2s ease, border-color .2s ease;
}
.pn-stat-k { display: block; font-size: .7rem; letter-spacing: .03em; color: var(--pn-text-3); }
.pn-stat-v { display: block; margin-top: .25rem; font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; }

/* 高亮小格：跟随主色（--c/--cd），没有主色时走 --pn-accent。
   主色来源：① 祖先元素内联 --c（卡片、分区）；② 抽屉由 PN.cardPanel 的
   syncDrawerTheme() 从被点卡片搬过来；③ 模块自己的桥接（原神 .gs-dw { --c: var(--el) }） */
.pn-stat.is-hl {
    background: color-mix(in srgb, var(--c, var(--pn-accent)) 8%, var(--pn-bg-soft));
    border-color: color-mix(in srgb, var(--c, var(--pn-accent)) 30%, var(--pn-line));
}
.pn-stat.is-hl .pn-stat-v { color: var(--cd, var(--pn-accent-deep)); }

/* 次级高亮（守望先锋的治疗量等，金色）：只改配色，不参与主色 */
.pn-stat.is-hl2 {
    background: color-mix(in srgb, #e8a01f 8%, var(--pn-bg-soft));
    border-color: color-mix(in srgb, #e8a01f 30%, var(--pn-line));
}
.pn-stat.is-hl2 .pn-stat-v { color: #e8a01f; }



/* 生涯指标：胜 / 负高亮 */
.pn-stat.is-win {
    background: color-mix(in srgb, var(--r6-win) 8%, var(--pn-bg-soft));
    border-color: color-mix(in srgb, var(--r6-win) 30%, var(--pn-line));
}
.pn-stat.is-win .pn-stat-v { color: var(--r6-win); }
.pn-stat.is-lose {
    background: color-mix(in srgb, var(--r6-lose) 8%, var(--pn-bg-soft));
    border-color: color-mix(in srgb, var(--r6-lose) 30%, var(--pn-line));
}
.pn-stat.is-lose .pn-stat-v { color: var(--r6-lose); }



/* ==========================================================================
   7.5 生涯网格 / 职责卡 / 角标（守望先锋 · 彩虹六号 共用）
   ========================================================================== */

/* 头像下方的定级 / 段位徽章 */
.pn-pfp-end {
    position: absolute;
    left: 50%;
    bottom: -.5rem;
    transform: translateX(-50%);
    padding: .1rem .5rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
    color: #fff;
    background: var(--pn-theme);
    border: 2px solid var(--pn-card);
    border-radius: 999px;
}

/* 名字后面的小标签（编号 / 平台 / 代号） */
.pn-id-tag {
    padding: .12rem .5rem;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--pn-text-3);
    background: var(--pn-fill);
    border: 1px solid var(--pn-line);
    border-radius: 999px;
}

/* 生涯数据网格 */
.pn-statgrid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .75rem;
    margin-bottom: 1.25rem;
}

/* 职责 / 定位进度卡 */
.pn-roles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.pn-role {
    position: relative;
    overflow: hidden;
    padding: 1rem;
    background: var(--pn-card);
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-radius);
}
.pn-role::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--c, var(--pn-c));
}

.pn-role-h { display: flex; align-items: center; justify-content: space-between; }
.pn-role-name { font-size: 1rem; font-weight: 800; color: var(--c, var(--pn-c)); }
.pn-role-time { font-size: .74rem; color: var(--pn-text-3); }

.pn-role-track {
    height: 6px;
    margin: .5rem 0;
    overflow: hidden;
    background: var(--cs, var(--pn-cs));
    border-radius: 999px;
}
.pn-role-fill {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--cd, var(--pn-cd)), var(--c, var(--pn-c)));
    border-radius: 999px;
    transition: width .6s ease;
}

.pn-role-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: .74rem;
    color: var(--pn-text-2);
}
.pn-role-meta b { color: var(--pn-text); }

/* 卡片左上角角标（定位 / 攻防方） */
.pn-pc-tag {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 2;
    padding: .125rem .5rem;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #fff;
    background: var(--c, var(--pn-c));
    border-radius: .375rem;
}

/* 卡片底部数据行 */
.pn-pc-kda {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
}
.pn-pc-kda b { font-size: .76rem; font-weight: 700; color: var(--pn-text-2); white-space: nowrap; }

/* 抽屉内的统计网格（守望 · 彩虹六号共用） */
.pn-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
    gap: .45rem;
}


/* 标签组（战术定位 / 关键词） */
.pn-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.pn-tags > span {
    padding: .25rem .75rem;
    font-size: .74rem;
    font-weight: 600;
    color: var(--pn-text-2);
    background: var(--pn-fill);
    border: 1px solid var(--pn-line-soft);
    border-radius: 999px;
}

/* ==========================================================================
   8. 抽屉（详情面板）
   ========================================================================== */
.pn-mask {
    position: fixed;
    inset: 0;
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    background: rgba(10, 14, 22, .5);
    backdrop-filter: blur(2px);
    transition: opacity .25s ease, visibility .25s ease;
}
.pn-mask.is-on { opacity: 1; visibility: visible; }

.pn-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    width: min(560px, 100vw);
    max-width: 100%;
    padding: 0;
    box-sizing: border-box;
    color: var(--pn-text);
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: .01em;
    background: var(--pn-bg);
    border-left: 1px solid var(--pn-line);
    box-shadow: -20px 0 60px -20px rgba(16, 24, 40, .3);
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.32, .72, .35, 1);
    will-change: transform;
}
.pn-drawer i, .pn-drawer em { font-style: normal; }
.pn-drawer b, .pn-drawer strong { font-weight: 700; }
.pn-drawer a { text-decoration: none; color: inherit; }
/* 开合状态统一用 .is-on（与筛选按钮、遮罩保持一致） */
.pn-drawer.is-on { transform: translateX(0); }

/* 抽屉头：头像 + 名称 + 标签（原神用大图头，不走这里） */
.pn-dw-head {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    border-bottom: 1px solid var(--pn-line);
}

.pn-dw-ava {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    overflow: hidden;
    background: var(--pn-fill);
    border-radius: .75rem;
}
.pn-dw-ava img { display: block; width: 100%; height: 100%; object-fit: cover; }

.pn-dw-nm { font-size: 1.15rem; font-weight: 800; }
.pn-dw-en { font-size: .74rem; color: var(--pn-text-3); }

.pn-dw-role {
    display: inline-block;
    margin-top: .25rem;
    padding: .125rem .5rem;
    font-size: .7rem;
    font-weight: 700;
    color: #fff;
    background: var(--c, var(--pn-accent));
    border-radius: .375rem;
}

.pn-dw-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.25rem 2rem;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.pn-dw-close {
    position: absolute;
    top: .75rem; right: .75rem;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 1rem;
    line-height: 1;
    color: var(--pn-text-2);
    background: var(--pn-fill);
    border: 1px solid var(--pn-line);
    border-radius: 50%;
    cursor: pointer;
    transition: all .18s ease;
}
.pn-dw-close:hover { background: var(--pn-line); color: var(--pn-text); transform: rotate(90deg); }

/* ==========================================================================
   9. 空状态
   ========================================================================== */
.pn-empty {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--pn-text-3);
    background: var(--pn-card);
    border: 1px dashed var(--pn-line);
    border-radius: var(--pn-radius-lg);
}
.pn-empty-ico { margin-bottom: .5rem; font-size: 2rem; opacity: .55; color: var(--pn-theme); }
.pn-empty-t { margin-top: .5rem; font-size: .95rem; font-weight: 700; color: var(--pn-text-2); }
.pn-empty-d { margin-top: .25rem; font-size: .82rem; line-height: 1.7; }

/* ==========================================================================
   10. 分页器
   --------------------------------------------------------------------------
   结构（由 PN.pagerHtml 生成，B站 / Steam 共用）：
     <div class="pn-pager">
       <button data-pg="2">‹ 上一页</button>
       <button data-pg="1">1</button>
       <span class="is-on">2</span>
       <span class="pn-pager-ell">…</span>
       <button data-pg="9">9</button>
       <span class="is-dis">下一页 ›</span>
     </div>
   ========================================================================== */
.pn-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: 1.5rem;
}

/* 按钮 / 链接 / 纯文本页码统一成同一颗胶囊 */
.pn-pager > button,
.pn-pager > a,
.pn-pager > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 .75rem;
    box-sizing: border-box;
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1;
    color: var(--pn-text-2);
    text-decoration: none;
    background: var(--pn-card);
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-radius-sm);
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.pn-pager > button:hover:not(:disabled),
.pn-pager > a:hover {
    color: var(--pn-theme);
    border-color: var(--pn-theme);
    background: var(--pn-theme-soft);
}
.pn-pager > .is-on {
    color: #fff;
    background: var(--pn-theme);
    border-color: var(--pn-theme);
    cursor: default;
}
.pn-pager > .is-dis,
.pn-pager > button:disabled {
    color: var(--pn-text-3);
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}
.pn-pager > .pn-pager-ell {
    min-width: 1.5rem;
    padding: 0;
    color: var(--pn-text-3);
    background: none;
    border-color: transparent;
    cursor: default;
}
.pn-pager-info { font-size: .78rem; color: var(--pn-text-3); }

/* ==========================================================================
   11. 动画与响应式
   ========================================================================== */
@keyframes pnSpin { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
    .pn-hero-in { gap: 1rem; padding: 1.25rem; }
    .pn-pfp { width: 76px; height: 76px; }
    .pn-id-name { font-size: 1.25rem; }
    .pn-roster { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .75rem; }
    .pn-statgrid { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
    .pn-roles { grid-template-columns: 1fr; }
    .pn-search { flex: 1 1 100%; max-width: none; }
    .pn-id-name > span { font-size: 1.2rem; }
    .pn-metric { flex: 1 1 50%; border-bottom: 1px solid var(--pn-line-soft); }
    .pn-drawer { width: 100vw; }
}

@media (prefers-reduced-motion: reduce) {
    .pn-pfp-ring { animation: none; }
    .pn-pc, .pn-pc-art img, .pn-drawer, .pn-mask, .pn-metric, .pn-stat { transition: none; }
}