/* ==========================================================================
   觉醒 1919 · 历史回廊 —— 人物真实头像
   与 css/style.css 的宣纸 / 朱砂 / 鎏金审美保持一致：老照片相框 + 轻微做旧
   依赖：css/style.css 中的 CSS 变量与 .beat / .portrait / .silhouette / .portrait-seal
   ========================================================================== */

/* ---------- 1. 头像容器 ---------- */
.portrait.has-photo,
.portrait:has(> .portrait-photo),
.portrait:has(.portrait-photo) {
  padding-top: 0;
}

/* ---------- 2. 照片本体：3:4 老照片相框 ---------- */
.portrait.has-photo .portrait-photo,
.portrait:has(.portrait-photo) .portrait-photo {
  display: block;
  width: 88px;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 22%;
  box-sizing: border-box;
  background: #241a12;
  border: 1px solid rgba(138, 106, 34, .62);
  box-shadow:
    0 0 0 1px rgba(18, 12, 8, .55),
    inset 0 1px 0 rgba(255, 236, 200, .16),
    inset 0 0 18px rgba(60, 34, 12, .28),
    0 8px 18px -8px rgba(0, 0, 0, .62);
  filter: saturate(.94) contrast(1.03);
  transition: transform .35s ease, box-shadow .35s ease;
  -webkit-user-drag: none;
  user-select: none;
}

/* 内圈细金线 + 一层极淡的暖色罩染，让所有照片观感统一 */
.portrait.has-photo::before,
.portrait:has(.portrait-photo)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid rgba(246, 232, 203, .17);
  background:
    linear-gradient(180deg, rgba(240, 206, 146, .10) 0%, rgba(90, 52, 22, .10) 62%, rgba(36, 20, 10, .22) 100%);
  pointer-events: none;
  mix-blend-mode: soft-light;
}

