/* =========================================================================
   Timeline Focus — 档案播放页焦点强化
   目的：解决用户反馈 "不知道哪里在播放、字一闪而过、字差异不大"
   方法：
     · 最新一条 .tl-now 放大 + 发光 + "正在归档" 徽章 + afterglow 入场动画
     · 非当前条目降对比，拉开视觉层级
     · kind/fatal/choice 的颜色差异放大（字体颜色、左条、背景）
     · 入场动画 afterglow 与 framer-motion 的 0.32s 叠加，让条目 "停留" 约 1.5s
   依赖：index.html 内 tagger IIFE（给最新 .timeline-entry 加 .tl-now）
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. 基础：历史条目 vs 当前条目 的对比层级
   --------------------------------------------------------------------------- */
.timeline-scroll .timeline-entry {
  transition:
    opacity 0.5s ease,
    filter  0.5s ease,
    transform 0.5s ease;
}

/* 非当前条目：降对比，字稍缩（让最新条目自动成为视觉焦点） */
.timeline-scroll .timeline-entry:not(.tl-now) {
  opacity: 0.55;
  filter: saturate(0.75);
}
.timeline-scroll .timeline-entry:not(.tl-now) .timeline-title {
  font-size: 14px;
  opacity: 0.92;
}
.timeline-scroll .timeline-entry:not(.tl-now) .timeline-result {
  font-size: 12.5px;
  line-height: 1.5;
  opacity: 0.8;
}

/* ---------------------------------------------------------------------------
   2. 当前条目 (.tl-now) — 视觉最强焦点
   --------------------------------------------------------------------------- */
.timeline-scroll .timeline-entry.tl-now {
  position: relative;
  opacity: 1;
  filter: none;
  transform: translateZ(0);
  /* 背景渐入：金色高光衬底 */
  background: linear-gradient(
    90deg,
    rgba(255, 205, 102, 0.10) 0%,
    rgba(255, 205, 102, 0.04) 40%,
    transparent 100%
  );
  border-left: 3px solid rgba(255, 205, 102, 0.85);
  padding-left: 14px !important;
  border-radius: 0 10px 10px 0;
  box-shadow:
    0 0 0 1px rgba(255, 205, 102, 0.22) inset,
    0 10px 30px -16px rgba(255, 205, 102, 0.55);
  animation: tl-now-enter 1.4s ease-out both;
  z-index: 1;
}

