/* =========================================================
   档案页 · 拟物化样式（js/archive.js）
   ---------------------------------------------------------
   视角：拉开一只铁皮抽屉，从上往下看里面。

     ┌─────────────────────────────┐
     │ ●  一级封存层   × × ×  L1 ▾ │  ← 后壁：白字直接打在钢板上
     ├─────────────────────────────┤
     │ ┌─────────┐ ┌─────────┐     │  ← 内腔：两列牛皮纸档案盒
     │ │ 档案盒  │ │ 档案盒  │     │     盒里叠着一摞文件纸
     │ └─────────┘ └─────────┘     │
     ├─────────────────────────────┤
     │           ▬▬▬▬              │  ← 前板：拉手
     └─────────────────────────────┘

   未解封：抽屉关着，只露后壁与前板，黑黄警示胶带斜贴封死。
   整体压暗：纸是旧纸，铁是旧铁，没有一处反白。
   ========================================================= */

/* ================= 抽屉本体 ================= */
.layer-block {
  position: relative;
  margin: 20px 0 18px;
  border-radius: 4px;
  background: #101215;
  box-shadow:
    0 0 0 1px #060708,
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    /* 抽屉底板压在柜体上的厚度 */
    0 4px 0 -1px #08090b,
    0 16px 28px -14px rgba(0, 0, 0, 0.98);
  overflow: hidden;
}

.layer-block:first-child {
  margin-top: 0;
}

/* ---- 后壁：抽屉里侧那块钢板 ---- */
.layer-head {
  position: relative;
  z-index: 2;
  padding: 11px 13px 12px;
  background:
    radial-gradient(150% 140% at 50% -55%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 58%),
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.01) 0 1px,
      rgba(0, 0, 0, 0.055) 1px 2px),
    linear-gradient(180deg, #31353a 0%, #272a2f 46%, #1c1f22 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.7),
    0 4px 9px -4px rgba(0, 0, 0, 0.98);
}

.layer-head.collapsible {
  cursor: pointer;
  user-select: none;
}

/* ---- 层名：不垫纸，白字直接打在钢板上 ---- */
.layer-plate {
  display: flex;
  align-items: center;
  gap: 9px;
}

/* 铅封：标题左端那枚小铆钉 */
.layer-mark {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #7d828a 0%, #454a51 46%, #191c20 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 255, 255, 0.12);
}

.layer-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: #eef1f5;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.9),
    0 0 10px rgba(255, 255, 255, 0.07);
}

/* 封存等级刻度：几个叉 */
.layer-x {
  flex-shrink: 0;
  font-family: monospace;
  font-size: 11px;
  letter-spacing: 3px;
  color: rgba(190, 198, 208, 0.24);
}

.layer-code {
  flex-shrink: 0;
  padding: 1px 4px;
  font-family: monospace;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 1px;
  color: rgba(190, 198, 208, 0.45);
  border: 1px solid rgba(190, 198, 208, 0.2);
}

.layer-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  font-size: 10px;
  color: #8b939e;
}

/* 说明：丝印在钢板上的灰字 */
.layer-desc {
  margin: 7px 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: #828892;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.9);
}

/* ---- 内腔：抽屉肚子里那一格，四周吃阴影 ---- */
.layer-body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  padding: 12px 10px 10px;
  background:
    radial-gradient(130% 70% at 50% 0%, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 72%),
    linear-gradient(180deg, #0c0e10 0%, #141619 38%, #0e1013 100%);
  box-shadow:
    inset 0 15px 20px -12px rgba(0, 0, 0, 0.98),
    inset 11px 0 18px -13px rgba(0, 0, 0, 0.95),
    inset -11px 0 18px -13px rgba(0, 0, 0, 0.95),
    inset 0 -11px 18px -13px rgba(0, 0, 0, 0.95);
}

.layer-block.collapsed .layer-body,
.layer-block.collapsed .layer-front {
  display: none;
}

/* ---- 前板：抽屉正面，最下面那条，带拉手 ---- */
.layer-front {
  position: relative;
  z-index: 3;
  display: block;
  height: 34px;
  background:
    radial-gradient(140% 220% at 50% -90%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 62%),
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.014) 0 1px,
      rgba(0, 0, 0, 0.06) 1px 2px),
    linear-gradient(180deg, #383c42 0%, #2b2f34 38%, #1d2024 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -2px 4px -1px rgba(0, 0, 0, 0.6),
    0 -7px 13px -6px rgba(0, 0, 0, 0.98);
}

