/* 旧日来信 · 构建数字分身的过程页（js/twin-build.js） */
.tw {
  position: absolute; inset: 0; z-index: 60; overflow: hidden;
  background: url(../assets/fig/paper_tex.png) center / 420px, #f4ecdd; background-blend-mode: multiply;
  opacity: 0; transition: opacity .5s var(--out);
}
.tw.on { opacity: 1; }
.tw-k { position: absolute; left: 0; right: 0; top: 92px; margin: 0; text-align: center; font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: .3em; color: var(--small); }
.tw-h { position: absolute; left: 0; right: 0; top: 116px; margin: 0; text-align: center; font-weight: 400; font-size: 26px; color: var(--ink); }
.tw-h b { font-weight: 400; color: var(--blue); }
.tw-cap { position: absolute; left: 30px; right: 30px; top: 160px; margin: 0; text-align: center; font-family: var(--sans); font-weight: 500; font-size: 14px; color: var(--ink-2); }
.tw-cap.in { animation: tw-clear .6s var(--out); }
@keyframes tw-clear { from { opacity: 0; filter: blur(6px); transform: translateY(4px); } to { opacity: 1; filter: none; transform: none; } }

/* 关键帧胶片：抽到一张推进一张；扫描时一张张亮起 */
.tw-strip { position: absolute; left: 36px; right: 36px; top: 204px; height: 140px; overflow: hidden; }
.tw-film { display: flex; gap: 10px; transition: transform .5s var(--out); }
.tw-film img {
  flex: none; width: 56px; height: 121px; object-fit: cover; object-position: top; border-radius: 6px;
  box-shadow: 0 4px 10px rgba(42, 23, 8, .22); background: #fff; position: relative;
  animation: tw-thumb .45s var(--spring); transition: transform .3s var(--out), outline-color .3s;
  outline: 2px solid transparent; outline-offset: 2px;
}
.tw-film img.scan { transform: translateY(-6px); outline-color: var(--mustard); }
@keyframes tw-thumb { from { opacity: 0; transform: translateY(14px) scale(.9); } }

/* 认出的话：模糊到清晰 */
.tw-talk { position: absolute; left: 34px; right: 34px; top: 360px; height: 300px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; transition: opacity .5s, filter .5s; }
.tw-talk.out { opacity: 0; filter: blur(6px); }
.tw-b { max-width: 78%; margin: 0; padding: 7px 12px; border-radius: 12px; font-family: var(--sans); font-weight: 500; font-size: 14px; line-height: 1.45; animation: tw-clear .55s var(--out) both; }
.tw-b.them { align-self: flex-start; background: #fffaf1; color: var(--ink); box-shadow: 0 2px 6px rgba(42, 23, 8, .12); border-top-left-radius: 4px; }
.tw-b.me { align-self: flex-end; background: rgba(43, 53, 102, .12); color: var(--ink-2); border-top-right-radius: 4px; }

/* 听出的性格：像贴上去的小纸条 */
.tw-traits { position: absolute; left: 30px; right: 30px; top: 676px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tw-traits span { padding: 4px 11px; background: rgba(200, 154, 62, .22); border-radius: 3px; font-size: 15px; color: var(--ink); animation: tw-tag .4s var(--spring) both; }
.tw-traits span:nth-child(odd) { transform: rotate(-2deg); }
.tw-traits span:nth-child(even) { transform: rotate(1.5deg); }
@keyframes tw-tag { from { opacity: 0; transform: translateY(-10px) rotate(-6deg) scale(1.1); } }

/* 结果卡 */
.tw-card {
  position: absolute; left: 30px; right: 30px; top: 360px; padding: 20px 20px 18px; border-radius: 16px;
  background: url(../assets/fig/paper_tex.png) center / 400px, #fffaf1; background-blend-mode: multiply;
  box-shadow: 0 14px 34px rgba(42, 23, 8, .22); animation: tw-card .6s var(--spring) both;
}
.tw-card[hidden] { display: none; }
@keyframes tw-card { from { opacity: 0; transform: translateY(24px) scale(.96); filter: blur(4px); } }
.tw-who { display: flex; align-items: center; gap: 12px; }
.tw-av { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: var(--cream); font-size: 20px; }
.tw-who b { display: block; font-weight: 400; font-size: 22px; }
.tw-who small { display: block; margin-top: 2px; font-family: var(--sans); font-weight: 500; font-size: 12px; color: var(--small); }
.tw-sum { margin: 14px 0 0; font-family: var(--sans); font-weight: 500; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.tw-quote { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(43, 53, 102, .07); font-size: 17px; line-height: 1.5; color: var(--blue); }
.tw-quote .lv { display: table; margin: 0 0 6px -2px; }
.tw-traits { transition: opacity .4s, filter .4s; }
.tw-traits.out { opacity: 0; filter: blur(6px); }
.tw-ctraits { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tw-ctraits span { padding: 2px 9px; background: rgba(200, 154, 62, .22); border-radius: 3px; font-size: 14px; color: var(--ink); }
.tw-note { margin: 12px 0 0; font-family: var(--sans); font-weight: 500; font-size: 12px; line-height: 1.7; color: var(--small); }
.tw-go { display: block; width: 100%; height: 46px; margin-top: 14px; border-radius: 12px; background: var(--ink); color: var(--cream); font-size: 17px; transition: transform .15s var(--out); }
.tw-go:active { transform: scale(.97); }
.tw-mode { position: absolute; left: 20px; right: 20px; bottom: 34px; margin: 0; text-align: center; font-family: var(--sans); font-size: 11px; color: rgba(107, 86, 68, .7); }

/* 来源等级小标签（颜色和房间「证据」图例同一套）：A 实心 · C 虚线 · D 半透明 */
.lv { padding: 1px 6px; border-radius: 4px; font-family: var(--sans); font-weight: 500; font-size: 11px; line-height: 16px; white-space: nowrap; }
.lv-A { background: #7d9a78; color: #fff; }
.lv-B { background: #c9a35f; color: #fff; }
.lv-C { border: 1px dashed #b98b6a; color: #9a6f52; }
.lv-D { background: rgba(154, 139, 128, .35); color: rgba(58, 42, 28, .75); }