/* 标题放大 + 颜色上移 */
.timeline-scroll .timeline-entry.tl-now .timeline-age {
  color: rgba(255, 220, 140, 0.95);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.timeline-scroll .timeline-entry.tl-now .timeline-title {
  font-size: 17px;
  font-weight: 700;
  color: rgba(255, 240, 210, 0.98);
  line-height: 1.45;
}
.timeline-scroll .timeline-entry.tl-now .timeline-result {
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(230, 235, 245, 0.94);
}

/* "正在归档" 脉冲徽章 —— 绝对定位到 tl-now 右上角 */
.timeline-scroll .timeline-entry.tl-now::before {
  content: "● 正在归档";
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(255, 205, 102, 0.95);
  padding: 3px 8px;
  border: 1px solid rgba(255, 205, 102, 0.55);
  border-radius: 999px;
  background: rgba(255, 205, 102, 0.08);
  animation: tl-now-badge-pulse 1.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
html[lang^="en"] .timeline-scroll .timeline-entry.tl-now::before {
  content: "● ARCHIVING";
}

/* 呼吸 ring — 用 ::after 叠一个外发光圈，入场时扩散 */
.timeline-scroll .timeline-entry.tl-now::after {
  content: "";
  position: absolute;
  inset: -4px -8px -4px -6px;
  border-radius: 14px;
  pointer-events: none;
  border: 1px solid rgba(255, 205, 102, 0.35);
  box-shadow: 0 0 24px -6px rgba(255, 205, 102, 0.55);
  animation: tl-now-ring-fade 1.4s ease-out both;
}

/* ---------------------------------------------------------------------------
   3. kind / fatal / choice / milestone 的颜色差异
   ---------------------------------------------------------------------------
   覆盖到 .tl-now 状态上，让 "今天在播放一段什么样的事" 视觉一眼可辨。
   也对非 now 条目生效（降对比度下），但主要强化最新一条的颜色基调。
*/

/* cosmic — 紫/靛青（超自然/危机残响） */
.timeline-scroll .timeline-entry.kind-cosmic {
  --tl-accent: 168, 132, 255;
}
.timeline-scroll .timeline-entry.kind-cosmic.tl-now {
  background: linear-gradient(
    90deg,
    rgba(168, 132, 255, 0.13) 0%,
    rgba(168, 132, 255, 0.04) 50%,
    transparent 100%
  );
  border-left-color: rgba(168, 132, 255, 0.90);
  box-shadow:
    0 0 0 1px rgba(168, 132, 255, 0.22) inset,
    0 10px 30px -12px rgba(168, 132, 255, 0.55);
}
.timeline-scroll .timeline-entry.kind-cosmic.tl-now::before {
  color: rgba(198, 170, 255, 0.98);
  border-color: rgba(168, 132, 255, 0.55);
  background: rgba(168, 132, 255, 0.10);
}

/* danger — 红 */
.timeline-scroll .timeline-entry.kind-danger.tl-now,
.timeline-scroll .timeline-entry.tl-fatal.tl-now {
  background: linear-gradient(
    90deg,
    rgba(255, 98, 98, 0.14) 0%,
    rgba(255, 98, 98, 0.03) 50%,
    transparent 100%
  );
  border-left-color: rgba(255, 98, 98, 0.92);
  box-shadow:
    0 0 0 1px rgba(255, 98, 98, 0.24) inset,
    0 10px 30px -12px rgba(255, 98, 98, 0.55);
}
.timeline-scroll .timeline-entry.kind-danger.tl-now::before,
.timeline-scroll .timeline-entry.tl-fatal.tl-now::before {
  color: rgba(255, 180, 180, 0.98);
  border-color: rgba(255, 98, 98, 0.55);
  background: rgba(255, 98, 98, 0.10);
}
.timeline-scroll .timeline-entry.tl-fatal.tl-now::before {
  content: "● 致命事件";
}
html[lang^="en"] .timeline-scroll .timeline-entry.tl-fatal.tl-now::before {
  content: "● FATAL EVENT";
}

/* wonder — 青绿（奇迹/正面） */
.timeline-scroll .timeline-entry.kind-wonder.tl-now {
  background: linear-gradient(
    90deg,
    rgba(102, 220, 188, 0.13) 0%,
    rgba(102, 220, 188, 0.03) 50%,
    transparent 100%
  );
  border-left-color: rgba(102, 220, 188, 0.90);
  box-shadow:
    0 0 0 1px rgba(102, 220, 188, 0.22) inset,
    0 10px 30px -12px rgba(102, 220, 188, 0.55);
}
.timeline-scroll .timeline-entry.kind-wonder.tl-now::before {
  color: rgba(160, 240, 218, 0.98);
  border-color: rgba(102, 220, 188, 0.55);
  background: rgba(102, 220, 188, 0.10);
}

/* choice-prompt — 青蓝（需要玩家决定的瞬间） */
.timeline-scroll .timeline-entry.choice-prompt.tl-now,
.timeline-scroll .timeline-entry.tl-choice.tl-now {
  border-left-color: rgba(110, 200, 255, 0.90);
  background: linear-gradient(
    90deg,
    rgba(110, 200, 255, 0.14) 0%,
    rgba(110, 200, 255, 0.03) 50%,
    transparent 100%
  );
  box-shadow:
    0 0 0 1px rgba(110, 200, 255, 0.24) inset,
    0 10px 30px -12px rgba(110, 200, 255, 0.55);
}
.timeline-scroll .timeline-entry.tl-choice.tl-now::before,
.timeline-scroll .timeline-entry.choice-prompt.tl-now::before {
  content: "◆ 需要抉择";
  color: rgba(180, 225, 255, 0.98);
  border-color: rgba(110, 200, 255, 0.55);
  background: rgba(110, 200, 255, 0.10);
}
html[lang^="en"] .timeline-scroll .timeline-entry.tl-choice.tl-now::before,
html[lang^="en"] .timeline-scroll .timeline-entry.choice-prompt.tl-now::before {
  content: "◆ CHOICE";
}

/* milestone — 人生节点（生/上学/成年/50 等）加星标 */
.timeline-scroll .timeline-entry.tl-milestone .timeline-age::before {
  content: "✦ ";
  color: rgba(255, 205, 102, 0.9);
  margin-right: 2px;
}
.timeline-scroll .timeline-entry.tl-milestone.tl-now .timeline-age::before {
  color: rgba(255, 230, 160, 1);
  text-shadow: 0 0 6px rgba(255, 205, 102, 0.7);
}

/* decade — 每十年一个醒目水平线 */
.timeline-scroll .timeline-entry.tl-decade {
  margin-top: 18px;
  border-top: 1px dashed rgba(255, 205, 102, 0.2);
  padding-top: 12px;
}

/* ---------------------------------------------------------------------------
   4. Animations
   --------------------------------------------------------------------------- */
@keyframes tl-now-enter {
  0% {
    transform: translateX(-8px) scale(0.98);
    box-shadow:
      0 0 0 1px rgba(255, 205, 102, 0.5) inset,
      0 16px 48px -12px rgba(255, 205, 102, 0.9);
  }
  30% {
    transform: translateX(0) scale(1.02);
  }
  100% {
    transform: translateX(0) scale(1);
    box-shadow:
      0 0 0 1px rgba(255, 205, 102, 0.22) inset,
      0 10px 30px -16px rgba(255, 205, 102, 0.55);
  }
}

@keyframes tl-now-ring-fade {
  0%   { opacity: 1; transform: scale(1); }
  70%  { opacity: 0.4; transform: scale(1.015); }
  100% { opacity: 0;   transform: scale(1.03); }
}

@keyframes tl-now-badge-pulse {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(255, 205, 102, 0.45);
  }
  50% {
    opacity: 0.75;
    box-shadow: 0 0 0 6px rgba(255, 205, 102, 0);
  }
}

/* ---------------------------------------------------------------------------
   5. 响应式：手机更紧凑，但焦点徽章和发光保留
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .timeline-scroll .timeline-entry.tl-now .timeline-title {
    font-size: 16px;
  }
  .timeline-scroll .timeline-entry.tl-now .timeline-result {
    font-size: 13.5px;
  }
  .timeline-scroll .timeline-entry.tl-now::before {
    font-size: 9.5px;
    padding: 2px 7px;
  }

  /* 让手机浏览器允许整页垂直滚动——有些构建里 body 被锁成视口高度
     手势会卡在 timeline-panel 里滑不出去。下面是强制放开： */
  html, body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100%;
    -webkit-overflow-scrolling: touch;
  }

  /* 手机端：timeline-scroll 限高，让速度按钮保持可触达，
     底部也留出一圈空间让玩家能往下看其他面板。
     因 .timeline-copy-block 被隐藏、.timeline-head 变紧凑，这里调到 72vh。 */
  .timeline-scroll {
    max-height: 72vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    /* contain 会把手势吃掉滚不出去；auto 在 timeline-scroll 触顶/触底
       后把剩余滑动传给 body，让用户继续滑整页 */
    overscroll-behavior-y: auto !important;
    /* 明确手势轴，防止跟 React 某些 touch-action: none 冲突 */
    touch-action: pan-y !important;
  }

  /* 用户反馈：红色圈出的 .timeline-head / .timeline-actions 区域
     要能驱动整页滚动——明确 touch-action，别让祖先 touch-action: none 阻断 */
  .timeline-panel,
  .timeline-panel .timeline-head,
  .timeline-panel .timeline-actions,
  .timeline-panel .speed-switch,
  .timeline-panel .timeline-head::before,
  .timeline-panel .timeline-head::after {
    touch-action: pan-y !important;
  }
  .timeline-panel {
    /* 防止 panel 自身 overflow: hidden 锁死整页手势 */
    overflow: visible !important;
  }

  /* 用户反馈：顶部 "LIFE PLAYBACK / 生平回放 / 人生会按更慢的节奏..." 占屏太多，
     手机端隐藏；保留 .timeline-actions（速度档位 / 继续） */
  .timeline-panel .timeline-head .timeline-copy-block {
    display: none !important;
  }
  .timeline-panel .timeline-head {
    padding-bottom: 8px !important;
    padding-top: 8px !important;
  }
  /* .timeline-actions 内部若有 gap/padding 累积，也紧凑一点 */
  .timeline-panel .timeline-actions {
    padding-top: 4px !important;
  }
}

