/* TRPGFx 特效层样式 —— 仅在 trpg_lobby.html / trpg_play.html 引入 */

/* Lottie 容器：覆盖型用 absolute 全屏，叠层型由调用方指定 */
.trpg-fx-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

/* 卡片 shimmer 容器（Lottie 嵌入用） */
.trpg-fx-card-shimmer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  opacity: 0;
  transition: opacity 200ms ease-out;
}

.trpg-fx-card-shimmer.is-active {
  opacity: 1;
}

/* 入场 stagger（角色卡） */
.trpg-fx-stagger > * {
  opacity: 0;
  transform: translateY(12px);
  animation: trpg-fx-fade-up 420ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.trpg-fx-stagger > *:nth-child(1) { animation-delay: 0ms; }
.trpg-fx-stagger > *:nth-child(2) { animation-delay: 80ms; }
.trpg-fx-stagger > *:nth-child(3) { animation-delay: 160ms; }
.trpg-fx-stagger > *:nth-child(4) { animation-delay: 240ms; }
.trpg-fx-stagger > *:nth-child(5) { animation-delay: 320ms; }
.trpg-fx-stagger > *:nth-child(6) { animation-delay: 400ms; }
.trpg-fx-stagger > *:nth-child(7) { animation-delay: 480ms; }
.trpg-fx-stagger > *:nth-child(8) { animation-delay: 560ms; }

@keyframes trpg-fx-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 序章打字机光标 */
.trpg-fx-typewriter::after {
  content: '▍';
  display: inline-block;
  margin-left: 2px;
  opacity: 1;
  animation: trpg-fx-blink 1s steps(1, end) infinite;
}

.trpg-fx-typewriter.is-done::after {
  display: none;
}

@keyframes trpg-fx-blink {
  50% { opacity: 0; }
}

/* prefers-reduced-motion 全部退化为静态 */
@media (prefers-reduced-motion: reduce) {
  .trpg-fx-stagger > * {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .trpg-fx-typewriter::after {
    animation: none;
    display: none;
  }
}

/* ── Narration 沉浸增强层 ── */
/* 衬线字体 + 加宽行距 + 字距，叙事感 */
#trpg-app .narration-box {
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  font-size: 1.05rem;
  line-height: 2.0;
  letter-spacing: 0.02em;
  /* 羊皮/纸张噪点（SVG inline，~0.3KB） + 原本暗色金渐变 */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.96  0 0 0 0 0.85  0 0 0 0 0.40  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(245,200,66,0.03));
  background-blend-mode: normal;
}

/* 段首字下沉 drop cap（仅作用于 narration-text 内的首字符） */
#trpg-app .narration-box #narration-text::first-letter {
  font-size: 2.6em;
  line-height: 0.95;
  font-weight: 700;
  color: #f5c842;
  float: left;
  margin: 0.08em 0.14em 0 0;
  text-shadow: 0 2px 10px rgba(245, 200, 66, 0.32);
}

/* letterbox：上下渐变虚化代替硬黑边，电影感 + 暗示可滚动 */
#trpg-app .narration-box-outer {
  position: relative;
}
#trpg-app .narration-box-outer::before,
#trpg-app .narration-box-outer::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 32px;
  z-index: 2;
  pointer-events: none;
}
#trpg-app .narration-box-outer::before {
  top: 0;
  background: linear-gradient(180deg, rgba(8,14,25,0.92) 0%, rgba(8,14,25,0) 100%);
}
#trpg-app .narration-box-outer::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(8,14,25,0.92) 0%, rgba(8,14,25,0) 100%);
}

/* narration 内容更新时整体 fade-in（typewriter 完成或新段落到达时触发） */
#trpg-app .narration-box.trpg-fx-narration-fade {
  animation: trpg-fx-narration-fade 600ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes trpg-fx-narration-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  #trpg-app .narration-box.trpg-fx-narration-fade {
    animation: none;
  }
}

/* ── 选项按钮 hover shine + 点击涟漪 ── */
#trpg-app .choice-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
#trpg-app .choice-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 0%,
    transparent 35%,
    rgba(245, 200, 66, 0.18) 50%,
    transparent 65%,
    transparent 100%);
  transform: translateX(-100%);
  transition: transform 0.7s cubic-bezier(0.22, 0.7, 0.2, 1);
  pointer-events: none;
  z-index: 1;
}
#trpg-app .choice-btn:hover::before {
  transform: translateX(100%);
}
#trpg-app .choice-btn::after {
  content: '';
  position: absolute;
  left: var(--ripple-x, 50%);
  top: var(--ripple-y, 50%);
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(245, 200, 66, 0.32);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
}
#trpg-app .choice-btn.trpg-fx-rippling::after {
  animation: trpg-fx-ripple 520ms ease-out;
}
@keyframes trpg-fx-ripple {
  0%   { width: 0; height: 0; opacity: 0.55; }
  100% { width: 380px; height: 380px; opacity: 0; }
}
/* 让 .choice-btn 子元素在 ::before / ::after 之上 */
#trpg-app .choice-btn > * {
  position: relative;
  z-index: 2;
}

