/* =========================================================
   NPC 图鉴 (NPC Codex) 样式
   与怪物图鉴同一套观感: 列表 = 浅色卡片, 详情 = 暗色 3D 舞台 + 浅色信息面板
   (缩略图用 3:4 竖构图 —— NPC 都是站立人形)
   ========================================================= */

.ncodex-wrapper { max-width: 1180px; margin: 2em auto 3em; padding: 0 15px; }
.ncodex-title { font-size: 24px; font-weight: bold; text-align: center; margin-bottom: 4px; letter-spacing: 6px; color: #2c3e50; }
.ncodex-subtitle { text-align: center; color: #97a3b0; font-size: 12px; letter-spacing: 1px; margin-bottom: 20px; }
.ncodex-card { background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.06); padding: 14px 16px; margin-bottom: 16px; }

/* ---------- 页签 ---------- */
.ncodex-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; justify-content: center; }
.ncodex-tab {
    border: 1px solid #d8dee5; background: #f7f9fb; color: #40505f; border-radius: 8px;
    padding: 8px 16px; font-size: 13px; cursor: pointer; transition: all .15s;
}
.ncodex-tab:hover { border-color: #7fb3d5; color: #2c3e50; }
.ncodex-tab.active { background: #2f6fa8; border-color: #2f6fa8; color: #fff; box-shadow: 0 2px 6px rgba(47,111,168,.28); }
.ncodex-tab .n { opacity: .7; font-size: 11px; margin-left: 4px; }

/* ---------- 筛选行 ---------- */
.ncodex-filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ncodex-input, .ncodex-select {
    border: 1px solid #d8dee5; border-radius: 8px; padding: 7px 10px; font-size: 13px; color: #34495e; background: #fff;
}
.ncodex-input { flex: 1 1 220px; min-width: 150px; }
.ncodex-input:focus, .ncodex-select:focus { outline: none; border-color: #7fb3d5; box-shadow: 0 0 0 3px rgba(127,179,213,.18); }
.ncodex-count { color: #97a3b0; font-size: 12px; margin-left: auto; }

/* ---------- 网格 ---------- */
.ncodex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.nc-card {
    background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.06);
    padding: 10px; cursor: pointer; transition: transform .12s, box-shadow .12s; position: relative;
}
.nc-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.nc-thumb {
    width: 100%; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden;
    background: linear-gradient(160deg, #eef2f6 0%, #dde5ec 100%);
    display: flex; align-items: center; justify-content: center;
}
.nc-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.nc-thumb .ph { color: #9aa7b4; font-size: 12px; text-align: center; padding: 8px; line-height: 1.5; }
/* 两行截断: 长名字 (制服职员·HUnewearl（1 型） 这类) 单行会把**区分款式的型号码切掉** */
.nc-name {
    font-size: 14px; font-weight: bold; color: #2c3e50; margin-top: 8px; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nc-en { font-size: 11px; color: #98a4b2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.nc-badge { font-size: 10px; padding: 2px 6px; border-radius: 999px; background: #eef3f8; color: #4a6b88; }
.nc-badge.area { background: #eaf3fb; color: #2f6fa8; }
.nc-badge.cat-staff { background: #eef3f8; color: #4a6b88; }
.nc-badge.cat-shop { background: #fdf3e5; color: #a9702a; }
.nc-badge.cat-medical { background: #fdecef; color: #b0476a; }
.nc-badge.cat-gov { background: #eef0fb; color: #4a55a8; }
.nc-badge.cat-military { background: #ebeef1; color: #4c5b6b; }
.nc-badge.cat-labo { background: #e9f6f4; color: #2b7d74; }
.nc-badge.cat-story { background: #f3e8fd; color: #7a45b5; }
.nc-badge.cat-citizen { background: #f2f4f6; color: #6b7784; }
.nc-badge.cat-event { background: #e9f2fd; color: #2f6fa8; }
.ncodex-more { text-align: center; margin-top: 18px; }
.ncodex-more button {
    border: 1px solid #d8dee5; background: #fff; color: #40505f; border-radius: 8px;
    padding: 9px 22px; font-size: 13px; cursor: pointer;
}
.ncodex-more button:hover { border-color: #7fb3d5; color: #2c3e50; }
.ncodex-empty { text-align: center; color: #97a3b0; padding: 40px 0; font-size: 13px; }

/* ---------- 详情弹框 ---------- */
.nc-modal-mask {
    /* ★ z-index 取 1500: 要**高于**站点吸顶导航(1000/1002), 又要**低于**全站物品弹窗(.codex-modal = 2000)
       —— 模板弹窗里的初始装备名点了要能弹出物品详情, 曾用 3000 把物品详情压在下面 (看不见) */
    position: fixed; inset: 0; background: rgba(12,18,26,.62); backdrop-filter: blur(2px);
    display: none; align-items: center; justify-content: center; z-index: 1500; padding: 24px 16px;
}
.nc-modal-mask.open { display: flex; }
.nc-modal {
    background: #fff; border-radius: 14px; width: min(980px, 100%); max-height: calc(100vh - 48px);
    overflow: auto; box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.nc-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid #eef1f4; }
.nc-head h3 { margin: 0; font-size: 20px; color: #22303c; letter-spacing: 1px; }
.nc-head .sub { color: #98a4b2; font-size: 12px; margin-top: 3px; }
.nc-close {
    margin-left: auto; border: none; background: #f2f5f8; color: #5b6b7b; border-radius: 8px;
    width: 34px; height: 34px; font-size: 18px; cursor: pointer; line-height: 1;
}
.nc-close:hover { background: #e7ecf1; }
.nc-body { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 16px; padding: 16px 18px 20px; }
.nc-view { min-width: 0; }
.nc-stage { position: relative; background: radial-gradient(120% 90% at 50% 10%, #2b3a4d 0%, #17202b 70%, #10161d 100%); border-radius: 12px; overflow: hidden; aspect-ratio: 1 / 1; }
.nc-stage canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.nc-stage-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #93a4b5; font-size: 13px; text-align: center; padding: 18px; line-height: 1.7; }
.nc-stage-tools { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 6px; }
.nc-stage-tools button {
    border: 1px solid rgba(255,255,255,.18); background: rgba(18,26,35,.55); color: #cfe0ee;
    border-radius: 8px; font-size: 12px; padding: 5px 10px; cursor: pointer; backdrop-filter: blur(3px);
}
.nc-stage-tools button:hover { background: rgba(30,44,58,.75); }
.nc-stage-tools button.on { background: #2f6fa8; border-color: #2f6fa8; color: #fff; }
.nc-info { min-width: 0; }
.nc-note { color: #55636f; font-size: 13px; line-height: 1.85; background: #f7f9fb; border: 1px solid #eef1f4; border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.nc-sec { font-size: 12px; color: #97a3b0; letter-spacing: 1px; margin: 14px 0 6px; }
.nc-rows { display: flex; flex-direction: column; gap: 6px; }
.nc-row { display: flex; gap: 8px; font-size: 13px; align-items: baseline; }
.nc-row .k { color: #8b98a5; min-width: 56px; }
.nc-row .v { color: #2c3e50; flex: 1; min-width: 0; }
.nc-row .v .mono { font-family: Consolas, Menlo, monospace; font-size: 12px; color: #40505f; }
.nc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nc-chip {
    border: 1px solid #d8dee5; background: #fff; color: #40505f; border-radius: 999px;
    font-size: 12px; padding: 4px 10px; cursor: pointer;
}
.nc-chip:hover { border-color: #7fb3d5; color: #2c3e50; }
.nc-chip.on { background: #2f6fa8; border-color: #2f6fa8; color: #fff; }
.nc-area-block { border-top: 1px solid #eef1f4; margin-top: 12px; padding-top: 8px; }
.nc-area-hd { font-size: 13px; color: #2c3e50; font-weight: bold; display: flex; align-items: center; gap: 8px; }
.nc-area-hd .n { font-weight: normal; color: #97a3b0; font-size: 12px; }
.nc-area-spawn { font-size: 12px; color: #8b98a5; line-height: 1.8; }
.nc-counter-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.nc-counter {
    background: #f2f6fa; border: 1px solid #e2eaf2; color: #3b5b78; border-radius: 8px;
    font-size: 12px; padding: 4px 9px;
}
.nc-counter .en { color: #98a4b2; font-size: 11px; margin-left: 4px; }
.nc-counter .who { color: #2b7d74; font-size: 11px; margin-left: 4px; }
/* 柜台一览页签: 每个柜台一张卡, 下面按区域列出值勤职员 (点开看 3D) */
.nc-counters { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.nc-counter-row { background: #f7f9fb; border: 1px solid #eef1f4; border-radius: 10px; padding: 10px 12px; }
.nc-counter-hd { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.nc-counter-hd b { color: #2c3e50; font-size: 13px; }
.nc-counter-hd .en { color: #98a4b2; font-size: 11px; }
.nc-counter-staff { margin-top: 7px; display: flex; flex-direction: column; gap: 4px; }
.nc-staff {
    display: flex; align-items: baseline; gap: 6px; text-align: left; width: 100%;
    border: 1px solid #d8dee5; background: #fff; color: #3b5b78; border-radius: 8px;
    font-size: 12px; padding: 4px 8px; cursor: pointer;
}
.nc-staff:hover { border-color: #7fb3d5; color: #2c3e50; }
.nc-staff .area { color: #97a3b0; font-size: 11px; flex: none; }
.nc-counter-none { color: #a8b2bd; font-size: 12px; margin-top: 7px; }
.nc-foot { display: flex; align-items: center; gap: 8px; padding: 0 18px 18px; }
.nc-foot .hint { color: #97a3b0; font-size: 12px; }
.nc-tpl-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.nc-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 5px; border: 1px solid rgba(0,0,0,.15); }


/* ---------- 动作条 (弹窗内, 贴在 3D 舞台下) ---------- */
.nc-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.nc-act {
    border: 1px solid #d8dee5; background: #fff; color: #40505f; border-radius: 999px;
    font-size: 12px; padding: 5px 11px; cursor: pointer; transition: all .12s;
}
.nc-act:hover { border-color: #7fb3d5; color: #2c3e50; }
.nc-act.on { background: #2f6fa8; border-color: #2f6fa8; color: #fff; }
@media (max-width: 760px) {
    .nc-act { font-size: 11px; padding: 6px 10px; }
}


/* ---------- 初始装备 (模板弹窗) ---------- */
.nc-kit { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.nc-item {
    display: inline-flex; align-items: center; gap: 5px;
    background: #f7f9fb; border: 1px solid #e6ecf2; border-radius: 8px;
    padding: 5px 9px; font-size: 12px; color: #2c3e50;
}
.nc-item .nm { cursor: pointer; }
.nc-item .nm:hover { color: #2f6fa8; text-decoration: underline; }
.nc-item .ct { color: #97a3b0; }
.nc-item .eq {
    font-size: 10px; color: #25784a; background: #e8f5ee; border: 1px solid #cbe8d8;
    border-radius: 999px; padding: 1px 6px;
}

@media (max-width: 760px) {
    .ncodex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .ncodex-wrapper { padding: 0 10px; }
    .ncodex-title { font-size: 20px; letter-spacing: 3px; }
    .ncodex-tab { padding: 8px 12px; font-size: 12px; }
    .nc-card { padding: 7px; border-radius: 10px; }
    .nc-name { font-size: 13px; margin-top: 6px; }
    .nc-body { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 12px; }
    .nc-head { padding: 12px; }
    .nc-head h3 { font-size: 17px; }
    .nc-foot { padding: 0 12px 14px; }
}

/* =========================================================
   老手机浏览器兼容（微信内置 X5 / 老 iOS / 老 Android 不认 aspect-ratio）
   —— 上面的缩略图比例靠 aspect-ratio 撑着；不认它的浏览器里容器会塌成 0、
      整个图鉴网格变空白（论坛视频已实报过同款问题）。
   @supports not 只在"不认 aspect-ratio"的浏览器里生效 ⇒ 现代浏览器零影响。
   比例盒 = height:0 + padding-top(高/宽 %)，子元素绝对定位填满 padding box。
   ========================================================= */
@supports not (aspect-ratio: 3 / 4) {
    .nc-thumb { position: relative; height: 0; padding-top: 133.333%; }
    .nc-thumb > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    .nc-thumb .ph { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
}