/* ---------------------------------------------------------------------------
   7. Prologue 序章卡 —— 已根据用户反馈移除
       保留 display:none 兜底，防止旧缓存/CDN 边缘节点残留时误显示。
   --------------------------------------------------------------------------- */
.tl-prologue { display: none !important; }

/* ---------------------------------------------------------------------------
   8. 跳回正在归档 浮动按钮
       当用户手动回滚查看历史时，右下角浮出一个引导回 latest 的按钮。
   --------------------------------------------------------------------------- */
.tl-follow-btn {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 40;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 205, 102, 0.55);
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(28, 20, 10, 0.92),
    rgba(20, 14, 6, 0.92)
  );
  color: rgba(255, 230, 170, 0.96);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    0 12px 32px -10px rgba(255, 205, 102, 0.4),
    0 0 0 1px rgba(255, 205, 102, 0.18) inset;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
}
.tl-follow-btn.is-visible {
  display: inline-flex;
  opacity: 1;
  transform: translateY(0);
  animation: tl-follow-pop 0.35s ease-out both;
}
.tl-follow-btn:hover {
  background: linear-gradient(
    180deg,
    rgba(40, 28, 12, 0.95),
    rgba(28, 20, 8, 0.95)
  );
}
.tl-follow-btn__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255, 205, 102, 0.95);
  box-shadow: 0 0 10px rgba(255, 205, 102, 0.9);
  animation: tl-follow-dot 1.4s ease-in-out infinite;
}
.tl-follow-btn__arrow {
  font-size: 12px;
  opacity: 0.85;
}

