/* ============================================================================
 * fortune.css —— 机缘彩蛋弹窗（v5 修真化重构）
 * ---------------------------------------------------------------------------
 * P0-1：ui-fortune.js 全量 inline style → CSS 类（零 style 属性）
 * P0-2：FORTUNE_CONFIG 硬编码 HEX → token 引用
 * P0-3：#FF6B6B 全局禁红 → var(--gilt-deep)
 * P0-4：fortune-glow / fortune-bounce infinite → 2 次 + reduced-motion 降级
 *
 * 动画 keyframes（fortune-fadein / fortune-fadeout / fortune-pop /
 * fortune-bounce / fortune-glow）已在 batch2.css 定义，本文件只引用、不重定义。
 *
 * 修真语义（art-bible §2）：
 *   深底 --void-1 · 文字 --ink-100 · 强调色按机缘类型（--fortune-accent）
 *   全局禁红：天降法宝用鎏金 --gilt-deep，绝不用红。
 * ========================================================================== */

/* ---------- 遮罩 ---------- */
.fortune-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--void-1, #121B1D) 70%, transparent);
  animation: fortune-fadein 0.3s ease;
}

.fortune-overlay--closing {
  animation: fortune-fadeout 0.3s ease forwards;
}

/* ---------- 卡片 ---------- */
.fortune-card {
  /* 默认强调色 = 青玉（成立 / 凝实），各机缘类型在下方覆盖 */
  --fortune-accent: var(--jade-deep);
  position: relative;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--fortune-accent) 13%, var(--void-1, #121B1D)),
    color-mix(in srgb, var(--fortune-accent) 27%, var(--void-1, #121B1D)));
  border: 2px solid var(--fortune-accent);
  border-radius: var(--radius-xl, 20px);
  padding: 32px 24px;
  max-width: 360px;
  width: 90%;
  text-align: center;
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.16));
  animation: fortune-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ---------- 各机缘类型强调色（P0-2 / P0-3 修真语义） ---------- */
.fortune-card--xp      { --fortune-accent: var(--lingguang); }   /* 灵气涌动 → 灵光 */
.fortune-card--item    { --fortune-accent: var(--gilt-deep); }  /* 天降法宝 → 鎏金（替代 #FF6B6B 禁红） */
.fortune-card--crystal { --fortune-accent: var(--jade-deep); }  /* 灵晶眼 → 青玉 */
.fortune-card--rift    { --fortune-accent: var(--ink-500); }    /* 裂隙 → 墨青沉稳 */
.fortune-card--insight { --fortune-accent: var(--gilt-deep); }  /* 顿悟 → 鎏金 */

/* ---------- 发光层 ---------- */
.fortune-glow {
  position: absolute;
  inset: -20px;
  border-radius: 30px;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--fortune-accent) 20%, transparent), transparent 70%);
  /* P0-4：infinite → 2 次 */
  animation: fortune-glow 2s ease-in-out 2;
  pointer-events: none;
}

/* ---------- 图标 ---------- */
.fortune-icon {
  font-size: 56px;
  margin-bottom: 12px;
  /* P0-4：infinite → 2 次 */
  animation: fortune-bounce 1s ease 2;
}

/* ---------- 标题 ---------- */
.fortune-title {
  font-size: var(--fs-h1, 22px);
  font-weight: 700;
  color: var(--ink-100);
  margin-bottom: 8px;
  letter-spacing: 0.1em;
}

/* ---------- 描述 ---------- */
.fortune-desc {
  font-size: var(--fs-body, 14px);
  color: var(--text-2);
  margin-bottom: 20px;
}

/* ---------- 领取按钮 ---------- */
.fortune-btn {
  background: var(--fortune-accent);
  color: var(--accent-on);
  border: none;
  padding: 12px 32px;
  border-radius: var(--radius-md, 12px);
  font-size: var(--fs-body, 16px);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--fortune-accent) 40%, transparent);
}

.fortune-btn:disabled {
  cursor: default;
  opacity: 0.7;
}

/* ============================================================================
 * P0-4：reduced-motion 降级
 * 装饰性 / 循环动画在「减少动态效果」下全部关闭，只保留终态。
 * （全局 * 规则已在 tokens.css 把 duration 收到 1ms；此处对弹窗元素直接
 *   animation: none，更彻底，符合 art-bible §7.5。）
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .fortune-overlay,
  .fortune-card,
  .fortune-glow,
  .fortune-icon {
    animation: none !important;
  }
}