/* 拉手：前板正中一只凸起的铁把手 */
.layer-front i {
  position: absolute;
  left: 50%;
  top: 9px;
  width: 68px;
  height: 15px;
  margin-left: -34px;
  border-radius: 3px;
  background: linear-gradient(180deg, #464b52 0%, #2f3339 52%, #1b1e22 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    0 1px 2px rgba(0, 0, 0, 0.8),
    0 3px 5px -1px rgba(0, 0, 0, 0.85);
}

/* ================= 未解封：抽屉关着，胶带封死 ================= */
.layer-block.sealed .layer-body {
  display: none;
}

.layer-block.sealed.shake {
  animation: sealShake 0.3s ease;
}

@keyframes sealShake {
  0%, 100% { transform: translateX(0); }
  22% { transform: translateX(-2.5px); }
  60% { transform: translateX(2px); }
  82% { transform: translateX(-1px); }
}

/* 两条黑黄警示胶带斜贴过整个抽屉面 */
.layer-tape {
  position: absolute;
  z-index: 6;
  height: 18px;
  pointer-events: none;
  background:
    repeating-linear-gradient(45deg,
      #8f7222 0 16px,
      #111316 8px 32px);
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.65),
    inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}

.layer-tape.t1 {
  left: -24px;
  right: -24px;
  top: 26px;
  opacity: 0.5;
  transform: rotate(-6deg);
}

.layer-tape.t2 {
  left: -24px;
  right: -24px;
  top: 52px;
  opacity: 0.42;
  transform: rotate(5deg);
}

/* ================= 档案盒 =================
   一块纸板框，中间挖空塞文件：外框是盒面，内框是凹进去的那格。
   顶边左端一排骨印叉，右端一个装订圆孔。 */
.set-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 5px 5px 6px;
  border-radius: 2px;
  /* 旧牛皮纸板：压了几十年的褐 */
  background-color: #413929;
  background-image:
    radial-gradient(120% 80% at 22% -18%, rgba(255, 236, 200, 0.06), rgba(255, 236, 200, 0) 62%),
    repeating-linear-gradient(180deg,
      rgba(255, 255, 255, 0.008) 0 1px,
      rgba(0, 0, 0, 0.05) 1px 2px),
    linear-gradient(168deg, #4a4130 0%, #413929 50%, #302a1c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 210, 0.12),
    inset 0 0 0 1px rgba(0, 0, 0, 0.4),
    /* 盒底厚度 */
    0 1px 0 rgba(0, 0, 0, 0.55),
    0 4px 7px -3px rgba(0, 0, 0, 0.85);
}

/* ---- 盒面顶边：套组名 + 折叠三角 + 进度 + 装订孔 ---- */
.set-head {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 2px 0 3px;
}

.set-head.collapsible {
  cursor: pointer;
  user-select: none;
}

.set-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #e6dfcd;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

.set-arrow {
  flex-shrink: 0;
  font-size: 8px;
  color: #9c9078;
}

.set-count {
  flex-shrink: 0;
  font-family: monospace;
  font-size: 10px;
  color: #a89c82;
}

.set-count.num-done {
  color: #d8a93a;
  font-weight: 700;
}

/* 装订圆孔：双圈，内圈吃进纸板里 */
.set-ring {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid #3a3222;
  background: radial-gradient(circle at 42% 38%, #2b2417 0%, #4a4029 78%, #241e13 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.55),
    0 1px 0 rgba(255, 240, 210, 0.16);
}

/* ---- 内凹：挖空的那格，塞文件 ---- */
.set-inner {
  position: relative;
  padding: 5px 5px 6px;
  border-radius: 1px;
  background: linear-gradient(180deg, #2b2416 0%, #332b1b 60%, #241e12 100%);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.6),
    inset 0 -1px 0 rgba(255, 240, 210, 0.07),
    0 1px 0 rgba(255, 240, 210, 0.05);
}

.set-panel.collapsed .set-inner {
  display: none;
}

/* 盒面说明：印在凹槽外面的纸板上 */
.set-desc {
  margin: 3px 3px 6px;
  font-size: 10.5px;
  line-height: 1.5;
  color: #b0a288;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 共鸣收益：红色铅字 */
.set-buff {
  margin: 0 3px 6px;
  font-size: 10px;
  line-height: 1.4;
  color: #c2705f;
}

/* 折叠：盒子压扁成一条，只剩盒面顶边 */
.set-panel.collapsed .set-desc,
.set-panel.collapsed .set-buff {
  display: none;
}

/* ---- 盒里的文件：一叠纸，互相压着边 ---- */
.item-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 8px;
}

.item-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  /* 负边距让每张纸压住上一张的下沿，形成叠放 */
  margin-top: -4px;
  padding: 0 7px;
  overflow: hidden;
  font-size: 12px;
  color: #191408;
  cursor: pointer;
  background: linear-gradient(180deg, #7d7563 0%, #6d6653 100%);
  box-shadow:
    /* 纸上沿受光 */
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    /* 上一张压下来的影子，落在纸上沿 */
    0 -3px 5px -2px rgba(0, 0, 0, 0.7),
    /* 自己压在下一张上 */
    0 2px 4px -1px rgba(0, 0, 0, 0.5);
  transition: transform 0.1s ease, filter 0.1s ease;
}

/* 第一张不压上一张 */
.item-card:first-child {
  margin-top: 0;
}


.ic-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #191408;
}

/* 稀有度：纸上的墨字，不占边框 */
.ic-tier {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.ic-no {
  flex-shrink: 0;
  font-family: monospace;
  font-size: 9px;
  letter-spacing: 0.2px;
  color: rgba(50, 40, 22, 0.5);
}

.ic-cnt {
  flex-shrink: 0;
  font-family: monospace;
  font-size: 9px;
  color: rgba(50, 40, 22, 0.7);
}

/* 纸上的稀有度墨色：比暗色界面的亮色沉，但要在旧纸上认得出来 */
.item-card .tier-common { color: #302c21; }
.item-card .tier-mutant { color: #1b4269; }
.item-card .tier-hazard { color: #472a63; }
.item-card .tier-disaster { color: #7a300d; }
.item-card .tier-taboo { color: #820c18; }

/* 未登记：一张抽空了的卡，只剩问号 */
.item-card.locked {
  cursor: default;
  background: linear-gradient(180deg, #5e5849 0%, #514c3e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 -1px 1px rgba(0, 0, 0, 0.35),
    0 3px 4px -1px rgba(0, 0, 0, 0.45);
}

.item-card.locked .ic-name {
  color: #26200f;
  letter-spacing: 3px;
  opacity: 0.55;
}

@media (hover: hover) {
  .item-card:not(.locked):hover {
    transform: translateX(2px);
    filter: brightness(1.1);
  }
}

.item-card:not(.locked):active {
  filter: brightness(0.92);
}

/* 新收容高亮（.fresh 动画在 fx.css，属于反馈层） */