/* ==========================================================================
   DC 人生模拟器 · Style Upgrade v1
   基于 Lamborghini (黑金戏剧性) + Spotify (暗色组件) 设计系统重构
   覆盖编译后 CSS，提升游戏沉浸感与视觉品质
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. ROOT — 全局变量 & 基础氛围
   -------------------------------------------------------------------------- */
:root {
  --u-bg-abyss: #060a12;
  --u-bg-surface-1: #0b101b;
  --u-bg-surface-2: #0e1320;
  --u-bg-surface-3: #111828;
  --u-text-primary: #e8eeff;
  --u-text-secondary: #8a9ec8;
  --u-text-muted: #5a6d94;
  --u-accent-purple: #9b6dff;
  --u-accent-gold: #f0b840;
  --u-accent-gold-dim: #c89520;
  --u-border-subtle: rgba(140, 170, 255, 0.08);
  --u-border-medium: rgba(140, 170, 255, 0.15);
  --u-glow-purple: rgba(155, 109, 255, 0.35);
  --u-glow-gold: rgba(240, 184, 64, 0.30);
  --u-glow-blue: rgba(100, 160, 255, 0.20);
  --u-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 深化背景 — 从 #090d14 推到更深的 #060a12，增加对比度空间 */
body {
  background: var(--u-bg-abyss) !important;
}

/* 微妙的全局网格纹理 — 增加"数据终端"质感 */
.app-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(100, 140, 255, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(155, 109, 255, 0.02) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* 背景装饰光晕 — 给 backdrop-glow 更丰富的色彩层次 */
.backdrop-glow {
  opacity: 0.6 !important;
  filter: blur(80px) saturate(1.4) !important;
}

/* 背景网格 — 增强可见度 */
.backdrop-grid {
  opacity: 0.04 !important;
}

/* --------------------------------------------------------------------------
   1. TYPOGRAPHY — 更戏剧性的排版
   -------------------------------------------------------------------------- */

/* Orbitron 标题增加微妙的发光效果 */
.font-display,
[class*="font-display"],
.hero-topline,
.panel-kicker,
.llm-stage-label,
.llm-hero-badge,
.llm-stream-hint,
.llm-ending-badge,
.encounter-kicker,
.timeline-age,
.seal-kicker,
.card-rarity-badge,
.dex-title {
  text-shadow: 0 0 30px rgba(155, 109, 255, 0.15) !important;
}

/* 大标题增强 — Lamborghini 式的"钢印"压迫感 */
.hero-text h1,
.ending-hero h1,
.llm-hero h2 {
  text-shadow:
    0 0 40px rgba(155, 109, 255, 0.2),
    0 2px 8px rgba(0, 0, 0, 0.6) !important;
  letter-spacing: 0.04em !important;
}

/* 次要文字色提升可读性 */
.hero-copy,
.ending-lead,
.timeline-copy p,
.encounter-copy p {
  color: #c8d5f0 !important;
}

/* --------------------------------------------------------------------------
   2. PANELS — Lamborghini 暗色层叠 + 微边框
   -------------------------------------------------------------------------- */
.panel {
  background:
    linear-gradient(145deg, rgba(15, 20, 35, 0.95), rgba(8, 12, 22, 0.98)) !important;
  border: 1px solid var(--u-border-subtle) !important;
  box-shadow:
    0 4px 24px -4px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: border-color var(--u-transition), box-shadow var(--u-transition) !important;
}

.panel:hover {
  border-color: var(--u-border-medium) !important;
}

/* 面板头部 — 更强的层次分割 */
.panel-head {
  border-bottom: 1px solid var(--u-border-subtle) !important;
  padding-bottom: 12px !important;
  margin-bottom: 14px !important;
}

/* 面板 kicker 标签 — 金色调 Lamborghini 风格 */
.panel-kicker {
  color: var(--u-accent-gold) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 20px var(--u-glow-gold) !important;
}

/* --------------------------------------------------------------------------
   3. BUTTONS — Spotify 药丸 + Lamborghini 金色能量
   -------------------------------------------------------------------------- */

/* 主按钮 — 增强渐变和光效 */
.primary-btn,
.primary-btn-start {
  background: linear-gradient(135deg, #7c5cff 0%, #5a3de8 50%, #8b6dff 100%) !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow:
    0 6px 20px -4px var(--u-glow-purple),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  transition: all var(--u-transition) !important;
  position: relative !important;
  overflow: hidden !important;
}

.primary-btn:hover,
.primary-btn-start:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow:
    0 10px 32px -4px rgba(155, 109, 255, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  filter: brightness(1.1) !important;
}

.primary-btn:active,
.primary-btn-start:active {
  transform: translateY(0) scale(0.98) !important;
}

/* 幽灵按钮 — 更精致的边框 */
.ghost-btn {
  border: 1px solid rgba(155, 130, 255, 0.25) !important;
  border-radius: 999px !important;
  background: rgba(155, 130, 255, 0.04) !important;
  color: #bfb0ff !important;
  transition: all var(--u-transition) !important;
  backdrop-filter: blur(4px) !important;
}

.ghost-btn:hover {
  background: rgba(155, 130, 255, 0.12) !important;
  border-color: rgba(155, 130, 255, 0.45) !important;
  color: #e0d6ff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px -4px var(--u-glow-purple) !important;
}

/* 铸造按钮 — 命运金 CTA，Lamborghini Gold 策略 */
.mint-btn {
  background: linear-gradient(120deg, #ffba3e 0%, #ff9d3c 50%, #ff7043 100%) !important;
  color: #1a0f05 !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  box-shadow:
    0 8px 28px -4px rgba(255, 150, 50, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  transition: all var(--u-transition) !important;
}

.mint-btn:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow:
    0 14px 40px -4px rgba(255, 150, 50, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 0 0 4px rgba(255, 180, 60, 0.12) !important;
  filter: brightness(1.08) !important;
}

/* 速度切换按钮 — 紧凑药丸 */
.speed-btn {
  border-radius: 999px !important;
  transition: all var(--u-transition) !important;
}

.speed-btn.active {
  box-shadow: 0 0 12px rgba(155, 109, 255, 0.3) !important;
}

/* 遭遇按钮 — 更有游戏感的选择卡片 */
.encounter-btn {
  border-radius: 16px !important;
  border: 1px solid var(--u-border-medium) !important;
  transition: all var(--u-transition) !important;
  position: relative !important;
  overflow: hidden !important;
}

.encounter-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(155, 109, 255, 0.06), transparent 60%);
  opacity: 0;
  transition: opacity var(--u-transition);
  pointer-events: none;
}

.encounter-btn:hover {
  border-color: rgba(155, 130, 255, 0.35) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 8px 24px -6px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(155, 130, 255, 0.15) !important;
}

.encounter-btn:hover::before {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   4. ENCOUNTER DIALOGUE — 电影级对话框
   -------------------------------------------------------------------------- */
.encounter-dialogue {
  border: 1px solid rgba(130, 160, 255, 0.12) !important;
  border-radius: 20px !important;
  box-shadow:
    0 12px 40px -8px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* 顶部微光条 — 类似游戏对话框的装饰线 */
.encounter-dialogue::after {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(155, 130, 255, 0.4), transparent);
  pointer-events: none;
}

.encounter-dialogue.kind-cosmic {
  border-color: rgba(180, 160, 255, 0.2) !important;
}
.encounter-dialogue.kind-cosmic::after {
  background: linear-gradient(90deg, transparent, rgba(200, 180, 255, 0.5), transparent) !important;
}

.encounter-dialogue.kind-danger {
  border-color: rgba(255, 120, 100, 0.15) !important;
}
.encounter-dialogue.kind-danger::after {
  background: linear-gradient(90deg, transparent, rgba(255, 140, 120, 0.4), transparent) !important;
}

.encounter-dialogue.kind-wonder {
  border-color: rgba(100, 180, 255, 0.15) !important;
}
.encounter-dialogue.kind-wonder::after {
  background: linear-gradient(90deg, transparent, rgba(130, 200, 255, 0.4), transparent) !important;
}

/* 遭遇 kicker — 金色科幻标签 */
.encounter-kicker {
  color: var(--u-accent-gold) !important;
  text-shadow: 0 0 16px var(--u-glow-gold) !important;
}

/* --------------------------------------------------------------------------
   5. TIMELINE — 更沉浸的时间线
   -------------------------------------------------------------------------- */

/* 时间线面板 — 增强背景深度 */
.timeline-panel {
  background:
    linear-gradient(180deg, rgba(8, 12, 22, 0.4), rgba(6, 10, 18, 0.8)) !important;
  border: 1px solid var(--u-border-subtle) !important;
  border-radius: 20px !important;
}

/* 时间线条目 — 更优雅的分隔 */
.timeline-entry {
  border-top-color: rgba(120, 150, 220, 0.08) !important;
  transition: background var(--u-transition) !important;
}

.timeline-entry:hover {
  background: rgba(100, 140, 255, 0.03) !important;
}

/* 年龄标签 — Orbitron 金色 */
.timeline-age {
  color: var(--u-accent-gold) !important;
  text-shadow: 0 0 20px var(--u-glow-gold) !important;
  font-weight: 700 !important;
}

/* 致命事件年龄 — 红色警告 */
.timeline-entry.fatal .timeline-age {
  color: #ff8a78 !important;
  text-shadow: 0 0 20px rgba(255, 100, 80, 0.4) !important;
}

/* 遭遇事件侧边发光条 — 增强 */
.timeline-entry.accent-encounter:before,
.timeline-entry.accent-encounter-result:before {
  width: 3px !important;
  filter: blur(0.5px) !important;
}

/* 选择提示 — 更明显的卡片感 */
.timeline-entry.choice-prompt {
  background: rgba(155, 109, 255, 0.04) !important;
  border: 1px solid rgba(155, 130, 255, 0.1) !important;
  border-radius: 18px !important;
}

/* --------------------------------------------------------------------------
   6. SIMULATION SCREEN — 推演页增强
   -------------------------------------------------------------------------- */
.simulation-screen {
  gap: 20px !important;
}

/* 角色信息面板 — 更精致 */
.simulation-summary {
  border-radius: 20px !important;
}

/* 路线盒子 — 增加光效 */
.route-box {
  border: 1px solid var(--u-border-medium) !important;
  border-radius: 14px !important;
  background: rgba(10, 15, 28, 0.7) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

/* 角色立绘 — 增加暗角 */
.portrait-shell {
  border-radius: 14px !important;
  overflow: hidden !important;
}

.portrait-vignette {
  background: radial-gradient(ellipse at center, transparent 50%, rgba(6, 10, 18, 0.7)) !important;
}

/* 控制面板 — 工具栏美化 */
.control-panel {
  background: rgba(10, 15, 25, 0.85) !important;
  border: 1px solid var(--u-border-subtle) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* --------------------------------------------------------------------------
   7. LLM GENERATION SCREEN — AI 生成页
   -------------------------------------------------------------------------- */

/* 生成页 hero — 更戏剧性 */
.llm-hero {
  border-radius: 20px !important;
  box-shadow:
    0 8px 32px -8px rgba(155, 89, 182, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* 进度条 — 增强光效 */
.llm-progress-fill {
  box-shadow: 0 0 12px rgba(192, 132, 252, 0.4) !important;
}

/* 生成阶段 — 更清晰的状态指示 */
.llm-stage {
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin-bottom: 4px !important;
  transition: all var(--u-transition) !important;
}

.llm-stage.stage-active {
  background: rgba(155, 89, 182, 0.06) !important;
  border-left-width: 3px !important;
}

.llm-stage.stage-done {
  border-left-width: 3px !important;
}

/* 阶段圆点 — 增强发光 */
.llm-stage-dot.dot-active {
  box-shadow: 0 0 10px rgba(192, 132, 252, 0.6) !important;
}

.llm-stage-dot.dot-done {
  box-shadow: 0 0 8px rgba(107, 247, 93, 0.4) !important;
}

/* 工具栏 — 更精致 */
.llm-toolbar {
  border-radius: 14px !important;
  border-color: var(--u-border-subtle) !important;
  background: rgba(255, 255, 255, 0.02) !important;
}

/* 流式打字指示器 */
.llm-stream-typing {
  border-radius: 14px !important;
}

/* --------------------------------------------------------------------------
   8. ENDING SCREEN — 结局页，最大戏剧性
   -------------------------------------------------------------------------- */

/* 结局 hero — 更震撼的呈现 */
.ending-hero {
  gap: 32px !important;
}

.ending-hero h1 {
  line-height: 1.05 !important;
}

/* 结局描述 — 红色调高亮 */
.ending-lead {
  color: #ffcabf !important;
  text-shadow: 0 0 20px rgba(255, 180, 160, 0.15) !important;
}

/* 统计卡片网格 — 增强 */
.metric-grid {
  gap: 12px !important;
}

/* 统计面板 — 半透明卡片 + 微发光 */
.stat-row {
  background: rgba(12, 17, 28, 0.7) !important;
  border: 1px solid var(--u-border-subtle) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  transition: all var(--u-transition) !important;
}

.stat-row:hover {
  border-color: var(--u-border-medium) !important;
  background: rgba(14, 20, 34, 0.8) !important;
}

.stat-panel-label {
  letter-spacing: 0.1em !important;
}

/* --------------------------------------------------------------------------
   9. TCG CARDS — 卡牌系统增强
   -------------------------------------------------------------------------- */

/* 卡牌整体 — 增强悬浮感 */
.tcg-card {
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.05),
              box-shadow 0.35s ease !important;
}

.tcg-card:hover {
  transform: translateY(-6px) scale(1.02) !important;
}

/* 稀有度 glow 增强 */
.tcg-card.rarity-rare:hover {
  box-shadow:
    0 16px 44px rgba(224, 184, 76, 0.5),
    0 6px 16px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(224, 184, 76, 0.3) !important;
}

.tcg-card.rarity-epic:hover {
  box-shadow:
    0 16px 44px rgba(179, 136, 235, 0.55),
    0 6px 16px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(179, 136, 235, 0.3) !important;
}

.tcg-card.rarity-legendary:hover {
  box-shadow:
    0 16px 44px rgba(255, 107, 71, 0.55),
    0 6px 16px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 107, 71, 0.3) !important;
}

/* 铸卡仪式增强 — 更强的光效 */
.mint-ritual {
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

.mint-ritual-beam {
  filter: blur(2px) !important;
  opacity: 0.8 !important;
}

/* 成功标签 — 金色发光 */
.mint-success-label {
  text-shadow: 0 0 20px rgba(107, 247, 93, 0.4) !important;
}

/* --------------------------------------------------------------------------
   10. COLLECTION / DEX — 收藏页增强
   -------------------------------------------------------------------------- */

/* 收藏页头部 */
.collection-header {
  border-bottom: 1px solid var(--u-border-subtle) !important;
  padding-bottom: 16px !important;
}

/* 收藏网格 */
.collection-grid {
  gap: 16px !important;
}

/* Dex 模态 */
.dex-modal {
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

.dex-modal-inner {
  background:
    linear-gradient(145deg, rgba(12, 17, 30, 0.98), rgba(6, 10, 18, 0.99)) !important;
  border: 1px solid var(--u-border-medium) !important;
  border-radius: 24px !important;
  box-shadow:
    0 24px 80px -12px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(155, 130, 255, 0.08) !important;
}

/* Dex 卡槽 — 增强空槽和已填充状态 */
.dex-slot {
  border-radius: 12px !important;
  transition: all var(--u-transition) !important;
}

.dex-slot.empty {
  border: 1px dashed rgba(100, 130, 200, 0.15) !important;
  background: rgba(100, 130, 200, 0.03) !important;
}

.dex-slot.filled {
  border: 1px solid var(--u-border-medium) !important;
}

.dex-slot.filled:hover {
  border-color: rgba(155, 130, 255, 0.35) !important;
  box-shadow: 0 4px 16px -4px var(--u-glow-purple) !important;
  transform: translateY(-2px) !important;
}

/* 稀有度筛选芯片 — Spotify 药丸风格 */
.dex-rarity-chip {
  border-radius: 999px !important;
  transition: all var(--u-transition) !important;
}

.dex-rarity-chip.active {
  box-shadow: 0 0 12px var(--u-glow-purple) !important;
}

/* Dex 标题 */
.dex-title {
  letter-spacing: 0.08em !important;
}

/* --------------------------------------------------------------------------
   11. TRADE / EXCHANGE — 交易页
   -------------------------------------------------------------------------- */
.trade-landing {
  border-radius: 24px !important;
}

.trade-landing-inner {
  background:
    linear-gradient(145deg, rgba(12, 17, 30, 0.96), rgba(8, 12, 22, 0.98)) !important;
  border: 1px solid var(--u-border-medium) !important;
  border-radius: 24px !important;
  box-shadow:
    0 20px 60px -12px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.trade-kicker {
  color: var(--u-accent-gold) !important;
  text-shadow: 0 0 16px var(--u-glow-gold) !important;
}

.trade-kicker.exchange {
  color: #7db8f0 !important;
  text-shadow: 0 0 16px var(--u-glow-blue) !important;
}

.trade-kicker.gift {
  color: #b388eb !important;
  text-shadow: 0 0 16px var(--u-glow-purple) !important;
}

/* --------------------------------------------------------------------------
   12. SIGIL — 印记组件
   -------------------------------------------------------------------------- */
.sigil-card {
  border: 1px solid var(--u-border-medium) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.5) !important;
}

.sigil-frame {
  filter: drop-shadow(0 0 12px var(--u-glow-purple)) !important;
}

.sigil-title {
  text-shadow: 0 0 20px var(--u-glow-purple) !important;
}

/* --------------------------------------------------------------------------
   13. HERO / START SCREEN — 首页增强
   -------------------------------------------------------------------------- */

/* 首页 tag 标签 — 更精致 */
.hero-tags .ghost-btn,
.hero-tags button {
  font-size: 0.72rem !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
}

/* 首页 topline — Orbitron 金色 */
.hero-topline {
  color: var(--u-accent-gold) !important;
  text-shadow: 0 0 20px var(--u-glow-gold) !important;
  letter-spacing: 0.15em !important;
}

/* --------------------------------------------------------------------------
   14. SCROLLBAR — 自定义滚动条
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(120, 150, 220, 0.15);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(120, 150, 220, 0.3);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 150, 220, 0.15) transparent;
}

/* --------------------------------------------------------------------------
   15. SELECTION — 文字选中色
   -------------------------------------------------------------------------- */
::selection {
  background: rgba(155, 109, 255, 0.3);
  color: #fff;
}

/* --------------------------------------------------------------------------
   16. TRANSITIONS — 全局过渡增强
   -------------------------------------------------------------------------- */

/* 所有可交互元素增加平滑过渡 */
a, button, [role="button"],
.dex-slot, .stat-row, .encounter-btn,
.ghost-btn, .primary-btn, .mint-btn {
  transition: all var(--u-transition) !important;
}

/* --------------------------------------------------------------------------
   19. TIMELINE MILESTONES — 人生关键节点视觉增强
   -------------------------------------------------------------------------- */

/* 里程碑条目 — 背景高亮 + 左侧金色标记 */
.tl-milestone {
  position: relative !important;
  background: linear-gradient(90deg,
    rgba(240, 184, 64, 0.06) 0%,
    rgba(240, 184, 64, 0.02) 30%,
    transparent 70%) !important;
  border-top-color: rgba(240, 184, 64, 0.15) !important;
}

/* 里程碑年龄 — 金色放大 + 发光 */
.tl-milestone .timeline-age {
  color: #f0c858 !important;
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  text-shadow:
    0 0 18px rgba(240, 200, 88, 0.5),
    0 0 40px rgba(240, 184, 64, 0.2) !important;
  position: relative !important;
}

/* 里程碑年龄后缀标记 */
.tl-milestone .timeline-age::after {
  content: "◆";
  display: block;
  font-size: 0.5rem;
  color: rgba(240, 184, 64, 0.6);
  text-align: center;
  margin-top: 2px;
  text-shadow: 0 0 8px rgba(240, 184, 64, 0.4);
}

/* 具体里程碑类型的差异化标记 */
.timeline-entry[data-milestone="birth"] .timeline-age::after { content: "★"; color: rgba(155, 220, 255, 0.8); }
.timeline-entry[data-milestone="adult"] .timeline-age::after { content: "⚡"; }
.timeline-entry[data-milestone="thirty"] .timeline-age::after { content: "◈"; }
.timeline-entry[data-milestone="midlife"] .timeline-age::after { content: "◇"; }
.timeline-entry[data-milestone="fifty"] .timeline-age::after { content: "⬥"; }
.timeline-entry[data-milestone="elder"] .timeline-age::after { content: "✦"; color: rgba(200, 180, 255, 0.7); }

/* 里程碑标题 — 微加粗 */
.tl-milestone .timeline-title {
  font-weight: 800 !important;
  color: #f0eaff !important;
}

/* 整十岁分割线 — 更强的视觉断点 */
.tl-decade {
  border-top: 1px solid rgba(120, 150, 220, 0.18) !important;
  margin-top: 4px !important;
  padding-top: 20px !important;
}

.tl-decade .timeline-age {
  font-weight: 700 !important;
  color: #c8b8ff !important;
  text-shadow: 0 0 16px rgba(155, 130, 255, 0.3) !important;
}

/* 遭遇事件 — 金色光条增强 */
.timeline-entry.accent-encounter {
  background: linear-gradient(90deg,
    rgba(240, 184, 64, 0.08) 0%,
    rgba(240, 184, 64, 0.02) 40%,
    transparent 70%) !important;
  border-top-color: rgba(240, 184, 64, 0.18) !important;
}

.timeline-entry.accent-encounter .timeline-title {
  color: #ffe8b5 !important;
}

/* 遭遇结果 — 青蓝高光 */
.timeline-entry.accent-encounter-result {
  background: linear-gradient(90deg,
    rgba(100, 180, 255, 0.06) 0%,
    transparent 60%) !important;
}

/* 分支事件 — 蓝色标记 */
.timeline-entry.accent-branch {
  background: linear-gradient(90deg,
    rgba(100, 160, 255, 0.05) 0%,
    transparent 60%) !important;
}

/* 飞升事件 — 紫色光晕 */
.timeline-entry.accent-ascension {
  background: linear-gradient(90deg,
    rgba(180, 160, 255, 0.08) 0%,
    rgba(155, 109, 255, 0.02) 40%,
    transparent 70%) !important;
  border-top-color: rgba(180, 160, 255, 0.15) !important;
}

.timeline-entry.accent-ascension .timeline-title {
  color: #e0d4ff !important;
  text-shadow: 0 0 16px rgba(180, 160, 255, 0.25) !important;
}

/* 选择提示 — 更醒目的决策卡片 */
.timeline-entry.choice-prompt {
  background: linear-gradient(135deg,
    rgba(155, 109, 255, 0.08),
    rgba(100, 160, 255, 0.04)) !important;
  border: 1px solid rgba(155, 130, 255, 0.18) !important;
  box-shadow:
    0 4px 16px -4px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

/* 致命事件 — 红色警告脉冲 */
.tl-fatal {
  background: linear-gradient(90deg,
    rgba(255, 80, 60, 0.08) 0%,
    rgba(255, 60, 40, 0.02) 40%,
    transparent 70%) !important;
  border-top-color: rgba(255, 100, 80, 0.2) !important;
}

.tl-fatal .timeline-age {
  color: #ff8a78 !important;
  text-shadow: 0 0 20px rgba(255, 100, 80, 0.5) !important;
  animation: tl-fatal-pulse 2s ease-in-out infinite !important;
}

@keyframes tl-fatal-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.tl-fatal .timeline-title {
  color: #ffd3cb !important;
  font-weight: 700 !important;
}

/* kind-cosmic — 宇宙级事件紫色氛围 */
.timeline-entry[data-kind="cosmic"] {
  background: linear-gradient(90deg,
    rgba(180, 140, 255, 0.06) 0%,
    transparent 60%) !important;
}

.timeline-entry[data-kind="cosmic"] .timeline-title {
  text-shadow: 0 0 16px rgba(200, 180, 255, 0.2) !important;
}

/* kind-wonder — 奇迹事件金色 */
.timeline-entry[data-kind="wonder"] .timeline-title {
  text-shadow: 0 0 16px rgba(200, 220, 255, 0.15) !important;
}

/* kind-danger — 危险事件红色 */
.timeline-entry[data-kind="danger"] .timeline-title {
  text-shadow: 0 0 16px rgba(255, 160, 140, 0.2) !important;
}

/* Mythic 包年龄 — 特殊金色 */
.timeline-entry.pack-mythic .timeline-age {
  text-shadow: 0 0 18px rgba(240, 197, 138, 0.4) !important;
}

/* Cosmic/Creator 包年龄 — 紫色 */
.timeline-entry.pack-cosmic .timeline-age,
.timeline-entry.pack-creator .timeline-age {
  text-shadow: 0 0 18px rgba(205, 189, 255, 0.4) !important;
}

/* --------------------------------------------------------------------------
   17. RESPONSIVE REFINEMENTS — 移动端微调
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .panel {
    border-radius: 18px !important;
  }

  .encounter-dialogue {
    border-radius: 16px !important;
  }

  .timeline-panel {
    border-radius: 16px !important;
  }

  .stat-row {
    border-radius: 12px !important;
  }

  /* 移动端 metric-grid 间距缩小 */
  .metric-grid {
    gap: 8px !important;
  }
}

@media (max-width: 420px) {
  .panel {
    border-radius: 14px !important;
  }
}

/* --------------------------------------------------------------------------
   18. REDUCED MOTION — 尊重用户偏好
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .encounter-btn::before,
  .encounter-dialogue::after {
    display: none !important;
  }

  .tcg-card:hover {
    transform: none !important;
  }

  .primary-btn:hover,
  .primary-btn-start:hover,
  .mint-btn:hover,
  .ghost-btn:hover {
    transform: none !important;
  }
}