/* ── 骰子结果数值脉冲 + 金色光晕 ── */
#trpg-app .trpg-dice-result__outcome.trpg-fx-pulse {
  animation: trpg-fx-dice-pulse 720ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes trpg-fx-dice-pulse {
  0%   { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(245, 200, 66, 0)); }
  35%  { transform: scale(1.32); filter: drop-shadow(0 0 18px rgba(245, 200, 66, 0.7)); }
  100% { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(245, 200, 66, 0)); }
}

/* ── 背景氛围雾气漂浮（trpg 页全局） ── */
#trpg-app::before {
  content: '';
  position: fixed;
  top: -10%;
  left: -10%;
  right: -10%;
  bottom: -10%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 12% 22%, rgba(245, 200, 66, 0.05), transparent 40%),
    radial-gradient(ellipse at 82% 70%, rgba(120, 160, 220, 0.045), transparent 40%),
    radial-gradient(ellipse at 38% 88%, rgba(220, 140, 80, 0.04), transparent 40%);
  animation: trpg-fx-mist 26s ease-in-out infinite alternate;
}
@keyframes trpg-fx-mist {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-2%, 2%) scale(1.04); }
  100% { transform: translate(2%, -1%) scale(1); }
}

/* ── node-title 分字浮现 ── */
#trpg-app .node-title .trpg-fx-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  animation: trpg-fx-char-in 480ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 50ms);
}
@keyframes trpg-fx-char-in {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  #trpg-app .choice-btn::before,
  #trpg-app .choice-btn::after {
    animation: none;
    transition: none;
  }
  #trpg-app .trpg-dice-result__outcome.trpg-fx-pulse {
    animation: none;
  }
  #trpg-app::before {
    animation: none;
  }
  #trpg-app .node-title .trpg-fx-char {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ── 旁白区扩容（紧凑化标题/act 标签 + 强制 narration-stage 高度 + 让 box flex 收缩） ── */
#trpg-app .narration-stage {
  padding: 1rem 1.5rem 1.25rem;
  min-height: 60vh;
}
#trpg-app .act-label {
  font-size: .66rem;
  margin-bottom: .4rem;
  opacity: .6;
}
#trpg-app .node-title-row {
  margin-bottom: .55rem;
  min-height: auto;
}
#trpg-app .node-title {
  font-size: 1.08rem;
  line-height: 1.3;
}
/* 关键修复：移除 min-height 限制，让 flex 子元素能收缩到 < content 高度，
   触发 narration-box 自身 overflow-y: auto 出现滚动条 */
#trpg-app .narration-box-outer {
  flex: 1;
  min-height: 280px;
}
#trpg-app .narration-box {
  flex: 1;
  min-height: 0;
  height: 100%;
}
/* NPC 对话改为 narration-box 内部子，与旁白共享滚动；不再独立限高 */
#trpg-app .narration-box .npc-dialogs {
  margin-top: 1.1rem;
  max-height: none;
  overflow: visible;
  gap: .55rem;
  position: relative;
}
#trpg-app .narration-box .npc-dialogs:not(:empty)::before {
  content: '';
  display: block;
  height: 1px;
  margin-bottom: .8rem;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(245, 200, 66, 0.28) 30%,
    rgba(245, 200, 66, 0.28) 70%,
    transparent 100%);
}
#trpg-app .npc-dialog-item {
  padding: .55rem .85rem .55rem 1rem;
  font-size: .92rem;
  line-height: 1.55;
  border-left: 2px solid rgba(245, 200, 66, 0.45);
  border-radius: 0 10px 10px 0;
  background: rgba(245, 200, 66, 0.04);
}
#trpg-app .npc-dialog-name {
  letter-spacing: 0.02em;
}

/* 移动端进一步紧凑 */
@media (max-width: 768px) {
  #trpg-app .narration-stage {
    padding: .8rem 1rem .9rem;
    min-height: 55vh;
  }
  #trpg-app .act-label {
    font-size: .6rem;
    margin-bottom: .3rem;
  }
  #trpg-app .node-title-row {
    margin-bottom: .4rem;
  }
  #trpg-app .node-title {
    font-size: 1rem;
  }
  #trpg-app .narration-box-outer {
    min-height: 220px;
  }
  #trpg-app .narration-box .npc-dialogs {
    margin-top: .9rem;
  }
  #trpg-app .narration-box .npc-dialogs:not(:empty)::before {
    margin-bottom: .65rem;
  }
}