@keyframes tl-follow-pop {
  0%   { opacity: 0; transform: translateY(14px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes tl-follow-dot {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%      { transform: scale(1.3); opacity: 0.6; }
}

@media (max-width: 720px) {
  .tl-follow-btn {
    right: 12px;
    bottom: 14px;
    padding: 9px 14px;
    font-size: 12.5px;
  }
}

/* ---------------------------------------------------------------------------
   9. 延长 tl-now afterglow，制造 "慢读" 视觉错觉
       React pace=1 (慢读) 已是最慢档，无法再软化 DOM 推进节奏；但 CSS 让
       当前条目的金色 glow 从 1.4s 延长到 3s，让用户视觉上感到 "字在停留"。
   --------------------------------------------------------------------------- */
.timeline-scroll .timeline-entry.tl-now {
  animation: tl-now-enter 3s ease-out both;
}
.timeline-scroll .timeline-entry.tl-now::after {
  animation: tl-now-ring-fade 3s ease-out both;
}

/* ---------------------------------------------------------------------------
   6. prefers-reduced-motion
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .timeline-scroll .timeline-entry.tl-now,
  .timeline-scroll .timeline-entry.tl-now::before,
  .timeline-scroll .timeline-entry.tl-now::after,
  .timeline-scroll .timeline-entry,
  .tl-prologue,
  .tl-follow-btn,
  .tl-follow-btn__dot {
    animation: none !important;
    transition: none !important;
  }
  .timeline-scroll .timeline-entry.tl-now::before {
    box-shadow: 0 0 0 4px rgba(255, 205, 102, 0.2) !important;
  }
}

/* ---------------------------------------------------------------------------
   10. 奇遇浮窗 (.encounter-dialogue) —— 强制屏幕正中央、无 backdrop、不阻断其它交互
       用户反馈：奇遇总是出现在屏幕上方（React 把它渲染在 timeline-head 和
       timeline-scroll 之间），一旦用户滑到下面就看不见。要求：不管滑到哪里
       都能看见。做法：position: fixed 钉在视口中心，外围保持透明让其它区域
       仍可交互，用金色呼吸光晕提醒玩家"这里在等你抉择"。

       注意：.choice-prompt 不是浮窗——它是 timeline-entry 上的一个 class
       （标记"这条曾经做过选择"），不要再把它 fixed 掉。
   --------------------------------------------------------------------------- */
.encounter-dialogue {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  z-index: 9500 !important;
  width: min(540px, 92vw) !important;
  max-width: 92vw !important;
  max-height: 80vh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(
    180deg,
    rgba(26, 18, 12, 0.96),
    rgba(16, 12, 20, 0.96)
  ) !important;
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border: 1px solid rgba(255, 205, 102, 0.45) !important;
  border-radius: 20px !important;
  padding: 22px 24px !important;
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 205, 102, 0.22),
    0 0 70px rgba(255, 205, 102, 0.36),
    0 0 130px rgba(124, 72, 255, 0.22) !important;
  animation:
    encounter-pop 0.45s cubic-bezier(0.2, 0.8, 0.3, 1.2) both,
    encounter-halo 3s ease-in-out infinite 0.5s;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* kind 变体 —— 按 encounterKind 微调配色，复用 body 里已用的颜色体系 */
.encounter-dialogue.kind-cosmic {
  border-color: rgba(124, 160, 255, 0.55) !important;
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.7),
    0 0 70px rgba(124, 160, 255, 0.42),
    0 0 130px rgba(92, 120, 255, 0.28) !important;
}
.encounter-dialogue.kind-danger,
.encounter-dialogue.kind-fatal {
  border-color: rgba(255, 120, 120, 0.55) !important;
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.7),
    0 0 70px rgba(255, 120, 120, 0.42),
    0 0 130px rgba(255, 80, 80, 0.28) !important;
}
.encounter-dialogue.kind-wonder {
  border-color: rgba(180, 140, 255, 0.6) !important;
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.7),
    0 0 70px rgba(180, 140, 255, 0.42),
    0 0 130px rgba(140, 100, 255, 0.28) !important;
}

