/* =========================================================
   英雄榜 (Armory) 样式
   风格与站内 quest_race / item_generator 一致: 浅色卡片 + 圆角 + 轻阴影
   ========================================================= */

.arm-wrapper {
    max-width: 1080px;
    margin: 2em auto 3em;
    padding: 0 15px;
}

.arm-title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 4px;
    letter-spacing: 6px;
    color: #2c3e50;
}

.arm-subtitle {
    text-align: center;
    color: #97a3b0;
    font-size: 12px;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.arm-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    padding: 18px;
    margin-bottom: 18px;
}

/* ---------- 搜索 ---------- */
.arm-search-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.arm-input {
    flex: 1;
    min-width: 200px;
    padding: 8px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
}

.arm-input:focus {
    border-color: #3498db;
}

.arm-select {
    padding: 8px 10px;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    outline: none;
}

.arm-btn {
    padding: 8px 22px;
    background: #3498db;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
}

.arm-btn:hover {
    background: #2980b9;
}

.arm-mine {
    margin-top: 12px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.arm-mine-label {
    color: #888;
    font-size: 13px;
}

.arm-chip-btn {
    border: 1px solid #3498db;
    color: #3498db;
    background: #fff;
    border-radius: 14px;
    padding: 3px 12px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.arm-chip-btn:hover {
    background: #3498db;
    color: #fff;
}

/* ---------- 消息 ---------- */
.arm-msg:empty {
    display: none;
}

.arm-loading,
.arm-error {
    text-align: center;
    padding: 18px;
    border-radius: 10px;
    margin-bottom: 18px;
}

.arm-loading {
    background: #eef6fc;
    color: #2980b9;
}

.arm-error {
    background: #fdeaea;
    color: #c0392b;
}

/* ---------- 状态条 ---------- */
.arm-statusbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.arm-badge {
    display: inline-block;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 12px;
    background: #f2f2f2;
    color: #666;
}

.arm-badge-online {
    background: #e8f8f0;
    color: #27ae60;
    font-weight: bold;
}

.arm-badge-offline {
    background: #f2f2f2;
    color: #888;
    font-weight: bold;
}

.arm-badge-edit {
    background: #eaf4fd;
    color: #2980b9;
    font-weight: bold;
}

.arm-badge-muted {
    background: #fdf6e3;
    color: #b58900;
}

/* ---------- 角色信息 ---------- */
.arm-char-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    flex-wrap: wrap;
    border-bottom: 1px dashed #e5e5e5;
    padding-bottom: 14px;
    margin-bottom: 16px;
}

.arm-char-texts {
    flex: 1;
    min-width: 300px;
}

/* ---------- 扫码分享卡片 ---------- */
.arm-share-card {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 16px 12px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #d8e7f7;
    box-shadow: 0 2px 12px rgba(52, 152, 219, 0.12);
    transition: all 0.25s;
    position: relative;
    overflow: hidden;
}

.arm-share-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.08), rgba(142, 68, 173, 0.08));
    pointer-events: none;
}

.arm-share-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(52, 152, 219, 0.25);
}

.arm-share-title {
    font-size: 14px;
    font-weight: bold;
    color: #2c3e50;
}

#arm-qr-canvas {
    width: 164px;
    height: 164px;
    border-radius: 8px;
    background: #fff;
}