/* 照片尚未下载完成时的占位：泛黄相纸纹理 + “史料照片”提示，避免出现空黑框 */
.portrait.has-photo:not(.photo-loaded) .portrait-photo,
.portrait:has(.portrait-photo):not(.photo-loaded) .portrait-photo {
  background:
    repeating-linear-gradient(115deg, rgba(120, 88, 54, .18) 0 3px, rgba(70, 46, 28, .10) 3px 7px),
    linear-gradient(158deg, #3b2a1b 0%, #241a12 58%, #1a110b 100%);
}
.portrait.has-photo:not(.photo-loaded)::after,
.portrait:has(.portrait-photo):not(.photo-loaded)::after {
  content: "史料照片";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7px;
  text-align: center;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 8px;
  letter-spacing: .18em;
  color: rgba(226, 196, 137, .62);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  pointer-events: none;
  z-index: 1;
}

/* 悬停时轻轻浮起一点，暗示“这是一张实体老照片” */
.beat:hover .portrait-photo,
.beat:focus-within .portrait-photo {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(18, 12, 8, .55),
    inset 0 1px 0 rgba(255, 236, 200, .18),
    inset 0 0 18px rgba(60, 34, 12, .24),
    0 12px 22px -10px rgba(0, 0, 0, .66);
}

/* 史料原声（citation）段落：照片稍微退后一点，不抢文字 */
.beat-quote .portrait-photo {
  opacity: .88;
  filter: saturate(.86) contrast(1.02);
}

/* 回退状态下不显示任何照片框装饰 */
.portrait.portrait-fallback::before,
.portrait.portrait-fallback::after {
  display: none;
}
.portrait.portrait-fallback .portrait-seal {
  right: -5px;
  bottom: -5px;
}

/* ---------- 3. 桌面端：放大一格栅；照片比剪影宽 10px，占据原 78px 栅格 ---------- */
.beat:has(.portrait-photo) {
  grid-template-columns: 92px minmax(0, 1fr);
}

/* ---------- 4. 平板 / 手机 ---------- */
@media (max-width: 980px) {
  .beat:has(.portrait-photo) { grid-template-columns: 78px minmax(0, 1fr); }
  .portrait:has(.portrait-photo) .portrait-photo { width: 74px; }
}

@media (max-width: 720px) {
  .beat:has(.portrait-photo) { grid-template-columns: 66px minmax(0, 1fr); }
  .portrait:has(.portrait-photo) .portrait-photo { width: 62px; }
  .portrait:has(.portrait-photo) .portrait-seal { width: 19px; height: 19px; font-size: 9px; right: -4px; bottom: -4px; }
}

@media (max-width: 480px) {
  .beat:has(.portrait-photo) { grid-template-columns: 60px minmax(0, 1fr); }
  .portrait:has(.portrait-photo) .portrait-photo { width: 56px; }
}

/* 横屏矮屏：故事面板本身很紧，照片回到最小尺寸 */
@media (max-height: 620px) and (orientation: landscape) {
  .portrait:has(.portrait-photo) .portrait-photo { width: 58px; }
  .beat:has(.portrait-photo) { grid-template-columns: 62px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .portrait-photo,
  .beat:hover .portrait-photo,
  .beat:focus-within .portrait-photo { transition: none; transform: none; }
}

/* ==========================================================================
   5. “说明 / 关于”弹窗中的人物头像来源列表（由 PORTRAITS.creditsHTML() 生成）
   ========================================================================== */
.portrait-credits {
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid rgba(60, 43, 25, .14);
  font-family: var(--sans);
  color: var(--ink-2);
}

.portrait-credits-title {
  font-family: var(--kai);
  font-size: 16px;
  letter-spacing: .12em;
  color: var(--ink);
  margin: 0 0 6px;
}

.portrait-credits-lede,
.portrait-credits-footnote,
.portrait-credits-missing {
  font-size: 10.5px;
  line-height: 1.85;
  color: var(--muted);
  margin: 0;
}

.portrait-credits-missing {
  margin-top: 10px;
  padding: 9px 11px;
  background: rgba(140, 31, 40, .05);
  border-left: 2px solid rgba(140, 31, 40, .35);
  color: #6d4a3a;
}

.portrait-credits-missing b { color: var(--red); }

.portrait-credit-list {
  list-style: none;
  margin: 12px 0 10px;
  padding: 0;
  display: grid;
  gap: 7px;
}

.portrait-credit {
  display: grid;
  gap: 2px;
  padding: 7px 10px;
  background: rgba(200, 161, 90, .07);
  border-left: 2px solid rgba(200, 161, 90, .45);
}

.portrait-credit-name {
  font-family: var(--kai);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  color: #2b1f14;
}

.portrait-credit-sub {
  font-size: 10px;
  line-height: 1.7;
  color: var(--muted);
}

.portrait-credit-license {
  font-size: 9.5px;
  font-style: normal;
  letter-spacing: .04em;
  color: var(--gold-3);
}

.portrait-credits-footnote {
  border-top: 1px dashed rgba(60, 43, 25, .12);
  padding-top: 9px;
  color: rgba(132, 114, 95, .92);
}

/* ==========================================================================
   6. 虚拟形象（代码绘制的民国木刻/线描插画，非照片）
   —— 与历史照片并置时：同为棕褐单色、同尺寸、同相框，但相框更"纸本"、边缘更硬，
      让玩家能分辨"这是画出来的"，同时不破坏整组观感。
   ========================================================================== */
.portrait-photo.portrait-virtual {
  background: #efe8da;
  border-color: rgba(120, 92, 54, .55);
  box-shadow:
    0 0 0 1px rgba(18, 12, 8, .42),
    inset 0 0 0 1px rgba(246, 232, 203, .30),
    0 6px 16px -8px rgba(0, 0, 0, .55);
  filter: saturate(.92) contrast(1.02);
}

/* 虚拟形象加"纸本画框"双线：外粗内细，区别于照片的单线相框 */
.portrait:has(> .portrait-virtual)::before,
.portrait:has(.portrait-virtual)::before {
  border: 1px solid rgba(120, 92, 54, .38);
  box-shadow: inset 0 0 0 4px rgba(239, 232, 218, .35);
  background: none;
  mix-blend-mode: normal;
}

.beat:hover .portrait-virtual {
  transform: translateY(-1px);
}

/* 关于弹窗：分组标题 + 虚拟形象条目的左侧朱砂细线 */
.portrait-credits-group {
  font-family: var(--kai);
  font-size: 12.5px;
  letter-spacing: .10em;
  color: var(--ink-2);
  margin: 14px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(60, 43, 25, .12);
}

.portrait-credit.is-virtual {
  background: rgba(140, 31, 40, .045);
  border-left-color: rgba(140, 31, 40, .45);
}

.portrait-credit.is-virtual .portrait-credit-name::after {
  content: " · 绘";
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--red);
  vertical-align: 2px;
}

.portrait-credits-lede b { color: var(--ink); font-weight: 500; }
.portrait-credits-lede u { text-decoration: none; color: var(--red); }