/* 内部排版：kicker 金色、标题大号、两个按钮横排 */
.encounter-dialogue .encounter-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffd27a;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.encounter-dialogue .encounter-copy strong {
  display: block;
  font-size: 20px;
  line-height: 1.32;
  color: #fff;
  margin-bottom: 10px;
}
.encounter-dialogue .encounter-copy p {
  color: rgba(230, 228, 240, 0.88);
  font-size: 14.5px;
  line-height: 1.7;
}
.encounter-dialogue .encounter-actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.encounter-dialogue .encounter-actions .encounter-btn {
  flex: 1 1 140px;
  min-width: 140px;
}

@keyframes encounter-pop {
  0%   { opacity: 0; transform: translate(-50%, -46%) scale(0.92); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes encounter-halo {
  0%, 100% {
    filter: drop-shadow(0 0 16px rgba(255, 205, 102, 0.25));
  }
  50% {
    filter: drop-shadow(0 0 32px rgba(255, 205, 102, 0.55));
  }
}

@media (max-width: 720px) {
  .encounter-dialogue {
    width: 94vw !important;
    max-height: 74vh !important;
    padding: 18px 18px !important;
    border-radius: 18px !important;
  }
  .encounter-dialogue .encounter-copy strong {
    font-size: 18px;
  }
  .encounter-dialogue .encounter-copy p {
    font-size: 14px;
  }
  .encounter-dialogue .encounter-actions .encounter-btn {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .encounter-dialogue {
    animation: none !important;
  }
}