.arm-share-copy {
    border: none;
    background: linear-gradient(135deg, #3498db, #8e44ad);
    color: #fff;
    font-size: 13px;
    padding: 6px 18px;
    border-radius: 14px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.arm-share-copy:hover {
    opacity: 0.88;
}

.arm-share-note {
    font-size: 11px;
    color: #95a5a6;
}

/* 角色名: 职业横幅背景 (images/avatar/{职业}.png, 与角色简介页同源)
   - 固定高度 + 按横幅原始比例 119:24 设最小宽度, 短名字时横幅也完整展示不挤压
   - 宽度 = max(名字宽度, 横幅完整宽度), 文字居中, 白字 + 描边阴影 */
.arm-char-name {
    display: inline-block;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    color: #fff;
    text-shadow: 0 0 3px #000, 0 1px 2px #000, 0 0 8px rgba(0, 0, 0, 0.9);
    border-radius: 3px;
    text-align: center;
    white-space: nowrap;
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 8px;
    letter-spacing: 1px;
    height: 44px;
    line-height: 44px;
    min-width: 218px; /* 44px × 119/24 ≈ 218, 横幅完整展示的最小宽度 */
    padding: 0 24px;
}

.arm-char-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.arm-chip {
    display: inline-block;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 12px;
    background: #f2f2f2;
    color: #555;
}

.arm-chip-section {
    background: #f4ecf7;
    color: #8e44ad;
}

.arm-chip-gc {
    background: #eef6fc;
    color: #2980b9;
}

/* ---------- 吃药情况 (材料使用) ---------- */
.arm-mats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 10px;
}

/* ---------- 抗性 (客户端信息面板第2页) ---------- */
.arm-resists {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 8px;
}

.arm-chip-res {
    font-variant-numeric: tabular-nums;
}

.arm-mats-label {
    font-size: 13px;
    color: #888;
}

.arm-chip-mat {
    background: #e8f8f0;
    color: #1e8e5a;
    font-weight: bold;
}

/* ---------- 颜色ID切换按钮 ---------- */
.arm-secid-btn {
    border: 1px dashed #8e44ad;
    color: #8e44ad;
    background: #fff;
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.arm-secid-btn:hover {
    background: #8e44ad;
    color: #fff;
}

/* 属性面板: 细线网格表格样式 (3 列, 桌面/移动自适应不溢出) */
.arm-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin: 4px 0 6px;
}

.arm-chip-stat b {
    font-weight: bold;
    color: #2c3e50;
    font-variant-numeric: tabular-nums;
}

/* ---------- 纸娃娃 ---------- */
.arm-paperdoll {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 22px;
    margin-bottom: 22px;
}

/* 分区小标题 (装备 / 单元) */
.arm-sec-title {
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 6px;
    color: #97a3b0;
    text-align: center;
    padding-bottom: 6px;
    border-bottom: 1px solid #eef1f5;
    margin-bottom: 2px;
    user-select: none;
}

.arm-pd-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 236px;
    flex-shrink: 0;
}

.arm-pd-figure {
    text-align: center;
    min-width: 200px;
    padding: 16px 10px 10px;
    position: relative;
}

/* 立绘底座光晕 */
.arm-pd-figure::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%);
    width: 240px;
    height: 200px;
    background: radial-gradient(ellipse at 50% 70%, rgba(52, 152, 219, 0.12), rgba(142, 68, 173, 0.05) 55%, transparent 72%);
    pointer-events: none;
}

.arm-figure-img {
    max-height: 380px;
    max-width: 100%;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
}

/* 立绘图与名字严格上下排列 (block 防止 inline 并排) */
.arm-figure-img {
    display: block;
    margin: 0 auto;
}

.arm-figure-name {
    display: block;
    width: fit-content;
    margin: 10px auto 0;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 2px;
}

.arm-figure-class {
    font-size: 12px;
    letter-spacing: 1px;
    color: #97a3b0;
    margin-top: 3px;
}

.arm-pd-note {
    font-size: 12px;
    color: #999;
    text-align: center;
}

/* ---- 人物形象: 穿戴预览 (3D 舞台; 服务端合成几何, 见 js/armory.js armRenderFigure) ----
   底板 = 白底, 无任何背景色。蜂窝平时不显示, **电流弧扫过时才浮现**, 组成完全随机 (前端现算)。
   节奏要"整齐不吵" (用户: "蜂窝变化有点乱"):
     · 三层**同方向**(都是左→右), 共用同一个时长 (--hex-dur), 相位各差 1/3 周期 (animation-delay 负值)
       ⇒ 同一时刻基本只有一道弧在场, 蜂窝一簇一簇按顺序出现, 不是三处同时乱闪
     · 弧很窄 (30% 宽、短尾) ⇒ 一次只点亮一簇左右
     · 图案每 8s 只换**一层** (armHexTiles 轮着来) ⇒ 组成在变, 但不会整屏一起跳
   图案由 js/armory.js armHexTileData() 现算 (梦幻之星 OL 全息青蓝), 经 --hex-a/b/c 喂进来;
   角色 canvas 永远最上层 (z-index:1)。 */
