/* ---------- 档案：结局图鉴 / 成就 ---------- */
.archive {
  position: absolute;
  inset: 0;
  z-index: 320;
  display: flex;
  flex-direction: column;
  padding: 4cqh 4cqw 3.2cqh;
  color: #e8dcc0;
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(74, 58, 32, .34), rgba(0, 0, 0, 0) 70%),
    linear-gradient(180deg, #12100c, #080706 72%);
  overflow: hidden;
}
.archive[hidden] { display: none; }

.archive__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2.4cqw;
  padding-bottom: 1.6cqh;
  border-bottom: 1px solid rgba(200, 163, 90, .24);
}
.archive__kicker {
  margin: 0;
  font-family: var(--font-serif);
  font-size: max(1.2cqw, 16px);
  letter-spacing: .5em;
  color: var(--gold);
}
.archive__tabs {
  display: flex;
  gap: .6cqw;
}
.archive__tabs button {
  padding: .55cqh 1.2cqw;
  font: inherit;
  font-size: max(.86cqw, 12px);
  letter-spacing: .18em;
  color: rgba(232, 220, 192, .62);
  background: transparent;
  border: 1px solid transparent;
  border-bottom-color: rgba(200, 163, 90, .2);
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.archive__tabs button[data-active="true"] {
  color: #fff1cf;
  border-color: rgba(200, 163, 90, .5);
  background: rgba(200, 163, 90, .08);
}
.archive__close {
  margin-left: auto;
  width: 3.2cqw;
  height: 3.2cqw;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  font: inherit;
  font-size: max(1.2cqw, 16px);
  color: rgba(232, 220, 192, .7);
  border: 1px solid rgba(200, 163, 90, .28);
  border-radius: 50%;
  background: rgba(0, 0, 0, .3);
  cursor: pointer;
}
.archive__close:hover { color: #fff3d0; border-color: var(--gold); }

.archive__note {
  flex: 0 0 auto;
  margin: 0;
  padding: 1.4cqh 0 .2cqh;
  font-size: max(.76cqw, 11px);
  letter-spacing: .08em;
  color: rgba(232, 220, 192, .48);
}

.archive__body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding-top: 2.2cqh;
}
.archive__grid {
  height: 100%;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17cqw, 1fr));
  gap: 1.1cqw;
  align-content: start;
  padding-right: .6cqw;
}
.archive__card {
  position: relative;
  min-height: 7.4cqh;
  padding: 1.2cqh 1.2cqw;
  text-align: left;
  font: inherit;
  color: #e8dcc0;
  background:
    linear-gradient(165deg, rgba(47, 37, 22, .82), rgba(19, 15, 10, .94));
  border: 1px solid rgba(200, 163, 90, .26);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}
.archive__card:hover {
  border-color: rgba(240, 178, 74, .7);
  background: linear-gradient(165deg, rgba(66, 50, 27, .9), rgba(26, 19, 12, .96));
  transform: translateY(-.2cqh);
}
.archive__card.is-locked {
  color: rgba(232, 220, 192, .42);
  border-style: dashed;
  border-color: rgba(200, 163, 90, .16);
  background: rgba(12, 10, 8, .55);
}
/* 真结局：即使未解锁也保留金边和名字 */
.archive__card.is-true {
  border-style: solid;
  border-color: rgba(200, 163, 90, .68);
  background:
    linear-gradient(165deg, rgba(74, 53, 25, .9), rgba(22, 16, 9, .97));
  box-shadow: inset 0 0 0 1px rgba(200, 163, 90, .16), 0 0 2.4cqw rgba(200, 163, 90, .12);
}
.archive__card.is-true .archive__tag { color: var(--amber); }
.archive__card.is-true.is-locked { color: rgba(232, 220, 192, .62); }
.archive__tag {
  display: block;
  margin-bottom: .5cqh;
  font-size: max(.64cqw, 10px);
  letter-spacing: .28em;
  color: rgba(200, 163, 90, .62);
}
.archive__card b {
  display: block;
  font-family: var(--font-serif);
  font-size: max(.98cqw, 13px);
  font-weight: 400;
  letter-spacing: .08em;
}
.archive__card small {
  display: block;
  margin-top: .5cqh;
  font-size: max(.68cqw, 10px);
  letter-spacing: .12em;
  color: rgba(232, 220, 192, .38);
}
.archive__lock {
  position: absolute;
  right: 1cqw;
  bottom: 1cqh;
  font-size: max(.68cqw, 10px);
  letter-spacing: .1em;
  color: rgba(200, 163, 90, .3);
}

.archive__detail {
  position: absolute;
  inset: 2.2cqh 0 0;
  z-index: 1;
  overflow-y: auto;
  padding: 1.2cqh 1.6cqw 2cqh;
  background: rgba(9, 8, 6, .97);
  border: 1px solid rgba(200, 163, 90, .22);
}
.archive__detail[hidden] { display: none; }
.archive__back {
  margin-bottom: 1.4cqh;
  padding: 0;
  font: inherit;
  font-size: max(.74cqw, 11px);
  letter-spacing: .18em;
  color: rgba(232, 220, 192, .55);
  background: none;
  border: none;
  cursor: pointer;
}
.archive__back:hover { color: var(--gold); }
.archive__detail-title {
  margin: 0 0 1.4cqh;
  font-family: var(--font-serif);
  font-size: max(1.2cqw, 16px);
  font-weight: 400;
  letter-spacing: .14em;
  color: #f0e4c8;
}
.archive__detail-body {
  max-width: 64cqw;
  font-size: max(.94cqw, 13px);
  line-height: 2;
  letter-spacing: .05em;
  color: rgba(232, 220, 192, .82);
}
.archive__detail-body p { margin: 0 0 1em; }
.archive__hint {
  margin-top: 1.6em !important;
  padding-top: 1em;
  border-top: 1px dashed rgba(200, 163, 90, .24);
  font-size: max(.82cqw, 11px);
  color: rgba(200, 163, 90, .72);
}

.archive__confirm {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .64);
}
.archive__confirm[hidden] { display: none; }
.archive__confirm-box {
  min-width: 26cqw;
  padding: 2cqh 2.4cqw;
  text-align: center;
  background: linear-gradient(170deg, #2a2013, #120d08);
  border: 1px solid rgba(200, 163, 90, .45);
  box-shadow: 0 1.4cqh 4cqh rgba(0, 0, 0, .6);
}
.archive__confirm-text {
  margin: 0 0 2cqh;
  font-family: var(--font-serif);
  font-size: max(1cqw, 14px);
  letter-spacing: .16em;
  color: #f0e4c8;
}
.archive__confirm-acts {
  display: flex;
  justify-content: center;
  gap: 1.2cqw;
}

@media (max-height: 640px) {
  .archive { padding: 2.6cqh 3cqw 2.2cqh; }
  .archive__grid { grid-template-columns: repeat(auto-fill, minmax(21cqw, 1fr)); gap: 1cqw; }
  .archive__card { min-height: 8.6cqh; padding: 1cqh .9cqw; }
  .archive__detail-body { max-width: 76cqw; font-size: max(.82cqw, 11px); }
  .archive__confirm-box { min-width: 38cqw; }
}