.arm-figure-stage {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    min-height: 300px;
    padding: 4px 4px 0;
}
/* 装饰层: 装第二、三组蜂窝 (由 armory.js 在 3D 渲染完成后插入; 纯装饰, 不接收事件) */
.arm-figure-stage .arm-fx {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
/* 三层共用的形状 / 遮罩外形 (图案与相位各自给) */
.arm-figure-stage::before,
.arm-figure-stage::after,
.arm-figure-stage .arm-fx::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-size: 486px 280.6px;
    background-repeat: repeat;
    -webkit-mask-image: linear-gradient(100deg, rgba(0, 0, 0, 0) 8%, rgba(0, 0, 0, 0.40) 30%, #000 44% 58%, rgba(0, 0, 0, 0.22) 72%, rgba(0, 0, 0, 0) 84%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 16%, #000 84%, rgba(0, 0, 0, 0) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 10%, #000 90%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-size: 30% 260%, 100% 100%, 100% 100%;
    -webkit-mask-repeat: no-repeat, no-repeat, no-repeat;
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(100deg, rgba(0, 0, 0, 0) 8%, rgba(0, 0, 0, 0.40) 30%, #000 44% 58%, rgba(0, 0, 0, 0.22) 72%, rgba(0, 0, 0, 0) 84%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 16%, #000 84%, rgba(0, 0, 0, 0) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 10%, #000 90%, rgba(0, 0, 0, 0) 100%);
    mask-size: 30% 260%, 100% 100%, 100% 100%;
    mask-repeat: no-repeat, no-repeat, no-repeat;
    mask-composite: intersect;
    animation-name: armHexF;
    animation-duration: var(--hex-dur, 9s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.arm-figure-stage::before { background-image: var(--hex-a, none); animation-delay: 0s; }
.arm-figure-stage::after {
    background-image: var(--hex-b, none);
    -webkit-mask-image: linear-gradient(100deg, rgba(0, 0, 0, 0) 8%, rgba(0, 0, 0, 0.40) 30%, #000 44% 58%, rgba(0, 0, 0, 0.22) 72%, rgba(0, 0, 0, 0) 84%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 16%, #000 84%, rgba(0, 0, 0, 0) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 10%, #000 90%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(100deg, rgba(0, 0, 0, 0) 8%, rgba(0, 0, 0, 0.40) 30%, #000 44% 58%, rgba(0, 0, 0, 0.22) 72%, rgba(0, 0, 0, 0) 84%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 16%, #000 84%, rgba(0, 0, 0, 0) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 10%, #000 90%, rgba(0, 0, 0, 0) 100%);
    animation-delay: calc(var(--hex-dur, 9s) / -3);      /* 相位差 1/3 周期 */
}
.arm-figure-stage .arm-fx::before {
    background-image: var(--hex-c, none);
    animation-delay: calc(var(--hex-dur, 9s) / -1.5);    /* 相位差 2/3 周期 */
}
@keyframes armHexF {
    0%   { -webkit-mask-position: -110% 0%, 0 0, 0 0; mask-position: -110% 0%, 0 0, 0 0; }
    100% { -webkit-mask-position: 230% 0%, 0 0, 0 0;  mask-position: 230% 0%, 0 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
    .arm-figure-stage::before, .arm-figure-stage::after,
    .arm-figure-stage .arm-fx::before { animation: none; }
}
/* 角色内容永远压在底板之上 */
.arm-figure-stage > * { position: relative; z-index: 1; }
.arm-figure-stage > .arm-fx { z-index: 0; }
/* 画布按 440×560 渲染, 这里只缩显示尺寸 (拖拽按指针位移算, 缩放不影响操作) */
.arm-figure-stage .i3d-canvas {
    width: auto;
    max-width: 100%;
    height: 360px;
    display: block;
    cursor: grab;
    touch-action: none;
}
.arm-figure-stage .i3d-canvas:active { cursor: grabbing; }
.arm-figure-stage .i3d-loading,
.arm-figure-stage .i3d-none {
    color: #9ec6e0;
    font-size: 13px;
    padding: 40px 10px;
    text-align: center;
}
/* 回退的静态立绘是透明底 PNG, 放进深底也对; 若哪张带白底则让它融进面板 */
.arm-figure-stage .arm-figure-img { max-height: 300px; }

.arm-figure-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: center;
    margin-top: 6px;
}
.arm-figure-hint { font-size: 11px; color: #7f8c8d; }
.arm-figure-anim {
    font-size: 12px;
    line-height: 1.5;
    padding: 2px 10px;
    border: 1px solid #3498db;
    border-radius: 12px;
    background: #eef6fd;
    color: #2471a3;
    cursor: pointer;
}
.arm-figure-anim:hover { background: #d6ebfb; }
.arm-figure-note {
    flex-basis: 100%;
    font-size: 11px;
    color: #b58900;
    line-height: 1.6;
}

.arm-slot {
    border: 1px solid #e8ecf2;
    border-radius: 10px;
    padding: 9px 11px;
    min-height: 72px;
    background: #fdfdfe;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.arm-slot-filled {
    background: #fff;
    cursor: pointer;
}

.arm-slot-filled:hover {
    border-color: #a9c9e8;
    box-shadow: 0 4px 14px rgba(52, 152, 219, 0.16);
    transform: translateY(-2px);
}

.arm-slot-label {
    font-size: 11px;
    letter-spacing: 1px;
    color: #97a3b0;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
}

.arm-slot-name {
    font-weight: bold;
    font-size: 14px;
    word-break: break-all;
}

.arm-slot-desc {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 装备参数 (打磨/属性/强化/玛古四维; 2026-10-21): 名字下方一行, 过长省略 */
.arm-slot-stats {
    font-size: 11px;
    line-height: 1.45;
    color: #4f7f93;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.arm-slot-empty {
    color: #ccc;
    font-size: 13px;
    text-align: center;
    line-height: 44px;
}

/* ---------- 背包 ---------- */
.arm-inv-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    font-size: 15px;
    font-weight: bold;
    color: #2c3e50;
    letter-spacing: 2px;
    margin: 4px 0 12px;
    padding-top: 16px;
    border-top: 1px solid #eef1f5;
}

.arm-inv-count {
    font-size: 12px;
    font-weight: bold;
    color: #3498db;
    background: #eef6fc;
    border-radius: 10px;
    padding: 1px 10px;
}

.arm-inv-hint {
    margin-left: auto;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0;
    color: #97a3b0;
}

.arm-inv-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.arm-cell {
    position: relative;
    border: 1px solid #eee;
    border-left: 3px solid #ccc;
    border-radius: 8px;
    padding: 8px 8px;
    min-height: 58px;
    background: #fafafa;
    cursor: pointer;
    transition: all 0.15s;
}

.arm-cell:hover {
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.arm-cell-empty {
    cursor: default;
    background: repeating-linear-gradient(45deg, #fafafa, #fafafa 6px, #f5f5f5 6px, #f5f5f5 12px);
}

.arm-cell-empty:hover {
    box-shadow: none;
    background: repeating-linear-gradient(45deg, #fafafa, #fafafa 6px, #f5f5f5 6px, #f5f5f5 12px);
}

.arm-cell-equipped {
    outline: 2px solid #27ae60;
    outline-offset: -2px;
    background: #f0faf5;
}

.arm-cell-name {
    font-size: 12px;
    font-weight: bold;
    word-break: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.arm-cell-sub {
    font-size: 11px;
    color: #999;
    margin-top: 3px;
}

.arm-cell-badge {
    position: absolute;
    top: -6px;
    right: 5px;
    background: #27ae60;
    color: #fff;
    font-size: 10px;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 8px;
}

/* ---------- 小屏适配 ---------- */
@media (max-width: 860px) {
    .arm-wrapper {
        margin: 1em auto 2em;
        padding: 0 8px;
    }

    .arm-card {
        padding: 12px;
    }

    /* 角色头: 竖向排布, 分享卡居中在下 */
    .arm-char-head {
        flex-direction: column;
        align-items: center;
    }

    .arm-char-texts {
        width: 100%;
        min-width: 0;
    }

    .arm-stats {
        max-width: none;
        width: 100%;
    }

    .arm-stat b {
        font-size: 13px;
    }

    /* 纸娃娃: 立绘置顶, 槽位 2×2 网格, 缩短纵向长度 */
    .arm-paperdoll {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .arm-pd-figure {
        order: -1;
        min-width: 0;
        padding: 0;
    }

    .arm-figure-img {
        max-height: 280px;
    }

    /* 人物形象 (穿戴预览) 在窄屏也压一压高度, 别把槽位挤到看不见 */
    .arm-figure-stage { min-height: 240px; }
    .arm-figure-stage .i3d-canvas { height: 280px; }

    .arm-pd-col {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px;
        width: 100%;
        max-width: 400px;
        flex-shrink: 0;
    }

    /* 分区标题在 2×2 网格中占满整行 */
    .arm-sec-title {
        grid-column: 1 / -1;
        margin-bottom: 0;
    }

    .arm-pd-note {
        grid-column: 1 / -1;
    }

    .arm-slot {
        min-height: 64px;
    }

    #arm-qr-canvas {
        width: 148px;
        height: 148px;
    }

    .arm-inv-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }

    .arm-cell {
        min-height: 54px;
        padding: 6px;
    }

    .arm-cell-sub {
        font-size: 10px;
    }
}

@media (max-width: 400px) {
    .arm-char-name {
        min-width: 0;
        width: 100%;
    }

    .arm-slot-name {
        font-size: 13px;
    }

    .arm-slot-desc {
        font-size: 11px;
    }
}

/* ==================== 外观参数行 (属性面板下方) ==================== */
.arm-appear {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 8px;
}

.arm-ap-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    background: #f4f7fb;
    border: 1px solid #e4eaf2;
    border-radius: 12px;
    font-size: 12px;
    color: #5a6a80;
    white-space: nowrap;
}

.arm-ap-item b {
    color: #2d3748;
    font-variant-numeric: tabular-nums;
}

.arm-ap-swatch {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.12);
    flex: none;
}

/* 更换外观: 预览提示 chip + 弹窗里的下拉行 */
.arm-ap-preview {
    background: #fff8e6;
    border-color: #ffe0a3;
    color: #a9761a;
}

.arm-ap-preview button {
    margin-left: 2px;
    padding: 1px 7px;
    font-size: 11px;
    color: #a9761a;
    background: #fff;
    border: 1px solid #ffd88a;
    border-radius: 9px;
    cursor: pointer;
}

.arm-ap-preview button:hover {
    background: #fff2d6;
}

.arm-ap-editor {
    text-align: left;
    font-size: 14px;
}

.arm-ap-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 4px;
}

.arm-ap-row-label {
    width: 46px;
    color: #5a6a80;
    flex: none;
}

.arm-ap-row-none {
    color: #aab3c0;
    font-size: 12px;
}

.arm-ap-sel {
    flex: 1;
    padding: 5px 8px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    font-size: 14px;
}

/* 角色头部公会 chip */
.arm-chip-guild {
    background: #f0f4ff;
    color: #4c6ef5;
    border: 1px solid #dbe4ff;
    text-decoration: none;
}

.arm-chip-guild:hover {
    background: #e3eaff;
}

/* ==================== 公会面板 ==================== */
.arm-guild {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #eef1f5;
}

.arm-gv-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.arm-gv-flag {
    width: 64px;
    height: 64px;
    image-rendering: pixelated;
    border: 1px solid #d7dee8;
    border-radius: 6px;
    background: #f1f4f8;
    flex: none;
    box-shadow: 0 1px 3px rgba(30, 50, 90, 0.12);
}

.arm-gv-info {
    min-width: 0;
}

.arm-gv-name-line {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.arm-gv-title {
    font-size: 16px;
    color: #2d3748;
}

.arm-gv-rank {
    font-size: 12px;
    color: #b7791f;
    font-weight: bold;
}

.arm-gv-meta {
    font-size: 12px;
    color: #8a94a6;
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
}

.arm-gv-list {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 6px;
}

.arm-gv-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #f8fafc;
    border: 1px solid #e8edf3;
    border-radius: 8px;
    min-width: 0;
}

.arm-gv-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e0;
    flex: none;
}

.arm-gv-on .arm-gv-dot {
    background: #34d399;
    box-shadow: 0 0 4px #34d399;
}

.arm-gv-name {
    color: #2b6cb0;
    text-decoration: none;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.arm-gv-name:hover {
    text-decoration: underline;
}

.arm-gv-badge {
    font-size: 11px;
    border-radius: 4px;
    padding: 1px 5px;
    flex: none;
    line-height: 1.4;
}

.arm-gv-master {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fcd34d;
}

.arm-gv-admin {
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid #7dd3fc;
}

.arm-gv-state {
    font-size: 11px;
    color: #a0aec0;
    flex: none;
}

.arm-gv-on .arm-gv-state {
    color: #059669;
}

/* 移动端 */
@media (max-width: 860px) {
    .arm-gv-list {
        grid-template-columns: 1fr;
    }
}

/* ==================== 公会查询页 (guild.php) ==================== */
.gld-list-head {
    font-size: 15px;
    font-weight: bold;
    color: #2d3748;
    margin-bottom: 12px;
}

.gld-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
}

.gld-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: #f8fafc;
    border: 1px solid #e8edf3;
    border-radius: 10px;
    text-decoration: none;
    min-width: 0;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.gld-cell:hover {
    border-color: #a3bffa;
    box-shadow: 0 2px 8px rgba(76, 110, 245, 0.12);
}

.gld-flag {
    image-rendering: pixelated;
    border: 1px solid #d7dee8;
    border-radius: 6px;
    background: #f1f4f8;
    flex: none;
    box-shadow: 0 1px 3px rgba(30, 50, 90, 0.12);
}

.gld-cell-info {
    min-width: 0;
}

.gld-cell-name {
    font-size: 14px;
    font-weight: bold;
    color: #2d3748;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gld-cell-gid {
    font-size: 11px;
    font-weight: normal;
    color: #8a94a6;
    margin-left: 6px;
    font-variant-numeric: tabular-nums;
}

.gld-cell-meta {
    font-size: 12px;
    color: #8a94a6;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.gld-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
}

.gld-page-btn {
    border: 1px solid #cbd5e0;
    background: #fff;
    color: #4c6ef5;
    border-radius: 8px;
    padding: 5px 14px;
    font-size: 13px;
    cursor: pointer;
}

.gld-page-btn:hover {
    background: #f0f4ff;
}

.gld-page-info {
    font-size: 13px;
    color: #8a94a6;
}

.gld-back {
    margin-bottom: 12px;
}

.gld-back a {
    color: #4c6ef5;
    font-size: 13px;
    text-decoration: none;
}

.gld-back a:hover {
    text-decoration: underline;
}

/* 公会详情里的旗帜/成员复用 .arm-gv-* 样式; 列表页成员列移动端单列 */
@media (max-width: 860px) {
    .gld-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------------- 银行 / 挑战进度卡片 ---------------- */

.arm-extra {
    margin-top: 10px;
}




.arm-bank-empty {
    color: #a8b0bd;
    font-size: 12px;
    font-style: normal;
}

.arm-ch-ep {
    margin-top: 6px;
}

.arm-ch-ep-t {
    font-size: 12px;
    color: #5a6678;
}

.arm-ch-ep-t b {
    color: #2d3748;
    font-variant-numeric: tabular-nums;
}

.arm-ch-stages {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.arm-ch-st {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 58px;
    padding: 3px 6px;
    font-size: 11px;
    border-radius: 6px;
    border: 1px solid transparent;
}

.arm-ch-st b {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.arm-ch-st.done {
    background: #e6f6ec;
    border-color: #bfe5cd;
    color: #256b3c;
}

.arm-ch-st.todo {
    background: #f0f3f8;
    border-color: #dde3ee;
    color: #a8b0bd;
}

.arm-ch-st.bad {
    background: #fdf0e6;
    border-color: #efd5bb;
    color: #a05a1a;
}

.arm-ch-grave {
    margin-top: 6px;
    font-size: 12px;
    color: #7a8494;
}

/* ---------------- 信息区块卡片化 (外观/CH/抗性/嗑药/属性 统一风格) ---------------- */

.arm-block {
    background: #f8fafd;
    border: 1px solid #e6ebf3;
    border-radius: 10px;
    padding: 8px 10px;
    margin-top: 10px;
    width: 100%;
    box-sizing: border-box;
}

/* 区块标题: 图标 + 粗体小标题 */
.arm-block .arm-mats-label {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    font-size: 12px;
    font-weight: bold;
    color: #4a5568;
    margin-bottom: 6px;
}

/* chips 强化: 白底细边框, 与区块浅底形成层次 */
.arm-block .arm-chip {
    background: #ffffff;
    border: 1px solid #e3e9f2;
    color: #4a5568;
    line-height: 1.6;
}

.arm-block .arm-chip:hover {
    border-color: #b9c6da;
    background: #fdfeff;
}

.arm-block .arm-chip-mat {
    background: #eef7ee;
    border-color: #cde8d2;
    color: #256b3c;
}

.arm-block .arm-chip-stat b {
    color: #1f3b5c;
}

/* CH 卡在区块风格上的细分隔 */
.arm-block .arm-ch-ep {
    padding-top: 4px;
    border-top: 1px dashed #e6ebf3;
}

.arm-block .arm-ch-ep:first-of-type {
    border-top: none;
    padding-top: 0;
}

/* 移动端: 区块卡全宽, chips 紧凑换行 */
@media (max-width: 860px) {
    .arm-block {
        padding: 7px 8px;
        border-radius: 8px;
    }
    .arm-block .arm-chip {
        font-size: 11px;
        padding: 2px 8px;
    }
    .arm-block .arm-mats-label {
        font-size: 11px;
        margin-bottom: 4px;
    }
    .arm-block .arm-ch-st {
        min-width: 50px;
    }
}

/* ---------------- 我的公会快捷入口 (登录) ---------------- */

.gld-mine {
    padding: 10px 14px;
}

.gld-mine-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-wrap: wrap;
}

.gld-mine-tag {
    background: #2d3748;
    color: #fff;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.gld-mine-name {
    font-size: 15px;
    color: #1f3b5c;
}

.gld-mine-meta {
    font-size: 12px;
    color: #8a94a6;
}

.gld-mine-link:hover .gld-mine-name {
    color: #3498db;
}

/* 全站玩家名 → 英雄榜链接 (armory_char_link) */
.arm-char-link {
    color: #2980b9;
    text-decoration: none;
}
.arm-char-link:hover {
    text-decoration: underline;
}

/* ---------- 折叠块（2026-10-05：用户"英雄榜信息有点多，可否进一步折叠，更适配弹窗"） ----------
   五块收起：查其他角色/换装 · 详细数据(抗性/嗑药/属性/特效) · 分享配装 · 背包 · 个人银行。
   常显的是"看装备"必需的三件：状态徽章行 · 角色头 · 纸娃娃(3D 形象 + 两侧装备栏)。
   默认全部收起；用户展开/收起的状态由 js/armory.js 记在 localStorage，下次自动还原。 */
.arm-fold {
    background: #f8fafd; border: 1px solid #e6ebf3; border-radius: 10px;
    margin: 12px 0; overflow: hidden;
}
.arm-fold > summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; font-size: 14px; font-weight: 700; color: #2c3e50;
}
.arm-fold > summary::-webkit-details-marker { display: none; }
.arm-fold > summary:hover { background: #eef4fa; }
.arm-fold-t { flex: none; }
.arm-fold-hint {
    flex: 1 1 auto; min-width: 0; font-weight: 400; font-size: 12px; color: #8a93a3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.arm-fold-arrow {
    flex: none; width: 0; height: 0; border-left: 5px solid transparent;
    border-right: 5px solid transparent; border-top: 6px solid #8a93a3;
    transition: transform .15s;
}
.arm-fold[open] > summary { border-bottom: 1px solid #e6ebf3; background: #fff; }
.arm-fold[open] .arm-fold-arrow { transform: rotate(180deg); }
.arm-fold-body { padding: 2px 10px 8px; }
.arm-fold .arm-inv-grid { padding: 10px 10px 8px; }
.arm-fold-search .arm-card, .arm-fold-share .arm-share-card { box-shadow: none; margin: 0; }
.arm-fold-search .arm-card { padding: 12px; }
@media (max-width: 720px) {
    .arm-fold > summary { min-height: 44px; padding: 12px; font-size: 14.5px; }   /* 触屏可点 */
}

/* =========================================================
   2026-10-05：弹窗内（embed）的科技感皮肤（用户："UI 格局可以进一步优化 更富有科技感 符合官网主体风格和梦幻之星OL主题"）
   做法：深色 HUD 外框（弹窗头，见 inc/armory_popup.php）+ 浅色读数面板（保证可读性）：
   青色描边、角标刻度、扫描底纹、芯片化的小胶囊 —— 对应 PSO 的蓝青/琥珀 HUD 语言。
   ★只作用于 .arm-embed（弹窗里的英雄榜）；整页 armory.php 保持原样，避免动到既有观感。
   ========================================================= */
body.arm-embed {
    background:
        repeating-linear-gradient(0deg, rgba(38, 92, 130, .045) 0 1px, transparent 1px 3px),
        radial-gradient(1200px 500px at 50% -10%, #dceaf6, #eef4f9 60%, #e9f1f7);
    color: #24405a;
}
.arm-embed .arm-wrapper { max-width: 1080px; }
/* 面板：白底 + 青色描边 + 顶部一条能量线 */
.arm-embed .arm-card,
.arm-embed .arm-block {
    background: rgba(255, 255, 255, .92);
    border: 1px solid #cfe2f0;
    box-shadow: 0 2px 12px rgba(23, 74, 114, .07), inset 0 0 0 1px rgba(255, 255, 255, .6);
    position: relative;
}
.arm-embed .arm-card { border-radius: 12px; }
.arm-embed .arm-card::before {
    content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 2px;
    background: linear-gradient(90deg, rgba(69, 194, 234, 0), #45c2ea 20%, #45c2ea 80%, rgba(69, 194, 234, 0));
    border-radius: 0 0 3px 3px;
}
/* 角色头：名字下加一条琥珀色能量线（PSO 的等级感） */
.arm-embed .arm-char-name { text-shadow: 0 1px 0 rgba(255, 255, 255, .7); }
.arm-embed .arm-chip {
    background: linear-gradient(180deg, #f4fbff, #e8f4fc);
    border: 1px solid #cbe2f2; color: #2b567c;
}
.arm-embed .arm-chip-section { border-color: #f0d9a6; background: linear-gradient(180deg, #fffaf0, #fdf1d8); color: #8a6b2f; }
/* 纸娃娃：全息框（青色角标刻度） */
.arm-embed .arm-pd-figure {
    border: 1px solid #cfe2f0; border-radius: 14px;
    background:
        radial-gradient(ellipse at 50% 78%, rgba(69, 194, 234, .14), transparent 62%),
        linear-gradient(180deg, rgba(255,255,255,.75), rgba(240, 248, 253, .9));
}
.arm-embed .arm-pd-figure::after {
    content: ""; position: absolute; inset: 6px; border-radius: 10px; pointer-events: none;
    background:
        linear-gradient(#45c2ea, #45c2ea) left top / 14px 2px no-repeat,
        linear-gradient(#45c2ea, #45c2ea) left top / 2px 14px no-repeat,
        linear-gradient(#45c2ea, #45c2ea) right top / 14px 2px no-repeat,
        linear-gradient(#45c2ea, #45c2ea) right top / 2px 14px no-repeat,
        linear-gradient(#45c2ea, #45c2ea) left bottom / 14px 2px no-repeat,
        linear-gradient(#45c2ea, #45c2ea) left bottom / 2px 14px no-repeat,
        linear-gradient(#45c2ea, #45c2ea) right bottom / 14px 2px no-repeat,
        linear-gradient(#45c2ea, #45c2ea) right bottom / 2px 14px no-repeat;
    opacity: .55;
}
/* 折叠条：HUD 记录行（左侧青色刻度 + 悬停发光） */
.arm-embed .arm-fold { background: rgba(255, 255, 255, .86); border-color: #cfe2f0; }
.arm-embed .arm-fold > summary { border-left: 3px solid #45c2ea; }
.arm-embed .arm-fold > summary:hover { background: #eaf6fd; }
.arm-embed .arm-fold[open] > summary { background: #f4fbff; }
.arm-embed .arm-fold-arrow { border-top-color: #3f8fc4; }
/* 背包/银行格子：青色细边 + 悬停亮边 */
.arm-embed .arm-cell { border-color: #d9e8f3; background: #fbfdff; }
.arm-embed .arm-cell:hover { border-color: #45c2ea; box-shadow: 0 0 0 2px rgba(69, 194, 234, .18); }
/* 状态徽章：像 HUD 读数 */
.arm-embed .arm-badge { background: #eef7fd; border: 1px solid #cbe2f2; color: #2b567c; }
.arm-embed .arm-badge-online { background: #eafaf1; border-color: #bfe6d2; color: #1d7a55; }
@media (max-width: 720px) {
    .arm-embed .arm-card::before { left: 8px; right: 8px; }
}