/* ============================================
   每日运势 · 设计令牌（CSS Variables）
   主题列表：
   - default · 寺庙签筒 + 命运卷轴（new, IP-bound）
   - festive · 红金喜庆（原 default 备份）
   - gotham  · 哥谭深蓝
   - neon    · 中国霓虹紫
   - notion  · Notion 暖米
   - linear  · Linear 极简
   ============================================ */

/* === default · 寺庙签筒 ==================== *
 * IP 谱系：中国传统求签 + 《富春山居图》《千里江山图》青绿山水 + 了凡四训
 * 5 slots 绑定：
 *   - Container：签筒 + 卷轴（结算后左侧整片变 = 解签人）
 *   - Unit：5 色竹签（紫金千年签 UR ... 素木下下签 N）+ 卷轴上一段毛笔字
 *   - Feedback：摇签声 + 火星粒子 + 朱砂印章砸下（替代黄光闪）
 *   - Progression：卷轴自下而上展开，越稀有越长
 *   - Endgame：解签人盖印 + "今日已读 · 明日再来"
 * ========================================== */
:root {
  --bg: #f4e9d5;                    /* 宣纸米 */
  --bg2: #faf3e1;                   /* 旧宣纸 */
  --bg3: #ede1c3;                   /* 旧宣纸-折痕 */
  --fg: #1a1a1a;                    /* 墨黑 */
  --fg2: #4a3018;                   /* 焦墨 */
  --fg-dim: #8a7860;                /* 淡墨 */
  --accent: #c8102e;                /* 朱砂 */
  --accent2: #d4a017;               /* 鎏金 */
  --accent3: #5a8a6a;               /* 山水青 */
  --seal: #b2222e;                  /* 印章红（比 accent 更暗，盖章专用） */
  --ink: #1a1a1a;                   /* 墨 */
  --paper: #faf3e1;                 /* 宣纸 */
  --border: #6a3f1a;                /* 黑檀边 */
  --border-thin: rgba(106, 63, 26, 0.35);
  --shadow: 3px 3px 0 #6a3f1a;
  --shadow-sm: 2px 2px 0 #6a3f1a;
  --radius: 0;
  --radius-sm: 0;
  --font-main: 'STKaiti', 'KaiTi', 'STSong', '宋体', 'Microsoft YaHei', 'PingFang SC', serif;
  --font-pixel: 'Courier New', 'SimHei', monospace;
  --button-bg: linear-gradient(180deg, #c8102e 0%, #8a0a20 100%);
  --button-fg: #faf3e1;
  --rolling-bg: #faf3e1;
  --pixel-grid: rgba(106, 63, 26, 0.04);

  --ur-color: #6d2bcb;
  --ur-glow: rgba(184, 85, 255, 0.6);
  --ssr-color: #c8102e;
  --ssr-glow: rgba(200, 16, 46, 0.5);
  --sr-color: #2e6d3a;
  --sr-glow: rgba(46, 109, 58, 0.4);
  --r-color: #8a7860;
  --r-glow: rgba(138, 120, 96, 0.3);
  --n-color: #4a3018;
  --n-glow: rgba(74, 48, 24, 0.2);

  /* 5 色竹签 */
  --sign-ur: #6d2bcb;     /* 紫金千年签 */
  --sign-ssr: #c8102e;    /* 朱砂上上签 */
  --sign-sr: #2e6d3a;     /* 青玉上签 */
  --sign-r: #a89878;      /* 灰白中签 */
  --sign-n: #6a3f1a;      /* 素木下下签 */
}

/* === cyberpunk · 赛博朋克 2077 命运追踪 ============== *
 * IP 谱系：CD Projekt Red Cyberpunk 2077 + Cyberpunk: Edgerunners + 黑客片段
 * 5 slots 绑定：
 *   - Container：HUD 终端 + 黄黑警示斜纹 + 扫描线
 *   - Unit：人生事件 = 一条被破解的命运数据包
 *   - Feedback：GLITCH 故障闪 + ICE 防火墙被击穿 + 红色 ERR 字幕
 *   - Progression：「DECRYPT N%」入侵进度条
 *   - Endgame：「TRACE COMPLETE · LOGOUT」黄字大警示
 * ========================================== */
body[data-variant="cyberpunk"] {
  --bg: #0a0a0e;
  --bg2: #14141e;
  --bg3: #1c1c2a;
  --fg: #fcee0c;             /* 标志黄 */
  --fg2: #00d4ff;            /* 信息蓝 */
  --fg-dim: #6a6a8a;
  --accent: #ff0040;         /* 警报红 */
  --accent2: #fcee0c;        /* 信号黄 */
  --accent3: #00d4ff;        /* 数据蓝 */
  --seal: #ff0040;
  --ink: #fcee0c;
  --paper: #0a0a0e;
  --border: #fcee0c;
  --border-thin: rgba(252, 238, 12, 0.4);
  --shadow: 4px 4px 0 #ff0040, -4px -4px 0 #00d4ff;
  --shadow-sm: 2px 2px 0 #ff0040;
  --font-main: 'Courier New', 'Consolas', monospace;
  --button-bg: linear-gradient(180deg, #fcee0c 0%, #c8be08 100%);
  --button-fg: #0a0a0e;
  --rolling-bg: #0e0e16;
  --pixel-grid: rgba(252, 238, 12, 0.06);

  --ur-color: #fcee0c;
  --ssr-color: #ff0040;
  --sr-color: #00d4ff;
  --r-color: #888;
  --n-color: #444;

  --sign-ur: #fcee0c;
  --sign-ssr: #ff0040;
  --sign-sr: #00d4ff;
  --sign-r: #6a6a8a;
  --sign-n: #3a3a4a;
}

/* === dnf · 地下城与勇士 鬼火命运拍卖行 ============== *
 * IP 谱系：DNF (Neople) + 鬼剑士 + 觉醒立绘 + 暴击数字飞溅
 * 5 slots 绑定：
 *   - Container：地下城火炬石门框 + 黑檀边
 *   - Unit：每条事件 = 一个被打倒的 boss frame
 *   - Feedback：「+10086 命」暴击数字 + COMBO×N + 鬼火点闪
 *   - Progression：觉醒槽 + EXP bar + 「COMBO x 5」
 *   - Endgame：「MISSION CLEAR」金黄大字 + 鬼火爆裂
 * ========================================== */
body[data-variant="dnf"] {
  --bg: #0a0006;
  --bg2: #1a0008;
  --bg3: #2a0010;
  --fg: #ffe8a0;
  --fg2: #ffb800;            /* 鬼火金 */
  --fg-dim: #8a6a40;
  --accent: #c01030;         /* 血红 */
  --accent2: #ffb800;        /* 鬼火金 */
  --accent3: #9040c0;        /* 鬼魂紫 */
  --seal: #c01030;
  --ink: #ffb800;
  --paper: #1a0008;
  --border: #6a0810;
  --border-thin: rgba(192, 16, 48, 0.4);
  --shadow: 0 0 16px rgba(192, 16, 48, 0.5), 3px 3px 0 #6a0810;
  --shadow-sm: 0 0 8px rgba(255, 184, 0, 0.4);
  --font-main: 'Courier New', 'Consolas', 'SimHei', monospace;
  --button-bg: linear-gradient(180deg, #c01030 0%, #6a0810 100%);
  --button-fg: #ffb800;
  --rolling-bg: #14000a;
  --pixel-grid: rgba(255, 184, 0, 0.04);

  --ur-color: #ffb800;
  --ssr-color: #c01030;
  --sr-color: #9040c0;
  --r-color: #6080a0;
  --n-color: #4a3018;

  --sign-ur: #ffb800;
  --sign-ssr: #c01030;
  --sign-sr: #9040c0;
  --sign-r: #6080a0;
  --sign-n: #4a3018;
}

/* === genshin · 元素抽契 ============== *
 * IP 谱系：原神 / 米哈游 + 七元素 + 卡通渲染 + 圣遗物
 * 5 slots 绑定：
 *   - Container：水色玻璃面板 + 元素圈框
 *   - Unit：人生事件 = 一颗元素结晶
 *   - Feedback：元素反应爆光 + 圣遗物图标飞出
 *   - Progression：契合度槽 + 元素能量条
 *   - Endgame：「元素共鸣 · 契合达成」
 * ========================================== */
body[data-variant="genshin"] {
  --bg: #f4f1e8;             /* 米哈游浅米 */
  --bg2: #ffffff;
  --bg3: #e8e4d8;
  --fg: #2d4a5e;             /* 深海蓝 */
  --fg2: #5a7a8e;
  --fg-dim: #9aa8b8;
  --accent: #c75d3a;         /* 火元素橘 */
  --accent2: #5fb368;        /* 草元素青绿 */
  --accent3: #5288c9;        /* 水元素蓝 */
  --seal: #c75d3a;
  --ink: #2d4a5e;
  --paper: #ffffff;
  --border: #b8a888;
  --border-thin: rgba(184, 168, 136, 0.4);
  --shadow: 4px 4px 0 #b8a888;
  --shadow-sm: 0 2px 8px rgba(184, 168, 136, 0.5);
  --font-main: 'STKaiti', 'Microsoft YaHei', 'PingFang SC', sans-serif;
  --button-bg: linear-gradient(180deg, #c75d3a 0%, #a04220 100%);
  --button-fg: #fff;
  --rolling-bg: #ffffff;
  --pixel-grid: rgba(184, 168, 136, 0.05);

  --ur-color: #c75d3a;       /* 火 · 五星 */
  --ssr-color: #b8a04a;      /* 雷 · 四星 */
  --sr-color: #5fb368;       /* 草 · 三星 */
  --r-color: #5288c9;        /* 水 */
  --n-color: #888;

  --sign-ur: #c75d3a;
  --sign-ssr: #b8a04a;
  --sign-sr: #5fb368;
  --sign-r: #5288c9;
  --sign-n: #888;
}

/* === vampire · 黑暗印记 ============== *
 * IP 谱系：Vampire Survivors + Soulslike + Hollow Knight
 * 5 slots 绑定（与寺庙签筒并列另一个 IP-bound 主题）：
 *   - Container：六边形黑棺材 clip-path + 4 颗红铜钉
 *   - Unit：5 色六棱柱"灵魂晶体" 代替竹签
 *   - Feedback：金色 "+1 SOUL" / "×CRIT!" DOM popup + screen-shake
 *   - Progression：顶部 FATE LV.N + 进度条
 *   - Endgame：YOU READ · SEAL · STAMPED
 * ========================================== */
body[data-variant="vampire"] {
  --bg: #050009;
  --bg2: #0e0010;
  --bg3: #1a0018;
  --fg: #f0e4f0;
  --fg2: #c8a4d4;
  --fg-dim: #6040a0;
  --accent: #c01030;          /* 血红 */
  --accent2: #ffd460;         /* 灯神金 */
  --accent3: #9040c0;         /* 灵魂紫 */
  --seal: #c01030;
  --ink: #ffd460;
  --paper: #0e0010;
  --border: #4a1818;          /* 棺材红铜边 */
  --border-thin: rgba(192, 16, 48, 0.35);
  --shadow: 0 0 20px rgba(192, 16, 48, 0.4), 3px 3px 0 #4a1818;
  --shadow-sm: 0 0 8px rgba(192, 16, 48, 0.3);
  --font-main: 'Courier New', 'Consolas', monospace;
  --button-bg: linear-gradient(180deg, #c01030 0%, #6a0810 100%);
  --button-fg: #ffd460;
  --rolling-bg: #0a000c;
  --pixel-grid: rgba(192, 16, 48, 0.06);

  --ur-color: #ffd460;
  --ssr-color: #c01030;
  --sr-color: #9040c0;
  --r-color: #6080a0;
  --n-color: #4a4040;

  --sign-ur: #ffd460;
  --sign-ssr: #c01030;
  --sign-sr: #9040c0;
  --sign-r: #6080a0;
  --sign-n: #4a4040;
}

/* festive · 红金喜庆（原默认主题，作为对照组保留） */
body[data-variant="festive"] {
  --bg: #f4e9d5;
  --bg2: #fff6e0;
  --bg3: #ffe3bd;
  --fg: #2a1810;
  --fg2: #6b4a2e;
  --fg-dim: #98785a;
  --accent: #c8102e;
  --accent2: #f4c430;
  --accent3: #d4602e;
  --border: #8c4a1a;
  --border-thin: rgba(140, 74, 26, 0.4);
  --shadow: 4px 4px 0 #8c4a1a;
  --shadow-sm: 2px 2px 0 #8c4a1a;
  --font-main: 'Courier New', 'SimHei', 'Microsoft YaHei', monospace;
  --button-bg: linear-gradient(180deg, #f4c430 0%, #d4602e 100%);
  --button-fg: #2a1810;
  --rolling-bg: #fff6e0;
  --pixel-grid: rgba(140, 74, 26, 0.08);
}

body[data-variant="gotham"] {
  --bg: #0a0e27;
  --bg2: #141a3a;
  --bg3: #1f2750;
  --fg: #e8ecff;
  --fg2: #a8b0d8;
  --fg-dim: #5b6489;
  --accent: #fcee21;
  --accent2: #5b6cff;
  --accent3: #ff5b8d;
  --border: #3a4575;
  --border-thin: rgba(91, 108, 255, 0.3);
  --shadow: 4px 4px 0 #000814;
  --shadow-sm: 2px 2px 0 #000814;
  --button-bg: linear-gradient(180deg, #fcee21 0%, #d4a017 100%);
  --button-fg: #0a0e27;
  --rolling-bg: #141a3a;
  --pixel-grid: rgba(91, 108, 255, 0.06);
}

body[data-variant="neon"] {
  --bg: #1a0033;
  --bg2: #2a004d;
  --bg3: #3a0066;
  --fg: #f0eaff;
  --fg2: #b8a8e8;
  --fg-dim: #8870b0;
  --accent: #00ffea;
  --accent2: #ff00ea;
  --accent3: #ffea00;
  --border: #6b00aa;
  --border-thin: rgba(0, 255, 234, 0.25);
  --shadow: 4px 4px 0 #00ffea;
  --shadow-sm: 2px 2px 0 #ff00ea;
  --button-bg: linear-gradient(180deg, #00ffea 0%, #ff00ea 100%);
  --button-fg: #1a0033;
  --rolling-bg: #2a004d;
  --pixel-grid: rgba(0, 255, 234, 0.06);
}

/* Notion 暖米色 · 书籍感 */
body[data-variant="notion"] {
  --bg: #f7f6f3;
  --bg2: #ffffff;
  --bg3: #ebeae5;
  --fg: #37352f;
  --fg2: #6b6b6b;
  --fg-dim: #9b9a97;
  --accent: #d9730d;
  --accent2: #6940a5;
  --accent3: #d44c47;
  --border: #c5c4c0;
  --border-thin: rgba(55, 53, 47, 0.16);
  --shadow: 0 2px 4px rgba(15, 15, 15, 0.06), 0 0 0 1px rgba(15, 15, 15, 0.05);
  --shadow-sm: 0 1px 2px rgba(15, 15, 15, 0.06);
  --radius: 4px;
  --radius-sm: 3px;
  --font-main: 'Georgia', '宋体', 'SimSun', 'STSong', serif;
  --button-bg: linear-gradient(180deg, #d9730d 0%, #b35c00 100%);
  --button-fg: #ffffff;
  --rolling-bg: #ffffff;
  --pixel-grid: transparent;
}

/* Linear 紫极简 · 冷静科技 */
body[data-variant="linear"] {
  --bg: #08090a;
  --bg2: #18191b;
  --bg3: #232428;
  --fg: #f7f8f8;
  --fg2: #b4bcd0;
  --fg-dim: #62687a;
  --accent: #5e6ad2;
  --accent2: #8a8df0;
  --accent3: #eb5757;
  --border: #2e3035;
  --border-thin: rgba(94, 106, 210, 0.25);
  --shadow: 0 4px 12px rgba(94, 106, 210, 0.15);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6);
  --radius: 6px;
  --radius-sm: 4px;
  --font-main: -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --button-bg: linear-gradient(180deg, #5e6ad2 0%, #4a55b8 100%);
  --button-fg: #ffffff;
  --rolling-bg: #0f1012;
  --pixel-grid: rgba(94, 106, 210, 0.05);
}

/* ============================================
   全局复位
   ============================================ */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: var(--font-main);
  color: var(--fg);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: none;
  image-rendering: pixelated;
  overflow-x: hidden;
}

body {
  background-image:
    linear-gradient(0deg, var(--pixel-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--pixel-grid) 1px, transparent 1px);
  background-size: 16px 16px;
  min-height: 100vh;
}

button {
  font-family: var(--font-main);
  cursor: pointer;
  border: 2px solid var(--border);
  background: var(--bg2);
  color: var(--fg);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.5px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.05s, box-shadow 0.05s;
}

button:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--border); }
button:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--border); }
button:disabled { cursor: not-allowed; opacity: 0.5; }

/* ============================================
   顶部条
   ============================================ */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: var(--bg2);
  border-bottom: 4px double var(--border);
  flex-wrap: wrap;
  gap: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: bold;
  color: var(--accent);
  text-shadow: 1px 1px 0 var(--border);
}

.brand-icon {
  width: 24px;
  height: 24px;
  background: var(--accent);
  display: inline-block;
  position: relative;
  box-shadow: 2px 2px 0 var(--border);
}

.brand-icon::before {
  content: '';
  position: absolute;
  inset: 4px;
  background: var(--accent2);
}

.brand-icon::after {
  content: '运';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--button-fg);
  font-size: 14px;
  font-weight: bold;
}

.topbar-controls { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }

.control-group { display: flex; align-items: center; gap: 6px; }

.control-group label {
  font-size: 11px;
  color: var(--fg2);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.tab-strip {
  display: flex;
  border: 2px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.tab-strip button {
  border: none;
  border-right: 2px solid var(--border);
  background: var(--bg);
  box-shadow: none;
  padding: 6px 10px;
  font-size: 11px;
}

.tab-strip button:last-child { border-right: none; }
.tab-strip button.active {
  background: var(--accent);
  color: var(--button-fg);
}

.tab-strip button:hover { transform: none; }
.tab-strip button:active { transform: translate(0, 1px); box-shadow: none; }

/* ============================================
   主体三视图：home / detail / pool
   ============================================ */

.view { display: none; padding: 24px; max-width: 1280px; margin: 0 auto; }
.view.active { display: block; }

/* === 首页布局：左右同屏 === */

.home-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 24px;
  min-height: 600px;
}

@media (max-width: 900px) {
  .home-grid { grid-template-columns: 1fr; }
}

/* 左侧：开运按钮区 / done 后变为运势卡区 */

.draw-panel {
  background: var(--bg2);
  border: 3px solid var(--border);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow);
  position: relative;
  min-height: 600px;
}

.draw-panel::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px dashed var(--border-thin);
  pointer-events: none;
  z-index: 0;
}

.draw-panel-idle, .draw-panel-done {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

/* 默认 idle 显示、done 隐藏 */
.draw-panel-done { display: none; }

body.draw-state-done .draw-panel-idle { display: none; }
body.draw-state-done .draw-panel-done { display: flex; }

.draw-title {
  font-size: 28px;
  font-weight: bold;
  color: var(--accent);
  text-align: center;
  letter-spacing: 4px;
  text-shadow: 2px 2px 0 var(--border);
  line-height: 1.3;
}

.draw-subtitle {
  font-size: 13px;
  text-align: center;
  color: var(--fg2);
  line-height: 1.7;
  padding: 0 8px;
}

.world-picker { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }

.world-picker button {
  flex: 1;
  min-width: 80px;
  padding: 8px 4px;
  font-size: 11px;
  background: var(--bg);
}

.world-picker button.active {
  background: var(--accent);
  color: var(--button-fg);
  box-shadow: 1px 1px 0 var(--border);
}

.draw-button {
  background: var(--button-bg);
  color: var(--button-fg);
  border: 3px solid var(--border);
  padding: 22px 16px;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 6px;
  box-shadow: var(--shadow);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4);
  position: relative;
}

.draw-button::before, .draw-button::after {
  content: '★';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--border);
}

.draw-button::before { left: 14px; }
.draw-button::after { right: 14px; }

.draw-button:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--border); }
.draw-button:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--border); }

.pool-stats {
  font-size: 11px;
  color: var(--fg-dim);
  text-align: center;
  padding-top: 8px;
  border-top: 1px dashed var(--border-thin);
}

.pool-stats strong { color: var(--accent); font-size: 14px; }

/* === 右侧：人生模拟区 === */

.life-panel {
  background: var(--rolling-bg);
  border: 3px solid var(--border);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow);
  min-height: 600px;
  position: relative;
  overflow: hidden;
}

.life-panel::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px dashed var(--border-thin);
  pointer-events: none;
}

.life-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  color: var(--fg2);
  letter-spacing: 1px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border);
  flex-wrap: wrap;
}

.life-status-tools { display: flex; align-items: center; gap: 12px; }

.speed-tabs-wrap { display: flex; align-items: center; gap: 6px; }
.speed-label { font-size: 10px; color: var(--fg-dim); letter-spacing: 1px; }
.speed-tabs { font-size: 11px; }
.speed-tabs button { padding: 4px 8px; font-size: 11px; }
.speed-tabs button.active { background: var(--accent2); color: var(--button-fg); }

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--fg-dim);
  margin-right: 6px;
  box-shadow: 1px 1px 0 var(--border);
}

.status-dot.rolling { background: var(--accent2); animation: blink 0.5s infinite; }
.status-dot.done { background: #2ecc71; }

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.skip-button { font-size: 10px; padding: 4px 8px; }

.life-stream {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding-right: 6px;
  min-height: 420px;
  max-height: 480px;
}

.life-stream::-webkit-scrollbar { width: 10px; }
.life-stream::-webkit-scrollbar-track { background: var(--bg3); }
.life-stream::-webkit-scrollbar-thumb { background: var(--border); }

.life-event {
  background: var(--bg2);
  border: 2px solid var(--border-thin);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 12px;
  align-items: start;
  transition: opacity 0.4s ease-out;
}

.life-event.placeholder { opacity: 0.4; }
.life-event.locked { background: var(--bg3); border-style: dashed; }

.life-event.slide-in {
  animation: slideInFromTop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* 关键 stage 的爆字效果：屏幕黄色闪一下 + 边框红色震动 + 年龄数字大字效果 */
.life-event.critical {
  animation: criticalSmash 0.6s cubic-bezier(0.2, 0.9, 0.3, 1);
  border-color: var(--accent);
  border-width: 3px;
  background: linear-gradient(90deg, var(--bg2) 0%, var(--bg3) 50%, var(--bg2) 100%);
  box-shadow: 0 0 0 4px rgba(255, 196, 48, 0.25), 4px 4px 0 var(--accent);
}

.life-event.critical .life-event-age {
  animation: ageShake 0.5s ease-out;
  color: var(--accent3, var(--accent));
  font-size: 18px;
}

.life-event.critical .life-event-text {
  font-weight: bold;
  font-size: 14px;
}

@keyframes criticalSmash {
  0%   { transform: scale(1.6); opacity: 0; box-shadow: 0 0 80px var(--accent); }
  40%  { transform: scale(0.95); opacity: 1; }
  70%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

@keyframes ageShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px) rotate(-1deg); }
  40% { transform: translateX(3px) rotate(1deg); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

@keyframes slideInFromTop {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

.life-empty-hint {
  text-align: center;
  padding: 60px 24px;
  color: var(--fg-dim);
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.life-empty-icon { font-size: 48px; line-height: 1; opacity: 0.6; }
.life-empty-title { font-size: 16px; color: var(--fg2); letter-spacing: 2px; }
.life-empty-sub { font-size: 12px; line-height: 1.8; color: var(--fg-dim); }

.life-event-age {
  font-size: 16px;
  font-weight: bold;
  color: var(--accent);
  text-align: center;
  border-right: 1px dashed var(--border-thin);
  padding-right: 8px;
}

.life-event-stage {
  font-size: 9px;
  color: var(--fg-dim);
  letter-spacing: 1px;
  text-transform: uppercase;
  display: block;
  margin-top: 4px;
}

.life-event-text {
  font-size: 13px;
  color: var(--fg);
  line-height: 1.6;
}

/* === Done 运势横幅（结算大横幅，左侧主位置） === */

.fortune-banner {
  padding: 24px 28px;
  border: 4px solid var(--border);
  color: #fff;
  position: relative;
  overflow: hidden;
  text-align: center;
  animation: bannerReveal 0.6s cubic-bezier(0.2, 0.9, 0.3, 1);
  box-shadow: var(--shadow);
}

.fortune-banner-avatar {
  width: 80px;
  height: 80px;
  margin: 8px auto 10px;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid rgba(255, 255, 255, 0.45);
  padding: 4px;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.18);
}

.fortune-banner::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px dashed rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

.fortune-banner-deco-left, .fortune-banner-deco-right {
  position: absolute;
  top: 18px;
  font-size: 32px;
  color: rgba(255, 255, 255, 0.75);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
  pointer-events: none;
}
.fortune-banner-deco-left { left: 22px; }
.fortune-banner-deco-right { right: 22px; }

.fortune-banner-rarity {
  display: inline-block;
  padding: 4px 18px;
  font-size: 36px;
  font-weight: bold;
  letter-spacing: 8px;
  background: rgba(255, 255, 255, 0.18);
  border: 2px solid rgba(255, 255, 255, 0.6);
  margin-bottom: 6px;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
}

.fortune-banner-label {
  font-size: 13px;
  letter-spacing: 4px;
  margin-bottom: 10px;
  opacity: 0.9;
}

.fortune-banner-title {
  font-size: 36px;
  font-weight: bold;
  letter-spacing: 6px;
  margin: 8px 0 12px;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
}

.fortune-banner-line {
  font-size: 13px;
  background: rgba(255, 255, 255, 0.16);
  padding: 8px 14px;
  display: inline-block;
  font-style: italic;
  letter-spacing: 1px;
  border-left: 3px solid rgba(255, 255, 255, 0.6);
  border-right: 3px solid rgba(255, 255, 255, 0.6);
}

/* 按稀有度的横幅配色 */
.fortune-banner[data-r="UR"] {
  background: linear-gradient(135deg, #6d2bcb 0%, #b855ff 50%, #ffd55c 100%);
  border-color: #ffd55c;
  box-shadow: var(--shadow), 0 0 40px rgba(184, 85, 255, 0.6);
}
.fortune-banner[data-r="SSR"] {
  background: linear-gradient(135deg, #b8000a 0%, #ff3b3b 50%, #ffc02e 100%);
  border-color: #ffc02e;
  box-shadow: var(--shadow), 0 0 28px rgba(255, 59, 59, 0.5);
}
.fortune-banner[data-r="SR"] {
  background: linear-gradient(135deg, #1862b4 0%, #3b9bff 100%);
  border-color: #9bd0ff;
  box-shadow: var(--shadow), 0 0 18px rgba(59, 155, 255, 0.4);
}
.fortune-banner[data-r="R"] {
  background: linear-gradient(135deg, #586b78 0%, #909ea8 100%);
  border-color: #d2d8dd;
}
.fortune-banner[data-r="N"] {
  background: linear-gradient(135deg, #4a4a4a 0%, #777777 100%);
  border-color: #b0b0b0;
}

/* === Done 结算卡（横幅下面的小卡） === */

.fortune-card {
  background: var(--bg2);
  border: 3px solid var(--border);
  padding: 18px 20px;
  margin-top: 12px;
  box-shadow: var(--shadow-sm);
  animation: cardReveal 0.6s ease-out 0.15s both;
  position: relative;
  overflow: hidden;
}

@keyframes bannerReveal {
  from { transform: scale(0.85) translateY(-10px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes cardReveal {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.rarity-badge {
  display: inline-block;
  padding: 6px 12px;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 4px;
  box-shadow: 3px 3px 0 var(--border);
  border: 2px solid var(--border);
  color: white;
  margin-bottom: 12px;
}

.rarity-badge[data-r="UR"] { background: var(--ur-color); box-shadow: 3px 3px 0 var(--border), 0 0 20px var(--ur-glow); }
.rarity-badge[data-r="SSR"] { background: var(--ssr-color); box-shadow: 3px 3px 0 var(--border), 0 0 16px var(--ssr-glow); }
.rarity-badge[data-r="SR"] { background: var(--sr-color); }
.rarity-badge[data-r="R"] { background: var(--r-color); }
.rarity-badge[data-r="N"] { background: var(--n-color); }

.rarity-label {
  display: inline-block;
  margin-left: 8px;
  font-size: 12px;
  color: var(--fg2);
  vertical-align: middle;
}

.fortune-title {
  font-size: 26px;
  font-weight: bold;
  color: var(--accent);
  margin: 8px 0;
  letter-spacing: 2px;
  text-shadow: 2px 2px 0 var(--border);
}

.fortune-role { font-size: 13px; color: var(--fg2); margin-bottom: 12px; }

.fortune-line {
  font-size: 13px;
  font-style: italic;
  color: var(--fg);
  background: var(--bg);
  padding: 10px 12px;
  border-left: 4px solid var(--accent);
  margin: 12px 0;
  line-height: 1.7;
}

.fortune-hook {
  font-size: 14px;
  color: var(--fg);
  margin: 12px 0;
  line-height: 1.7;
  background: var(--bg);
  padding: 12px;
  border: 1px dashed var(--border-thin);
}

.fortune-hook strong { display: block; font-size: 10px; color: var(--accent); letter-spacing: 2px; margin-bottom: 6px; text-transform: uppercase; }

.fortune-opening {
  font-size: 13px;
  color: var(--fg);
  line-height: 1.8;
  margin: 12px 0;
  background: var(--bg);
  padding: 14px;
  border: 1px solid var(--border-thin);
  max-height: 200px;
  overflow-y: auto;
}

.fortune-opening strong { display: block; font-size: 10px; color: var(--accent); letter-spacing: 2px; margin-bottom: 8px; text-transform: uppercase; }

.fortune-actions { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }

.btn-primary {
  background: var(--button-bg);
  color: var(--button-fg);
  border: 2px solid var(--border);
  padding: 12px 20px;
  font-size: 14px;
  font-weight: bold;
  box-shadow: var(--shadow-sm);
  flex: 1;
  min-width: 140px;
}

.btn-secondary {
  background: var(--bg);
  color: var(--fg);
  border: 2px solid var(--border);
  padding: 12px 20px;
  font-size: 13px;
}

/* ============================================
   详情页
   ============================================ */

.detail-back { margin-bottom: 16px; }

.detail-header {
  background: var(--bg2);
  border: 3px solid var(--border);
  padding: 24px;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px;
}

@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }

.detail-section {
  background: var(--bg2);
  border: 3px solid var(--border);
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}

.detail-section h3 {
  font-size: 14px;
  color: var(--accent);
  margin-bottom: 12px;
  letter-spacing: 2px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 6px;
}

.timeline-list { display: flex; flex-direction: column; gap: 10px; }

.timeline-item {
  display: grid;
  grid-template-columns: 60px 90px 1fr;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg);
  border-left: 4px solid var(--accent);
  font-size: 13px;
  line-height: 1.6;
}

.timeline-age { font-weight: bold; color: var(--accent); }
.timeline-stage { font-size: 11px; color: var(--fg-dim); letter-spacing: 1px; }

.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }

.stat-row { display: grid; grid-template-columns: 80px 1fr 40px; gap: 8px; align-items: center; font-size: 12px; }
.stat-label { color: var(--fg2); }
.stat-bar { background: var(--bg); border: 1px solid var(--border-thin); height: 12px; position: relative; }
.stat-fill { background: var(--accent); height: 100%; }
.stat-value { text-align: right; color: var(--accent); font-weight: bold; }

.choice-item {
  background: var(--bg);
  border: 2px dashed var(--border-thin);
  padding: 12px;
  margin-bottom: 10px;
  font-size: 13px;
}

.choice-item .age-mark { font-size: 11px; color: var(--accent); letter-spacing: 1px; }
.choice-item .question { margin: 6px 0; font-weight: bold; color: var(--fg); }
.choice-options { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.choice-options button { font-size: 11px; padding: 6px 10px; }
.choice-options button:disabled { background: var(--bg3); }
.choice-locked-tip { font-size: 10px; color: var(--fg-dim); margin-top: 8px; font-style: italic; }

.ending-block {
  background: var(--bg);
  padding: 16px;
  border-left: 4px solid var(--accent);
  font-size: 14px;
  line-height: 1.8;
}

.ending-block strong { color: var(--accent); display: block; margin-bottom: 6px; font-size: 11px; letter-spacing: 2px; }

.rating-pill {
  display: inline-block;
  padding: 4px 10px;
  background: var(--accent);
  color: var(--button-fg);
  font-weight: bold;
  margin-right: 8px;
  font-size: 13px;
}

.tags-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.tag-chip {
  background: var(--bg);
  border: 1px solid var(--border-thin);
  padding: 3px 8px;
  font-size: 10px;
  color: var(--fg2);
}

/* ============================================
   后台故事池
   ============================================ */

.pool-overview {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

@media (max-width: 700px) { .pool-overview { grid-template-columns: repeat(2, 1fr); } }

.pool-card {
  background: var(--bg2);
  border: 3px solid var(--border);
  padding: 14px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.pool-card .rarity { font-size: 22px; font-weight: bold; letter-spacing: 2px; }
.pool-card .count { font-size: 28px; font-weight: bold; color: var(--accent); margin-top: 6px; }
.pool-card .label { font-size: 10px; color: var(--fg-dim); letter-spacing: 1px; }

.pool-card[data-r="UR"] .rarity { color: var(--ur-color); }
.pool-card[data-r="SSR"] .rarity { color: var(--ssr-color); }
.pool-card[data-r="SR"] .rarity { color: var(--sr-color); }
.pool-card[data-r="R"] .rarity { color: var(--r-color); }
.pool-card[data-r="N"] .rarity { color: var(--n-color); }

.pool-list { display: flex; flex-direction: column; gap: 8px; }

.pool-row {
  display: grid;
  grid-template-columns: 56px 1fr 120px 80px 80px;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg2);
  border: 1px solid var(--border-thin);
  font-size: 12px;
  align-items: center;
}

.pool-row .r-tag { font-weight: bold; padding: 2px 6px; text-align: center; color: white; font-size: 11px; }
.pool-row .r-tag[data-r="UR"] { background: var(--ur-color); }
.pool-row .r-tag[data-r="SSR"] { background: var(--ssr-color); }
.pool-row .r-tag[data-r="SR"] { background: var(--sr-color); }
.pool-row .r-tag[data-r="R"] { background: var(--r-color); }
.pool-row .r-tag[data-r="N"] { background: var(--n-color); }
.pool-row .world-tag { font-size: 10px; color: var(--fg-dim); letter-spacing: 1px; }
.pool-row .rating { color: var(--accent); font-weight: bold; }
.pool-row .status { color: var(--fg2); }

.pool-actions { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }

.section-title {
  font-size: 16px;
  color: var(--accent);
  margin-bottom: 12px;
  letter-spacing: 2px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 6px;
}

.pool-empty {
  text-align: center;
  padding: 40px;
  color: var(--fg-dim);
  font-style: italic;
  background: var(--bg2);
  border: 2px dashed var(--border-thin);
}

/* ============================================
   底部
   ============================================ */

.footer {
  text-align: center;
  padding: 20px;
  color: var(--fg-dim);
  font-size: 11px;
  letter-spacing: 1px;
}

.footer a { color: var(--accent); text-decoration: none; }

/* ============================================
   寺庙签筒 · 命运卷轴 装饰元素 (style-temple-fortune-scroll)
   ============================================ */

/* === 签筒（idle 状态左侧背景装饰） === */
.signpot-deco {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 92px;
  height: 110px;
  pointer-events: none;
  opacity: 0.55;
  z-index: 0;
}

/* === 卷轴边框（右侧 life-panel 用） === */
.life-panel {
  background-image:
    linear-gradient(180deg, rgba(106, 63, 26, 0.12) 0px, rgba(106, 63, 26, 0.12) 8px, transparent 8px, transparent calc(100% - 8px), rgba(106, 63, 26, 0.12) calc(100% - 8px), rgba(106, 63, 26, 0.12) 100%);
}

.life-panel::after {
  content: '';
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 12px;
  width: 3px;
  background: linear-gradient(180deg, var(--border) 0%, transparent 50%, var(--border) 100%);
  opacity: 0.35;
  pointer-events: none;
}

/* === 5 色竹签徽章 === */
.fortune-banner-rarity {
  position: relative;
}

.bamboo-sign {
  display: inline-block;
  width: 70px;
  height: 110px;
  position: relative;
  margin: 4px 8px;
  border: 2px solid #1a1a1a;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.4);
}

.bamboo-sign::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px dashed rgba(255,255,255,0.4);
}

.bamboo-sign-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #faf3e1;
  font-family: 'STKaiti', 'KaiTi', serif;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.6);
  letter-spacing: 6px;
  line-height: 1.3;
}

.bamboo-sign-text .sign-rank {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 8px;
  writing-mode: vertical-rl;
}

.bamboo-sign-text .sign-tag {
  font-size: 11px;
  opacity: 0.85;
  letter-spacing: 3px;
}

.bamboo-sign[data-r="UR"]  { background: linear-gradient(180deg, #6d2bcb 0%, #b855ff 70%, #ffd55c 100%); }
.bamboo-sign[data-r="SSR"] { background: linear-gradient(180deg, #8a0a20 0%, #c8102e 60%, #d4a017 100%); }
.bamboo-sign[data-r="SR"]  { background: linear-gradient(180deg, #1a3a25 0%, #2e6d3a 60%, #9bd0ac 100%); }
.bamboo-sign[data-r="R"]   { background: linear-gradient(180deg, #6a5a45 0%, #a89878 70%, #e0d4b8 100%); }
.bamboo-sign[data-r="N"]   { background: linear-gradient(180deg, #2a1810 0%, #6a3f1a 80%); }

.bamboo-tassel {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  background: var(--seal);
  border: 1px solid #1a1a1a;
  border-radius: 50%;
  box-shadow: 0 4px 0 -2px var(--seal), 0 8px 0 -3px var(--seal), 0 12px 0 -4px var(--seal);
}

/* === 印章砸落动画（重要事件） === */
.life-event.critical {
  /* 覆盖原先黄光闪 */
  animation: criticalSmash 0.55s cubic-bezier(0.2, 0.9, 0.3, 1);
  background: linear-gradient(90deg, var(--bg2) 0%, var(--bg3) 50%, var(--bg2) 100%);
  border-color: var(--seal);
  border-width: 3px;
  box-shadow: 0 0 0 2px rgba(178, 34, 46, 0.18), 3px 3px 0 var(--seal);
  position: relative;
}

.life-event.critical::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  background: var(--seal);
  border-radius: 4px;
  opacity: 0;
  transform: scale(2.5) rotate(-12deg);
  animation: sealStamp 0.5s 0.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
  box-shadow: inset 0 0 0 3px #faf3e1, inset 0 0 0 5px var(--seal);
}

.life-event.critical .life-event-text::after {
  content: '运';
  position: absolute;
  right: 19px;
  top: 50%;
  margin-top: -12px;
  font-family: 'STKaiti', 'KaiTi', serif;
  font-size: 22px;
  font-weight: bold;
  color: #faf3e1;
  opacity: 0;
  transform: scale(2.5) rotate(-12deg);
  animation: sealStamp 0.5s 0.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
  z-index: 1;
}

.life-event-text { position: relative; }

@keyframes sealStamp {
  0%   { opacity: 0;    transform: scale(2.8) rotate(-15deg); }
  60%  { opacity: 0.95; transform: scale(0.92) rotate(-7deg); }
  80%  { opacity: 0.9;  transform: scale(1.06) rotate(-9deg); }
  100% { opacity: 0.85; transform: scale(1) rotate(-8deg); }
}

/* === 拳皇命中打字效果（每个字符一个 .ch） === */
.ch {
  display: inline-block;
  opacity: 0;
  transform: scale(0.3) translateY(20px);
  font-weight: inherit;
}

.ch.hit-light {
  animation: charHitLight 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.ch.hit-medium {
  animation: charHitMedium 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.ch.hit-heavy {
  animation: charHitHeavy 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes charHitLight {
  0%   { opacity: 0; transform: scale(0.3)  translateY(18px) rotate(-4deg); }
  35%  { opacity: 1; transform: scale(1.2)  translateY(-3px) rotate(2deg); }
  55%  { opacity: 1; transform: scale(1.2)  translateY(-3px) rotate(2deg); } /* hit stop */
  72%  { opacity: 1; transform: scale(0.96) translateY(0)    rotate(-1deg); }
  100% { opacity: 1; transform: scale(1)    translateY(0)    rotate(0); }
}

@keyframes charHitMedium {
  0%   { opacity: 0; transform: scale(0.3)  translateY(22px) rotate(-6deg); color: var(--accent); }
  30%  { opacity: 1; transform: scale(1.45) translateY(-4px) rotate(3deg);  color: var(--seal); text-shadow: 0 0 14px rgba(200, 16, 46, 0.6); }
  50%  { opacity: 1; transform: scale(1.45) translateY(-4px) rotate(3deg);  color: var(--seal); }
  68%  { opacity: 1; transform: scale(0.94) translateY(0)    rotate(-2deg); color: var(--accent); }
  100% { opacity: 1; transform: scale(1)    translateY(0)    rotate(0);     color: inherit; text-shadow: none; }
}

@keyframes charHitHeavy {
  0%   { opacity: 0; transform: scale(0.4)  translateY(30px) rotate(-8deg); color: var(--seal); text-shadow: 0 0 20px var(--seal); }
  25%  { opacity: 1; transform: scale(1.7)  translateY(-8px) rotate(4deg);  color: var(--seal); text-shadow: 0 0 30px var(--seal), 0 0 50px rgba(200, 16, 46, 0.5); }
  45%  { opacity: 1; transform: scale(1.7)  translateY(-8px) rotate(4deg);  text-shadow: 0 0 30px var(--seal), 0 0 50px rgba(200, 16, 46, 0.5); } /* hit stop */
  65%  { opacity: 1; transform: scale(0.92) translateY(2px)  rotate(-3deg); color: var(--seal); text-shadow: 0 0 8px var(--seal); }
  85%  { opacity: 1; transform: scale(1.05) translateY(0)    rotate(1deg);  text-shadow: 0 0 4px var(--accent); }
  100% { opacity: 1; transform: scale(1)    translateY(0)    rotate(0);     color: inherit; text-shadow: none; }
}

/* === 屏幕震动 === */
.shake-light  { animation: shake1 0.18s ease-out; }
.shake-medium { animation: shake2 0.28s ease-out; }
.shake-heavy  { animation: shake3 0.42s ease-out; }

@keyframes shake1 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(1px, -1px); }
}
@keyframes shake2 {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3px, 2px); }
  40% { transform: translate(4px, -2px); }
  60% { transform: translate(-2px, 3px); }
  80% { transform: translate(2px, -1px); }
}
@keyframes shake3 {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-6px, 4px) rotate(-0.4deg); }
  20% { transform: translate(7px, -4px) rotate(0.6deg); }
  30% { transform: translate(-5px, 5px) rotate(-0.5deg); }
  40% { transform: translate(6px, -5px); }
  50% { transform: translate(-4px, 3px); }
  60% { transform: translate(5px, -3px); }
  70% { transform: translate(-3px, 2px); }
  80% { transform: translate(3px, -2px); }
  90% { transform: translate(-1px, 1px); }
}

/* === 火花粒子 === */
.spark-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}
.spark {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--accent);
  border-radius: 50%;
  pointer-events: none;
  animation: sparkFly 0.6s ease-out forwards;
}
.spark.ink {
  background: var(--ink);
  width: 3px;
  height: 3px;
}
.spark.seal {
  background: var(--seal);
  box-shadow: 0 0 6px var(--seal);
}

@keyframes sparkFly {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--spark-dx, 30px), var(--spark-dy, -30px)) scale(0.2); }
}

/* === 题款印章（落款角章） === */
.corner-seal {
  position: fixed;
  bottom: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  background: var(--seal);
  border: 2px solid #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #faf3e1;
  font-family: 'STKaiti', 'KaiTi', serif;
  font-size: 22px;
  font-weight: bold;
  transform: rotate(-5deg);
  box-shadow: 2px 2px 0 #1a1a1a, inset 0 0 0 2px #faf3e1, inset 0 0 0 4px var(--seal);
  z-index: 100;
  letter-spacing: 0;
  pointer-events: none;
  user-select: none;
  opacity: 0.85;
}

body[data-variant="gotham"] .corner-seal,
body[data-variant="neon"] .corner-seal,
body[data-variant="notion"] .corner-seal,
body[data-variant="linear"] .corner-seal,
body[data-variant="festive"] .corner-seal { display: none; }

/* rolling / done 状态：印章会盖在事件流右下角文字上，必须让位 */
body[data-draw-state="rolling"] .corner-seal,
body[data-draw-state="done"] .corner-seal { display: none; }

/* ============================================
   F2 肉鸽选择弹层
   ============================================ */
.choice-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: choiceOverlayFade 0.25s ease-out;
}

@keyframes choiceOverlayFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.choice-prompt {
  background: var(--bg2, #faf3e1);
  color: var(--fg, #1a1a1a);
  border: 4px solid var(--accent, #c8102e);
  padding: 22px 26px;
  max-width: 580px;
  width: 90%;
  box-shadow: 8px 8px 0 var(--border, #6a3f1a), 0 0 40px rgba(0, 0, 0, 0.4);
  text-align: center;
  position: relative;
  font-family: var(--font-main);
  animation: choicePromptPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes choicePromptPop {
  0%   { transform: scale(0.5) rotate(-3deg); opacity: 0; }
  60%  { transform: scale(1.1) rotate(1deg); opacity: 1; }
  80%  { transform: scale(0.97) rotate(-1deg); }
  100% { transform: scale(1) rotate(0); }
}

.choice-label {
  font-size: 13px;
  color: var(--fg-dim);
  letter-spacing: 4px;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.choice-question {
  font-size: 22px;
  color: var(--accent);
  margin-bottom: 18px;
  letter-spacing: 4px;
  font-weight: bold;
  text-shadow: 2px 2px 0 var(--border);
}

.choice-options-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.choice-option {
  background: var(--bg);
  color: var(--fg);
  border: 2px solid var(--border);
  padding: 12px 18px;
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--border);
  transition: transform 0.05s, box-shadow 0.05s;
  text-align: left;
}
.choice-option:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--border);
  background: var(--accent);
  color: var(--button-fg);
}
.choice-option:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--border);
}
.choice-option-tone {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 1px;
  padding: 2px 6px;
  margin-right: 8px;
  border: 1px solid currentColor;
  border-radius: 0;
  font-weight: bold;
}
.choice-option[data-tone="稳"] .choice-option-tone { color: #2e6d3a; }
.choice-option[data-tone="正"] .choice-option-tone { color: #c8102e; }
.choice-option[data-tone="险"] .choice-option-tone { color: #6d2bcb; }

.choice-timer-bar {
  width: 100%;
  height: 6px;
  background: var(--bg3);
  border: 1px solid var(--border-thin);
  position: relative;
  margin-bottom: 8px;
  overflow: hidden;
}
.choice-timer-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent2, var(--accent)) 100%);
}

.choice-timer-hint {
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 1px;
}

/* === 选择留痕：在事件卡内 === */
/*
 * 父级 .life-event 是 grid-template-columns: 70px 1fr。
 * choice-trail 是后追加的第 3 个 grid item，默认会落到第二行第一列(70px)，
 * 导致每个汉字被压成竖排。grid-column: 2 / -1 让它跟事件文字同列，
 * 避免与左侧 70px 年龄列冲突。
 */
.choice-trail {
  grid-column: 2 / -1;
  margin-top: 8px;
  padding: 6px 10px;
  font-size: 12px;
  border-left: 3px solid currentColor;
  background: rgba(0, 0, 0, 0.04);
  letter-spacing: 1px;
  animation: choiceTrailFade 0.4s ease-out;
}
.choice-trail-稳 { color: #2e6d3a; border-color: #2e6d3a; }
.choice-trail-正 { color: #c8102e; border-color: #c8102e; }
.choice-trail-险 { color: #6d2bcb; border-color: #6d2bcb; }
.choice-trail strong { letter-spacing: 2px; }

@keyframes choiceTrailFade {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* === 山水青墨韵：idle 左侧底部小水墨 === */
.draw-panel-idle::after {
  content: '';
  position: absolute;
  left: 16px;
  bottom: 14px;
  right: 16px;
  height: 64px;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 64'><g fill='%235a8a6a' opacity='0.18'><path d='M0,50 Q20,30 40,42 T80,38 T120,44 T160,36 T200,42 L200,64 L0,64 Z'/></g><g fill='%231a1a1a' opacity='0.06'><path d='M0,58 Q30,46 60,52 T120,50 T200,54 L200,64 L0,64 Z'/></g></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 0;
}

/* === Done 状态卷轴展开效果 === */
body.draw-state-done .life-panel {
  background-image:
    linear-gradient(180deg, rgba(106, 63, 26, 0.18) 0px, rgba(106, 63, 26, 0.18) 12px, transparent 12px, transparent calc(100% - 12px), rgba(106, 63, 26, 0.18) calc(100% - 12px), rgba(106, 63, 26, 0.18) 100%);
}

/* ============================================
   街机感增强 (vampire-coffin × temple-fortune-scroll)
   ============================================ */

/* === 横幅顶部英文大字 callout === */
.fortune-banner-callout {
  font-family: 'Courier New', 'Consolas', monospace;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 4px;
  color: #ffd460;
  text-shadow:
    2px 2px 0 rgba(0,0,0,0.5),
    0 0 12px currentColor,
    0 0 24px rgba(255, 212, 96, 0.5);
  margin-bottom: 6px;
  text-align: center;
  animation: calloutShine 1.5s ease-out;
}

@keyframes calloutShine {
  0%   { opacity: 0; transform: scale(0.5) translateY(-20px); }
  20%  { opacity: 1; transform: scale(1.3) translateY(0); }
  35%  { transform: scale(0.95); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* === 大尺寸竹签（done 状态用） === */
.bamboo-sign-large {
  width: 96px !important;
  height: 150px !important;
  animation: bambooDraw 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}

.bamboo-sign-large::after {
  content: '';
  position: absolute;
  inset: -8px;
  border: 1px dashed rgba(255,255,255,0.4);
  animation: bambooHalo 1.6s ease-out;
  pointer-events: none;
}

.bamboo-sign-large .sign-rank { font-size: 28px !important; }
.bamboo-sign-large .sign-tag { font-size: 13px !important; }

@keyframes bambooDraw {
  0%   { transform: translateY(-80px) scale(0.4) rotate(-15deg); opacity: 0; }
  60%  { transform: translateY(8px) scale(1.1) rotate(2deg); opacity: 1; }
  80%  { transform: translateY(-2px) scale(0.97) rotate(-1deg); }
  100% { transform: translateY(0) scale(1) rotate(0); }
}

@keyframes bambooHalo {
  0%   { opacity: 0; transform: scale(0.5); }
  40%  { opacity: 1; transform: scale(1.2); border-color: currentColor; }
  100% { opacity: 0; transform: scale(2.5); }
}

/* === 横幅底部假 HUD === */
.fortune-banner-fakehud {
  margin-top: 12px;
  padding: 5px 10px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-family: 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  color: #faf3e1;
  text-align: center;
}

/* === Vampire-style DOM popup（关键字浮空数字） === */
.combat-popup {
  position: absolute;
  pointer-events: none;
  font-family: 'Courier New', 'Consolas', monospace;
  font-weight: 900;
  white-space: nowrap;
  transform: translate(-50%, 0) scale(0.4);
  animation: popupFly 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  text-shadow: 2px 2px 0 #000, 0 0 8px currentColor;
}
.combat-popup-medium {
  font-size: 14px;
  color: #c8102e;
}
.combat-popup-heavy {
  font-size: 22px;
  color: #ffd460;
  text-shadow: 2px 2px 0 #000, 0 0 12px currentColor, 0 0 24px rgba(255, 212, 96, 0.6);
}

@keyframes popupFly {
  0%   { opacity: 0; transform: translate(-50%, 0)     scale(0.3); }
  18%  { opacity: 1; transform: translate(-50%, -10px) scale(1.4); }
  30%  { opacity: 1; transform: translate(-50%, -14px) scale(1.05); }
  70%  { opacity: 1; transform: translate(-50%, -50px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -70px) scale(0.9); }
}

/* === Ambient 灵魂粒子（揭晓时升腾，按稀有度色） === */
.ambient-soul {
  position: absolute;
  bottom: -20px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  animation: ambientRise 4s linear forwards;
}

@keyframes ambientRise {
  0%   { opacity: 0; transform: translateY(0) scale(0.5); }
  15%  { opacity: 0.85; }
  100% { opacity: 0; transform: translateY(-110vh) scale(1.2); }
}

/* ============================================
   vampire 主题专属增强 (style-vampire-coffin style)
   ============================================ */

body[data-variant="vampire"] {
  background: var(--bg);
  background-image:
    radial-gradient(ellipse at center top, rgba(192, 16, 48, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at center bottom, rgba(144, 64, 192, 0.08) 0%, transparent 50%),
    linear-gradient(0deg, var(--pixel-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--pixel-grid) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 16px 16px, 16px 16px;
}

body[data-variant="vampire"] .brand { color: var(--accent2); text-shadow: 0 0 8px var(--accent2); }
body[data-variant="vampire"] .brand-icon { background: var(--accent); box-shadow: 0 0 12px var(--accent), 2px 2px 0 var(--border); }
body[data-variant="vampire"] .brand-icon::after { color: var(--accent2); }

body[data-variant="vampire"] .draw-panel,
body[data-variant="vampire"] .life-panel {
  background: var(--bg2);
  border: 2px solid var(--accent);
  box-shadow:
    inset 0 0 0 3px var(--border),
    inset 0 0 60px rgba(0, 0, 0, 0.85),
    0 0 30px rgba(192, 16, 48, 0.25),
    3px 3px 0 var(--border);
  clip-path: polygon(4% 0, 96% 0, 100% 6%, 100% 94%, 96% 100%, 4% 100%, 0 94%, 0 6%);
}

/* 4 颗红铜钉 (vampire-coffin 标志) */
body[data-variant="vampire"] .draw-panel::after,
body[data-variant="vampire"] .life-panel::after {
  display: none; /* override 寺庙版的虚线 */
}
body[data-variant="vampire"] .draw-panel::before,
body[data-variant="vampire"] .life-panel::before {
  content: '';
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(192, 16, 48, 0.25);
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 8%, #888 0%, #222 60%, transparent 70%) 0 0/16px 16px no-repeat,
    radial-gradient(circle at 92% 8%, #888 0%, #222 60%, transparent 70%) 100% 0/16px 16px no-repeat,
    radial-gradient(circle at 8% 92%, #888 0%, #222 60%, transparent 70%) 0 100%/16px 16px no-repeat,
    radial-gradient(circle at 92% 92%, #888 0%, #222 60%, transparent 70%) 100% 100%/16px 16px no-repeat;
}

body[data-variant="vampire"] .draw-title {
  color: var(--accent);
  text-shadow: 0 0 16px var(--accent), 2px 2px 0 #200004;
  letter-spacing: 8px;
  font-weight: 900;
}

body[data-variant="vampire"] .draw-button {
  background: var(--button-bg);
  color: var(--button-fg);
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(192, 16, 48, 0.5), 4px 4px 0 var(--border);
  text-shadow: 0 0 8px var(--accent2);
}

body[data-variant="vampire"] .draw-button::before,
body[data-variant="vampire"] .draw-button::after {
  color: var(--accent2);
}

body[data-variant="vampire"] .corner-seal {
  display: flex;
  background: var(--accent);
  color: var(--accent2);
  box-shadow: 0 0 16px var(--accent), 2px 2px 0 #000, inset 0 0 0 2px var(--accent2), inset 0 0 0 4px var(--accent);
}

body[data-variant="vampire"] .life-empty-hint {
  color: var(--fg2);
}
body[data-variant="vampire"] .life-empty-icon {
  font-size: 0; /* 隐藏原 🏮 emoji */
  line-height: 1;
}
body[data-variant="vampire"] .life-empty-icon::before {
  content: '☠';
  display: inline-block;
  font-size: 48px;
  color: var(--accent);
  text-shadow: 0 0 20px var(--accent);
}

/* vampire 主题下 idle 时持续飘灵魂粒子 (vampire-coffin 招牌) */
body[data-variant="vampire"]::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(circle at 12% 60%, rgba(192, 16, 48, 0.06) 0%, transparent 20%),
    radial-gradient(circle at 85% 30%, rgba(144, 64, 192, 0.05) 0%, transparent 20%),
    radial-gradient(circle at 50% 80%, rgba(255, 212, 96, 0.04) 0%, transparent 20%);
}

body[data-variant="vampire"] .fortune-banner {
  border-color: var(--accent2);
}

body[data-variant="vampire"] .life-event.critical {
  background: linear-gradient(90deg, var(--bg2) 0%, var(--bg3) 50%, var(--bg2) 100%);
  border-color: var(--accent2);
  box-shadow: 0 0 16px rgba(255, 212, 96, 0.3), 3px 3px 0 var(--accent2);
}

body[data-variant="vampire"] .life-event.critical::after {
  background: var(--accent);
  box-shadow: inset 0 0 0 3px var(--accent2), inset 0 0 0 5px var(--accent), 0 0 16px var(--accent);
}

body[data-variant="vampire"] .life-event.critical .life-event-text::after {
  color: var(--accent2);
}

/* vampire 主题下竹签外观 = 六棱柱灵魂晶体 */
body[data-variant="vampire"] .bamboo-sign {
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  border: 2px solid var(--accent2);
  box-shadow: 0 0 16px currentColor, 3px 3px 0 var(--border);
}
body[data-variant="vampire"] .bamboo-tassel { background: var(--accent2); box-shadow: 0 0 8px var(--accent2), 0 4px 0 -2px var(--accent2), 0 8px 0 -3px var(--accent2); }

body[data-variant="vampire"] .bamboo-sign[data-r="UR"]  { background: linear-gradient(180deg, #6a0810 0%, #c01030 60%, #ffd460 100%); color: #fff; }
body[data-variant="vampire"] .bamboo-sign[data-r="SSR"] { background: linear-gradient(180deg, #200006 0%, #c01030 80%, #ff4060 100%); }
body[data-variant="vampire"] .bamboo-sign[data-r="SR"]  { background: linear-gradient(180deg, #200030 0%, #9040c0 70%, #c080ff 100%); }
body[data-variant="vampire"] .bamboo-sign[data-r="R"]   { background: linear-gradient(180deg, #1a1a2a 0%, #404060 70%, #6080a0 100%); }
body[data-variant="vampire"] .bamboo-sign[data-r="N"]   { background: linear-gradient(180deg, #050009 0%, #2a2030 70%, #6a3f1a 100%); }

body[data-variant="vampire"] .fortune-banner-callout {
  color: var(--accent2);
  text-shadow: 2px 2px 0 #000, 0 0 16px currentColor, 0 0 32px var(--accent);
}

body[data-variant="vampire"] .fortune-banner-fakehud {
  background: rgba(0, 0, 0, 0.5);
  border-color: var(--accent2);
  color: var(--accent2);
}

/* ============================================
   cyberpunk 主题专属增强 (style-cyberpunk-trace)
   ============================================ */

body[data-variant="cyberpunk"] {
  background: var(--bg);
  background-image:
    /* 扫描线 */
    repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(252, 238, 12, 0.025) 2px, rgba(252, 238, 12, 0.025) 3px),
    /* 黄黑警示斜纹角 */
    linear-gradient(135deg, transparent 50%, rgba(252, 238, 12, 0.04) 50%, rgba(252, 238, 12, 0.04) 52%, transparent 52%),
    linear-gradient(0deg, var(--pixel-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--pixel-grid) 1px, transparent 1px);
  background-size: 100% 3px, 60px 60px, 16px 16px, 16px 16px;
  animation: cyberpunkFlicker 4s steps(60) infinite;
}

@keyframes cyberpunkFlicker {
  0%, 95%, 100% { filter: none; }
  96% { filter: hue-rotate(20deg) brightness(1.1); }
  97% { filter: hue-rotate(-15deg) brightness(0.9); }
  98% { filter: none; }
}

body[data-variant="cyberpunk"] .brand { color: var(--accent2); text-shadow: 0 0 4px var(--accent2), 1px 1px 0 var(--accent); }
body[data-variant="cyberpunk"] .brand-icon { background: var(--accent2); }
body[data-variant="cyberpunk"] .brand-icon::after { color: var(--bg); }

body[data-variant="cyberpunk"] .draw-panel,
body[data-variant="cyberpunk"] .life-panel {
  background: var(--bg2);
  border: 2px solid var(--accent2);
  box-shadow:
    inset 0 0 0 1px var(--accent),
    0 0 20px rgba(252, 238, 12, 0.18),
    3px 3px 0 var(--accent),
    -3px -3px 0 var(--accent3);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}

body[data-variant="cyberpunk"] .draw-panel::before,
body[data-variant="cyberpunk"] .life-panel::before {
  border-color: var(--border-thin);
  background:
    /* 黄黑警示斜纹（角落） */
    repeating-linear-gradient(45deg, var(--accent2) 0, var(--accent2) 6px, var(--bg) 6px, var(--bg) 12px) top right / 80px 16px no-repeat,
    repeating-linear-gradient(45deg, var(--accent) 0, var(--accent) 6px, var(--bg) 6px, var(--bg) 12px) bottom left / 80px 16px no-repeat;
}

body[data-variant="cyberpunk"] .draw-title {
  color: var(--accent);
  text-shadow: 2px 0 0 var(--accent3), -2px 0 0 var(--accent2), 0 0 12px currentColor;
  letter-spacing: 6px;
  font-family: 'Courier New', monospace;
  font-weight: 900;
}

body[data-variant="cyberpunk"] .draw-button {
  background: var(--button-bg);
  color: var(--button-fg);
  border: 2px solid var(--accent);
  font-family: 'Courier New', monospace;
  font-weight: 900;
  letter-spacing: 4px;
  text-shadow: none;
  box-shadow: 4px 4px 0 var(--accent), -2px -2px 0 var(--accent3);
}

body[data-variant="cyberpunk"] .corner-seal {
  display: flex;
  background: var(--accent);
  color: var(--accent2);
  font-family: 'Courier New', monospace;
  transform: rotate(0deg);
  box-shadow: 2px 2px 0 var(--accent2), -2px -2px 0 var(--accent3);
}
body[data-variant="cyberpunk"] .corner-seal::after {
  content: 'TRACE';
  display: block;
  font-size: 7px;
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  text-align: center;
  letter-spacing: 1px;
  color: var(--bg);
}

body[data-variant="cyberpunk"] .life-empty-icon {
  font-family: 'Courier New', monospace;
  font-size: 0; /* 隐藏原 🏮 emoji */
  line-height: 1;
}
body[data-variant="cyberpunk"] .life-empty-icon::before {
  content: '> _';
  display: inline-block;
  font-size: 36px;
  color: var(--accent2);
  text-shadow: 0 0 8px var(--accent2);
  animation: cursorBlink 0.8s steps(1) infinite;
}
@keyframes cursorBlink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0.3; } }

body[data-variant="cyberpunk"] .life-event.critical {
  background: linear-gradient(90deg, var(--bg2) 0%, rgba(252, 238, 12, 0.08) 50%, var(--bg2) 100%);
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(255, 0, 64, 0.4), 2px 2px 0 var(--accent2), -2px -2px 0 var(--accent3);
  position: relative;
}

body[data-variant="cyberpunk"] .life-event.critical::after {
  background: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent2), inset 0 0 0 4px var(--accent), 0 0 16px var(--accent);
  border-radius: 0;
  transform: scale(2.8) rotate(0deg);
  animation: cyberpunkAlert 0.5s 0.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes cyberpunkAlert {
  0%   { opacity: 0;    transform: scale(2.8) skew(15deg, 0); }
  30%  { opacity: 1;    transform: scale(1.1) skew(-5deg, 0); }
  60%  { opacity: 0.9;  transform: scale(0.95) skew(2deg, 0); }
  100% { opacity: 0.85; transform: scale(1)   skew(0, 0); }
}

body[data-variant="cyberpunk"] .life-event.critical .life-event-text::after {
  content: 'ERR';
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--accent2);
  font-family: 'Courier New', monospace;
}

body[data-variant="cyberpunk"] .bamboo-sign {
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  border: 2px solid var(--accent2);
  box-shadow: 0 0 16px currentColor, 3px 3px 0 var(--accent), -3px -3px 0 var(--accent3);
}
body[data-variant="cyberpunk"] .bamboo-tassel { display: none; }
body[data-variant="cyberpunk"] .bamboo-sign-text { font-family: 'Courier New', monospace; }
body[data-variant="cyberpunk"] .bamboo-sign[data-r="UR"]  { background: linear-gradient(135deg, #fcee0c 0%, #ff8000 100%); color: #000; }
body[data-variant="cyberpunk"] .bamboo-sign[data-r="SSR"] { background: linear-gradient(135deg, #ff0040 0%, #6a001a 100%); }
body[data-variant="cyberpunk"] .bamboo-sign[data-r="SR"]  { background: linear-gradient(135deg, #00d4ff 0%, #001a40 100%); }
body[data-variant="cyberpunk"] .bamboo-sign[data-r="R"]   { background: linear-gradient(135deg, #888 0%, #333 100%); }
body[data-variant="cyberpunk"] .bamboo-sign[data-r="N"]   { background: linear-gradient(135deg, #444 0%, #111 100%); }

body[data-variant="cyberpunk"] .fortune-banner-callout {
  color: var(--accent2);
  text-shadow: 2px 0 0 var(--accent), -2px 0 0 var(--accent3), 0 0 16px currentColor;
  font-family: 'Courier New', monospace;
  letter-spacing: 6px;
  animation: cyberpunkGlitch 1.5s ease-out;
}
@keyframes cyberpunkGlitch {
  0%   { opacity: 0; transform: scale(0.5) skew(15deg, 0); }
  10%  { transform: scale(1.3) skew(-8deg, 0); }
  20%  { transform: scale(0.9) skew(5deg, 0); }
  30%  { opacity: 1; transform: scale(1.05) skew(0, 0); }
  100% { transform: scale(1) skew(0, 0); }
}

body[data-variant="cyberpunk"] .fortune-banner-fakehud {
  background: var(--bg2);
  border: 1px solid var(--accent2);
  color: var(--accent2);
  font-family: 'Courier New', monospace;
}

body[data-variant="cyberpunk"] .fortune-banner {
  border-color: var(--accent);
  background: var(--bg2) !important;
  background-image: repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(252, 238, 12, 0.05) 2px, rgba(252, 238, 12, 0.05) 3px) !important;
  color: var(--fg);
}

body[data-variant="cyberpunk"] .fortune-banner-title {
  color: var(--accent);
  text-shadow: 0 0 12px currentColor, 1px 1px 0 var(--accent2);
}

/* ============================================
   dnf 主题专属增强 (style-dnf-dungeon)
   ============================================ */

body[data-variant="dnf"] {
  background: var(--bg);
  background-image:
    radial-gradient(ellipse at center top, rgba(255, 184, 0, 0.10) 0%, transparent 40%),
    radial-gradient(ellipse at left bottom, rgba(192, 16, 48, 0.10) 0%, transparent 35%),
    radial-gradient(ellipse at right bottom, rgba(144, 64, 192, 0.08) 0%, transparent 35%),
    linear-gradient(0deg, var(--pixel-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--pixel-grid) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 24px 24px, 24px 24px;
}

body[data-variant="dnf"] .brand { color: var(--accent2); text-shadow: 0 0 12px var(--accent2); font-weight: 900; }
body[data-variant="dnf"] .brand-icon { background: var(--accent); box-shadow: 0 0 12px var(--accent), 2px 2px 0 var(--accent2); }
body[data-variant="dnf"] .brand-icon::after { color: var(--accent2); }

body[data-variant="dnf"] .draw-panel,
body[data-variant="dnf"] .life-panel {
  background: var(--bg2);
  border: 3px solid var(--accent2);
  box-shadow:
    inset 0 0 0 6px var(--bg3),
    inset 0 0 0 8px var(--accent),
    inset 0 0 60px rgba(255, 184, 0, 0.1),
    0 0 24px rgba(255, 184, 0, 0.35);
}

body[data-variant="dnf"] .draw-panel::before,
body[data-variant="dnf"] .life-panel::before {
  border-color: rgba(255, 184, 0, 0.2);
  /* 四角鬼火 */
  background:
    radial-gradient(circle, var(--accent2) 0%, transparent 70%) top left / 24px 24px no-repeat,
    radial-gradient(circle, var(--accent2) 0%, transparent 70%) top right / 24px 24px no-repeat,
    radial-gradient(circle, var(--accent2) 0%, transparent 70%) bottom left / 24px 24px no-repeat,
    radial-gradient(circle, var(--accent2) 0%, transparent 70%) bottom right / 24px 24px no-repeat;
  animation: dnfFlame 1.4s ease-in-out infinite alternate;
}
@keyframes dnfFlame {
  from { opacity: 0.6; }
  to { opacity: 1; }
}

body[data-variant="dnf"] .draw-title {
  color: var(--accent2);
  text-shadow: 0 0 16px var(--accent), 2px 2px 0 var(--accent), 4px 4px 0 #200004;
  letter-spacing: 6px;
  font-weight: 900;
}

body[data-variant="dnf"] .draw-button {
  background: linear-gradient(180deg, var(--accent) 0%, #6a0810 50%, var(--accent) 100%);
  color: var(--accent2);
  border: 3px solid var(--accent2);
  font-weight: 900;
  letter-spacing: 6px;
  box-shadow:
    inset 0 0 0 2px #200004,
    0 0 20px rgba(255, 184, 0, 0.4),
    4px 4px 0 #200004;
  text-shadow: 0 0 8px var(--accent2);
  animation: dnfButtonGlow 1.6s ease-in-out infinite alternate;
}
@keyframes dnfButtonGlow {
  from { box-shadow: inset 0 0 0 2px #200004, 0 0 20px rgba(255, 184, 0, 0.4), 4px 4px 0 #200004; }
  to { box-shadow: inset 0 0 0 2px #200004, 0 0 32px rgba(255, 184, 0, 0.7), 4px 4px 0 #200004; }
}

body[data-variant="dnf"] .corner-seal {
  display: flex;
  background: var(--accent);
  color: var(--accent2);
  font-family: 'SimHei', sans-serif;
  font-weight: 900;
  transform: rotate(-8deg);
  box-shadow: 0 0 16px var(--accent2), 2px 2px 0 #200004, inset 0 0 0 2px var(--accent2);
}

body[data-variant="dnf"] .life-empty-icon { font-size: 0; line-height: 1; }
body[data-variant="dnf"] .life-empty-icon::before {
  content: '⚔';
  display: inline-block;
  font-size: 56px;
  color: var(--accent2);
  text-shadow: 0 0 20px var(--accent), 0 0 40px var(--accent2);
  animation: dnfSword 1.2s ease-in-out infinite alternate;
}
@keyframes dnfSword {
  from { transform: rotate(-8deg) scale(1); }
  to { transform: rotate(8deg) scale(1.05); }
}

body[data-variant="dnf"] .life-event.critical {
  background: linear-gradient(90deg, var(--bg2) 0%, rgba(255, 184, 0, 0.12) 50%, var(--bg2) 100%);
  border-color: var(--accent2);
  border-width: 3px;
  box-shadow: 0 0 20px rgba(255, 184, 0, 0.5), 3px 3px 0 var(--accent);
}

body[data-variant="dnf"] .life-event.critical::after {
  background: var(--accent);
  box-shadow: inset 0 0 0 3px var(--accent2), inset 0 0 0 5px var(--accent), 0 0 24px var(--accent2);
}

body[data-variant="dnf"] .life-event.critical .life-event-text::after {
  content: '运';
  color: var(--accent2);
  text-shadow: 0 0 8px var(--accent2);
}

body[data-variant="dnf"] .bamboo-sign {
  border: 3px solid var(--accent2);
  border-radius: 4px;
  box-shadow: 0 0 24px currentColor, 4px 4px 0 var(--accent);
  position: relative;
}
body[data-variant="dnf"] .bamboo-sign::after {
  content: '';
  position: absolute;
  inset: -6px;
  border: 1px solid var(--accent2);
  opacity: 0.5;
  border-radius: 6px;
  animation: dnfAura 1.2s ease-in-out infinite alternate;
}
@keyframes dnfAura {
  from { transform: scale(1); opacity: 0.5; }
  to { transform: scale(1.06); opacity: 0.8; }
}
body[data-variant="dnf"] .bamboo-tassel { background: var(--accent2); box-shadow: 0 0 12px var(--accent2), 0 4px 0 -2px var(--accent2), 0 8px 0 -3px var(--accent2); }

body[data-variant="dnf"] .bamboo-sign[data-r="UR"]  { background: linear-gradient(180deg, #ffe080 0%, #ffb800 50%, #c08000 100%); color: #200004; }
body[data-variant="dnf"] .bamboo-sign[data-r="SSR"] { background: linear-gradient(180deg, #6a0810 0%, #c01030 60%, #ff4060 100%); }
body[data-variant="dnf"] .bamboo-sign[data-r="SR"]  { background: linear-gradient(180deg, #200030 0%, #9040c0 70%, #c080ff 100%); }
body[data-variant="dnf"] .bamboo-sign[data-r="R"]   { background: linear-gradient(180deg, #1a1a2a 0%, #404060 70%, #6080a0 100%); }
body[data-variant="dnf"] .bamboo-sign[data-r="N"]   { background: linear-gradient(180deg, #050009 0%, #2a2030 70%, #6a3f1a 100%); }

body[data-variant="dnf"] .fortune-banner-callout {
  color: var(--accent2);
  text-shadow: 0 0 16px var(--accent2), 2px 2px 0 var(--accent), 4px 4px 0 #000;
  font-family: 'SimHei', sans-serif;
  font-weight: 900;
  letter-spacing: 4px;
}

body[data-variant="dnf"] .fortune-banner-fakehud {
  background: rgba(0, 0, 0, 0.6);
  border-color: var(--accent2);
  color: var(--accent2);
  text-shadow: 0 0 6px currentColor;
}

body[data-variant="dnf"] .fortune-banner {
  border-color: var(--accent2);
}

body[data-variant="dnf"] .fortune-banner-title {
  color: var(--accent2);
  text-shadow: 0 0 16px var(--accent2), 3px 3px 0 var(--accent), 5px 5px 0 #200004;
  font-family: 'SimHei', 'KaiTi', serif;
  letter-spacing: 8px;
}

/* ============================================
   genshin · 元素抽契 增强 (style-genshin-element)
   ============================================ */

body[data-variant="genshin"] {
  background: var(--bg);
  background-image:
    radial-gradient(ellipse at 10% 90%, rgba(95, 179, 104, 0.10) 0%, transparent 30%),
    radial-gradient(ellipse at 90% 10%, rgba(82, 136, 201, 0.10) 0%, transparent 30%),
    radial-gradient(ellipse at 50% 50%, rgba(199, 93, 58, 0.05) 0%, transparent 40%);
}

body[data-variant="genshin"] .brand { color: var(--accent); }
body[data-variant="genshin"] .brand-icon { background: var(--accent); box-shadow: 0 2px 8px rgba(199, 93, 58, 0.4); border-radius: 50%; }
body[data-variant="genshin"] .brand-icon::after { color: #fff; }

body[data-variant="genshin"] .draw-panel,
body[data-variant="genshin"] .life-panel {
  background: var(--bg2);
  border: 1px solid var(--border-thin);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(184, 168, 136, 0.25), 0 2px 8px rgba(184, 168, 136, 0.15);
}
body[data-variant="genshin"] .draw-panel::before,
body[data-variant="genshin"] .life-panel::before {
  border-radius: 8px;
  border-color: rgba(184, 168, 136, 0.25);
}
body[data-variant="genshin"] .draw-panel::after { display: none; }

body[data-variant="genshin"] .draw-title {
  color: var(--accent);
  text-shadow: 0 2px 6px rgba(199, 93, 58, 0.3);
  letter-spacing: 4px;
}

body[data-variant="genshin"] .draw-button {
  background: var(--button-bg);
  color: #fff;
  border-radius: 24px;
  border: none;
  box-shadow: 0 6px 20px rgba(199, 93, 58, 0.45), 0 2px 4px rgba(0,0,0,0.1);
  font-weight: 700;
  letter-spacing: 4px;
}
body[data-variant="genshin"] .draw-button::before,
body[data-variant="genshin"] .draw-button::after {
  color: rgba(255, 255, 255, 0.6);
}
body[data-variant="genshin"] .draw-button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(199, 93, 58, 0.55); }

body[data-variant="genshin"] .corner-seal {
  display: flex;
  background: linear-gradient(135deg, #5fb368 0%, #5288c9 50%, #c75d3a 100%);
  color: #fff;
  border-radius: 50%;
  font-family: 'STKaiti', serif;
  transform: rotate(0deg);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2), inset 0 0 0 3px rgba(255,255,255,0.4);
}

body[data-variant="genshin"] .life-empty-icon { font-size: 0; line-height: 1; }
body[data-variant="genshin"] .life-empty-icon::before {
  content: '✦';
  display: inline-block;
  font-size: 56px;
  background: linear-gradient(135deg, var(--accent2), var(--accent3), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  animation: genshinTwinkle 2s ease-in-out infinite;
}
@keyframes genshinTwinkle {
  0%, 100% { transform: scale(1) rotate(0); opacity: 0.85; }
  50% { transform: scale(1.15) rotate(180deg); opacity: 1; }
}

body[data-variant="genshin"] .life-event {
  border-radius: 8px;
  border: 1px solid var(--border-thin);
  background: var(--bg2);
  box-shadow: 0 2px 6px rgba(184, 168, 136, 0.15);
}

body[data-variant="genshin"] .life-event.critical {
  background: linear-gradient(135deg, rgba(199, 93, 58, 0.08) 0%, rgba(95, 179, 104, 0.06) 100%);
  border: 2px solid var(--accent);
  box-shadow: 0 6px 20px rgba(199, 93, 58, 0.25);
}

body[data-variant="genshin"] .life-event.critical::after {
  background: var(--accent);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  box-shadow: 0 4px 12px var(--accent), inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}

body[data-variant="genshin"] .life-event.critical .life-event-text::after {
  color: #fff;
  font-family: 'STKaiti', serif;
  font-size: 18px;
}

body[data-variant="genshin"] .bamboo-sign {
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}
body[data-variant="genshin"] .bamboo-tassel {
  background: var(--accent2);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent2);
}
body[data-variant="genshin"] .bamboo-sign[data-r="UR"]  { background: linear-gradient(135deg, #c75d3a 0%, #ffa44f 60%, #ffd700 100%); }
body[data-variant="genshin"] .bamboo-sign[data-r="SSR"] { background: linear-gradient(135deg, #b8a04a 0%, #e0c668 100%); }
body[data-variant="genshin"] .bamboo-sign[data-r="SR"]  { background: linear-gradient(135deg, #2d7a36 0%, #5fb368 100%); }
body[data-variant="genshin"] .bamboo-sign[data-r="R"]   { background: linear-gradient(135deg, #2a5a8a 0%, #5288c9 100%); }
body[data-variant="genshin"] .bamboo-sign[data-r="N"]   { background: linear-gradient(135deg, #5a5a5a 0%, #888 100%); }

body[data-variant="genshin"] .fortune-banner {
  border-radius: 16px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}
body[data-variant="genshin"] .fortune-banner-callout {
  font-family: 'STKaiti', serif;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 0 16px currentColor;
  letter-spacing: 6px;
}
body[data-variant="genshin"] .fortune-banner-title {
  color: #fff;
  text-shadow: 0 4px 12px rgba(0,0,0,0.4);
  font-family: 'STKaiti', 'PingFang SC', serif;
}
body[data-variant="genshin"] .fortune-banner-fakehud {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
  border-radius: 16px;
  font-family: 'STKaiti', serif;
}

/* ============================================
   成就链 (v4 新增): toast + achievement-wall
   ============================================ */

.achievement-toast {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 9999;
  min-width: 280px;
  max-width: 380px;
  padding: 14px 18px;
  border: 2px solid var(--border);
  background: var(--bg2);
  color: var(--fg);
  font-family: var(--font-main);
  box-shadow: 6px 6px 0 var(--border);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.32s ease, transform 0.32s ease;
  pointer-events: none;
}
.achievement-toast.achievement-toast-show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.achievement-toast-head {
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--accent2);
  margin-bottom: 6px;
}
.achievement-toast-title {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 4px;
}
.achievement-toast-desc {
  font-size: 12px;
  color: var(--fg2);
  line-height: 1.55;
  margin-bottom: 6px;
}
.achievement-toast-reward {
  font-size: 11px;
  color: var(--accent);
  border-top: 1px dashed var(--border-thin);
  padding-top: 6px;
}

.achievement-toast-gold    { border-color: #c8a13a; box-shadow: 6px 6px 0 #c8a13a; }
.achievement-toast-jade    { border-color: #2e8a5a; box-shadow: 6px 6px 0 #2e8a5a; }
.achievement-toast-crimson { border-color: #b8253a; box-shadow: 6px 6px 0 #b8253a; }
.achievement-toast-azure   { border-color: #2a5288; box-shadow: 6px 6px 0 #2a5288; }
.achievement-toast-violet  { border-color: #6d2bcb; box-shadow: 6px 6px 0 #6d2bcb; }

/* ----- 成就墙 (pool 页) ----- */

.achievement-wall {
  margin: 12px 0 24px;
  padding: 14px;
  background: var(--bg2);
  border: 2px solid var(--border-thin);
}
.achievement-wall-head {
  font-size: 12px;
  letter-spacing: 4px;
  color: var(--accent2);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border-thin);
}
.achievement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.achievement-card {
  padding: 12px;
  border: 2px solid var(--border-thin);
  background: var(--bg);
  font-size: 12px;
  line-height: 1.5;
  position: relative;
}
.achievement-card-unlocked {
  background: var(--bg2);
}
.achievement-card-locked {
  opacity: 0.55;
  filter: grayscale(0.6);
}
.achievement-card-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--fg);
  margin-bottom: 4px;
}
.achievement-card-desc {
  font-size: 11px;
  color: var(--fg2);
  margin-bottom: 4px;
}
.achievement-card-reward {
  font-size: 11px;
  color: var(--accent);
  margin-bottom: 4px;
}
.achievement-status {
  display: inline-block;
  font-size: 10px;
  color: var(--fg-dim);
  letter-spacing: 1px;
}

.achievement-card-gold    { border-color: #c8a13a; box-shadow: 3px 3px 0 #c8a13a; }
.achievement-card-jade    { border-color: #2e8a5a; box-shadow: 3px 3px 0 #2e8a5a; }
.achievement-card-crimson { border-color: #b8253a; box-shadow: 3px 3px 0 #b8253a; }
.achievement-card-azure   { border-color: #2a5288; box-shadow: 3px 3px 0 #2a5288; }
.achievement-card-violet  { border-color: #6d2bcb; box-shadow: 3px 3px 0 #6d2bcb; }

/* ============================================
   stats 雷达图 (v5 新增, detail 页 stats 区上方)
   ============================================ */

/* ============================================
   pool 搜索框 (v5 新增)
   ============================================ */

.pool-search-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  align-items: center;
}
.pool-search-input {
  flex: 1;
  padding: 10px 12px;
  border: 2px solid var(--border-thin);
  background: var(--bg2);
  color: var(--fg);
  font-family: var(--font-main);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s ease;
}
.pool-search-input:focus { border-color: var(--accent); }
.pool-search-clear {
  padding: 10px 14px;
  background: var(--bg2);
  color: var(--fg-dim);
  border: 2px solid var(--border-thin);
  font-family: var(--font-main);
  cursor: pointer;
  font-size: 12px;
}
.pool-search-clear:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ============================================
   detail 页 4 维度词云 (v5 新增)
   ============================================ */

.four-dim-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.four-dim-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
  align-items: start;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border-thin);
}
.four-dim-row:last-child { border-bottom: none; }
.four-dim-label {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--fg2);
  font-weight: 700;
  padding-top: 4px;
}
.four-dim-icon { color: var(--accent); margin-right: 4px; }
.four-dim-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.four-dim-chip {
  display: inline-block;
  padding: 4px 10px;
  background: var(--bg);
  border: 1px solid var(--border-thin);
  font-size: 11px;
  color: var(--fg2);
  cursor: default;
  transition: all 0.15s ease;
}
.four-dim-chip:hover {
  background: var(--accent);
  color: var(--button-fg);
  border-color: var(--accent);
}

.stats-radar-wrap {
  width: 100%;
  max-width: 320px;
  margin: 0 auto 4px;
}
.stats-radar { display: block; }
.radar-ring {
  fill: none;
  stroke: var(--border-thin);
  stroke-width: 1;
  opacity: 0.5;
}
.radar-axis {
  stroke: var(--border-thin);
  stroke-width: 1;
  opacity: 0.4;
}
.radar-data {
  fill: var(--accent);
  fill-opacity: 0.28;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
}
.radar-label {
  font-size: 11px;
  font-family: var(--font-main);
  fill: var(--fg2);
  font-weight: 600;
}

/* ============================================
   LR / EX 超隐藏稀有度 (v4 新增)
   ============================================ */

/* LR: 纯金 + 流光 */
.fortune-banner[data-r="LR"] {
  background: linear-gradient(135deg, #1a0a00 0%, #6a3a00 30%, #d49a00 60%, #fff6c8 80%, #d49a00 100%);
  background-size: 200% 200%;
  animation: lr-shimmer 3s linear infinite;
  border-color: #ffd460;
  color: #fff;
  box-shadow: 0 0 32px rgba(255, 212, 96, 0.6), 6px 6px 0 #c8a13a;
}
@keyframes lr-shimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.rarity-badge[data-r="LR"] {
  background: linear-gradient(135deg, #c8a13a 0%, #fff6c8 50%, #c8a13a 100%);
  color: #4a3018;
  box-shadow: 3px 3px 0 var(--border), 0 0 24px rgba(255, 212, 96, 0.7);
}

.pool-card[data-r="LR"] .rarity { color: #c8a13a; }
.pool-row .r-tag[data-r="LR"] {
  background: linear-gradient(135deg, #c8a13a 0%, #fff6c8 100%);
  color: #4a3018;
  font-weight: 800;
}
.bamboo-sign[data-r="LR"] {
  background: linear-gradient(180deg, #6a3a00 0%, #c8a13a 50%, #fff6c8 100%);
  color: #1a0a00;
}

/* EX: 紫红渐变 + 多色光斑 */
.fortune-banner[data-r="EX"] {
  background: linear-gradient(135deg, #1a002a 0%, #6d2bcb 25%, #b855ff 50%, #ff5577 75%, #ffd460 100%);
  background-size: 300% 300%;
  animation: ex-aurora 5s linear infinite;
  border-color: #ff88ff;
  color: #fff;
  box-shadow: 0 0 48px rgba(184, 85, 255, 0.7),
              0 0 80px rgba(255, 85, 119, 0.4),
              6px 6px 0 #6d2bcb;
}
@keyframes ex-aurora {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

.rarity-badge[data-r="EX"] {
  background: linear-gradient(135deg, #6d2bcb 0%, #ff5577 50%, #ffd460 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  box-shadow: 3px 3px 0 var(--border), 0 0 32px rgba(255, 85, 119, 0.6);
}

.pool-card[data-r="EX"] .rarity {
  background: linear-gradient(135deg, #6d2bcb 0%, #ff5577 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pool-row .r-tag[data-r="EX"] {
  background: linear-gradient(135deg, #6d2bcb 0%, #ff5577 100%);
  color: #fff;
  font-weight: 800;
}
.bamboo-sign[data-r="EX"] {
  background: linear-gradient(180deg, #1a002a 0%, #6d2bcb 40%, #ff5577 70%, #ffd460 100%);
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* ============================================
   v6+ 故事原型 / 原著背景 卡片
   ============================================ */

.prototype-card {
  position: relative;
}

.prototype-grid {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  align-items: stretch;
  margin-top: 8px;
}

.prototype-cover {
  position: relative;
  background: linear-gradient(160deg, #2b1410 0%, #5a2a18 35%, #8a4630 70%, #c89060 100%);
  color: #fff7e6;
  border: 3px solid #1a0a06;
  border-radius: 2px;
  padding: 14px 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 170px;
  box-shadow: 4px 4px 0 var(--border), inset 0 0 0 2px rgba(255, 247, 230, 0.12);
  font-family: 'Georgia', 'Songti SC', '宋体', serif;
}

.prototype-cover::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 6px;
  right: 6px;
  bottom: 6px;
  border: 1px dashed rgba(255, 247, 230, 0.35);
  pointer-events: none;
}

.prototype-cover-title {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
}

.prototype-cover-author {
  font-size: 11px;
  opacity: 0.9;
  font-style: italic;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 247, 230, 0.25);
}

.prototype-cover-tradition {
  font-size: 10px;
  opacity: 0.7;
  margin-top: 4px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* 不同稀有度的封面色调，强化"经典+珍稀感" */
.prototype-cover[data-r="UR"]  { background: linear-gradient(160deg, #1a0838 0%, #3a1968 40%, #6d2bcb 100%); }
.prototype-cover[data-r="SSR"] { background: linear-gradient(160deg, #0e1d3b 0%, #1d3a6e 40%, #3d6bb5 100%); }
.prototype-cover[data-r="SR"]  { background: linear-gradient(160deg, #1a3422 0%, #2e5c3c 40%, #5fa872 100%); }
.prototype-cover[data-r="R"]   { background: linear-gradient(160deg, #2b1410 0%, #5a2a18 40%, #8a4630 100%); }
.prototype-cover[data-r="N"]   { background: linear-gradient(160deg, #2a2823 0%, #4a4640 40%, #7a7468 100%); }
.prototype-cover[data-r="LR"]  { background: linear-gradient(160deg, #1a0a00 0%, #6a3a00 40%, #d49a00 80%, #fff6c8 100%); color: #2a1800; }
.prototype-cover[data-r="EX"]  { background: linear-gradient(160deg, #1a002a 0%, #6d2bcb 40%, #ff5577 100%); }

.prototype-cover[data-r="LR"] .prototype-cover-author,
.prototype-cover[data-r="LR"] .prototype-cover-tradition { color: #2a1800; border-top-color: rgba(42, 24, 0, 0.35); }

.prototype-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  line-height: 1.75;
}

.prototype-summary {
  background: var(--bg);
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  color: var(--fg);
  font-style: italic;
}

.prototype-borrowed {
  color: var(--fg2);
  font-size: 13px;
  line-height: 1.8;
}

.prototype-borrowed strong {
  color: var(--accent);
}

.prototype-citations {
  font-size: 12px;
  color: var(--fg2);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-items: baseline;
}

.prototype-citations strong {
  color: var(--accent);
  margin-right: 4px;
}

.prototype-cite-chip {
  display: inline-block;
  padding: 2px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 2px;
  font-size: 11px;
  color: var(--fg2);
}

/* 移动端：封面缩小，单列排布 */
@media (max-width: 640px) {
  .prototype-grid {
    grid-template-columns: 1fr;
  }
  .prototype-cover {
    min-height: 120px;
  }
}


/* ============================================
   v7 (cursormcp-local41) 结局图鉴 Codex
   ============================================ */

#view-codex {
  padding: 20px 32px 60px;
}

.codex-header {
  background: var(--bg2);
  border: 2px solid var(--border);
  box-shadow: var(--shadow);
  padding: 18px 22px;
  margin-bottom: 22px;
}

.codex-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.codex-header-title h2 {
  margin: 0 0 6px;
  font-size: 22px;
  color: var(--fg);
  letter-spacing: 2px;
}

.codex-header-sub {
  font-size: 13px;
  color: var(--fg-dim);
}

.codex-header-sub strong {
  color: var(--accent);
  font-size: 15px;
}

.codex-header-tools {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.codex-share-btn,
.codex-reset-btn {
  font-family: var(--font-main);
  font-size: 13px;
  padding: 8px 16px;
  border: 2px solid var(--border);
  background: var(--button-bg);
  color: var(--button-fg);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease;
}

.codex-share-btn:hover,
.codex-reset-btn:hover {
  transform: translate(-1px, -1px);
}

.codex-reset-btn {
  background: var(--bg3);
  color: var(--fg-dim);
}

.codex-progress {
  margin-top: 14px;
  height: 8px;
  background: var(--bg3);
  border: 1px solid var(--border-thin);
  position: relative;
  overflow: hidden;
}

.codex-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent3) 0%, var(--accent) 60%, var(--accent2) 100%);
  transition: width .4s ease;
}

.codex-chips {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.codex-chip {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--border-thin);
  background: var(--bg);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--fg2);
}

.codex-chip[data-r="LR"]  { color: #d4a017; border-color: rgba(212,160,23,0.6); }
.codex-chip[data-r="EX"]  { color: #6d2bcb; border-color: rgba(109,43,203,0.6); }
.codex-chip[data-r="UR"]  { color: var(--ur-color); }
.codex-chip[data-r="SSR"] { color: var(--ssr-color); }
.codex-chip[data-r="SR"]  { color: var(--sr-color); }
.codex-chip[data-r="R"]   { color: var(--r-color); }
.codex-chip[data-r="N"]   { color: var(--n-color); }

.codex-world {
  margin-bottom: 28px;
}

.codex-world-title {
  margin: 0 0 12px;
  font-size: 16px;
  color: var(--fg);
  border-bottom: 2px solid var(--border-thin);
  padding-bottom: 6px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.codex-world-count {
  font-size: 12px;
  color: var(--fg-dim);
  font-weight: normal;
}

.codex-rarity-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 12px;
  margin-bottom: 10px;
  align-items: start;
}

.codex-rarity-tag {
  background: var(--bg3);
  border: 1px solid var(--border-thin);
  text-align: center;
  font-weight: bold;
  padding: 4px 0;
  font-size: 13px;
  letter-spacing: 1px;
}

.codex-rarity-tag[data-r="LR"]  { color: #d4a017; border-color: rgba(212,160,23,0.8); background: rgba(212,160,23,0.08); }
.codex-rarity-tag[data-r="EX"]  { color: #6d2bcb; border-color: rgba(109,43,203,0.8); background: rgba(109,43,203,0.08); }
.codex-rarity-tag[data-r="UR"]  { color: var(--ur-color); }
.codex-rarity-tag[data-r="SSR"] { color: var(--ssr-color); }
.codex-rarity-tag[data-r="SR"]  { color: var(--sr-color); }
.codex-rarity-tag[data-r="R"]   { color: var(--r-color); }
.codex-rarity-tag[data-r="N"]   { color: var(--n-color); }

.codex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}

.codex-cell {
  background: var(--bg2);
  border: 2px solid var(--border-thin);
  padding: 10px;
  font-family: var(--font-main);
  text-align: left;
  cursor: default;
  min-height: 88px;
  position: relative;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}

.codex-cell.unlocked {
  cursor: pointer;
  background: var(--bg2);
}

.codex-cell.unlocked:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-sm);
}

.codex-cell.locked {
  background: var(--bg3);
  opacity: 0.55;
  border-style: dashed;
}

.codex-cell-rarity {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1px;
}

.codex-cell[data-r="LR"]  .codex-cell-rarity { color: #d4a017; }
.codex-cell[data-r="EX"]  .codex-cell-rarity { color: #6d2bcb; }
.codex-cell[data-r="UR"]  .codex-cell-rarity { color: var(--ur-color); }
.codex-cell[data-r="SSR"] .codex-cell-rarity { color: var(--ssr-color); }
.codex-cell[data-r="SR"]  .codex-cell-rarity { color: var(--sr-color); }
.codex-cell[data-r="R"]   .codex-cell-rarity { color: var(--r-color); }
.codex-cell[data-r="N"]   .codex-cell-rarity { color: var(--n-color); }

.codex-cell.unlocked[data-r="LR"]  { border-color: rgba(212,160,23,0.7); box-shadow: 0 0 8px rgba(212,160,23,0.25); }
.codex-cell.unlocked[data-r="EX"]  { border-color: rgba(109,43,203,0.7); box-shadow: 0 0 8px rgba(109,43,203,0.25); }
.codex-cell.unlocked[data-r="UR"]  { border-color: var(--ur-color); }
.codex-cell.unlocked[data-r="SSR"] { border-color: var(--ssr-color); }
.codex-cell.unlocked[data-r="SR"]  { border-color: var(--sr-color); }

.codex-cell-title {
  font-size: 13px;
  font-weight: bold;
  color: var(--fg);
  margin-top: 2px;
  margin-right: 30px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.codex-cell-char {
  font-size: 11px;
  color: var(--fg2);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.codex-cell-meta {
  font-size: 10px;
  color: var(--fg-dim);
  margin-top: 4px;
}

.codex-cell-locked-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--fg-dim);
  opacity: 0.5;
  pointer-events: none;
}

.codex-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--fg-dim);
  font-size: 14px;
  background: var(--bg2);
  border: 2px dashed var(--border-thin);
}

/* 全局 toast */
.global-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--fg);
  color: var(--bg);
  font-family: var(--font-main);
  font-size: 13px;
  padding: 10px 22px;
  border: 2px solid var(--border);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 9999;
}

.global-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 640px) {
  #view-codex { padding: 16px; }
  .codex-rarity-row { grid-template-columns: 1fr; }
  .codex-rarity-tag { width: max-content; }
}


/* ============================================
   v7 主题: dnf-bright (命门 · 朝阳) — dnf 亮色镜像
   ============================================ */
body[data-variant="dnf-bright"] {
  --bg: #fff8e8;
  --bg2: #fff3d8;
  --bg3: #f8e8c0;
  --fg: #2a1408;
  --fg2: #6a3010;
  --fg-dim: #a07050;
  --accent: #c01030;
  --accent2: #d49000;
  --accent3: #7030a0;
  --seal: #c01030;
  --ink: #2a1408;
  --paper: #fff8e8;
  --border: #c8801a;
  --border-thin: rgba(200, 128, 26, 0.4);
  --shadow: 0 4px 12px rgba(200, 128, 26, 0.3), 3px 3px 0 #c8801a;
  --shadow-sm: 0 2px 6px rgba(200, 128, 26, 0.25);
  --font-main: 'Courier New', 'Consolas', 'SimHei', monospace;
  --button-bg: linear-gradient(180deg, #d49000 0%, #a06800 100%);
  --button-fg: #fff8e8;
  --rolling-bg: #fff3d8;
  --pixel-grid: rgba(200, 128, 26, 0.06);

  --ur-color: #c8801a;
  --ssr-color: #c01030;
  --sr-color: #7030a0;
  --r-color: #5070a0;
  --n-color: #6a3010;

  --sign-ur: #c8801a;
  --sign-ssr: #c01030;
  --sign-sr: #7030a0;
  --sign-r: #5070a0;
  --sign-n: #6a3010;
}

/* ============================================
   v7 主题: cyberpunk-bright (赛博 · 白昼)
   ============================================ */
body[data-variant="cyberpunk-bright"] {
  --bg: #f6f8fc;
  --bg2: #ffffff;
  --bg3: #e6ebf2;
  --fg: #1a2030;
  --fg2: #0070d0;
  --fg-dim: #6a7890;
  --accent: #ff5070;        /* 霓虹粉 */
  --accent2: #0090f0;       /* 信息蓝 */
  --accent3: #f0c800;       /* 黄警示 */
  --seal: #ff5070;
  --ink: #1a2030;
  --paper: #ffffff;
  --border: #0070d0;
  --border-thin: rgba(0, 112, 208, 0.3);
  --shadow: 0 4px 16px rgba(0, 144, 240, 0.25), 3px 3px 0 #0070d0;
  --shadow-sm: 0 2px 8px rgba(0, 144, 240, 0.2);
  --font-main: 'Consolas', 'Courier New', monospace;
  --button-bg: linear-gradient(180deg, #ff5070 0%, #d03050 100%);
  --button-fg: #ffffff;
  --rolling-bg: #ffffff;
  --pixel-grid: rgba(0, 144, 240, 0.05);

  --ur-color: #ff5070;
  --ssr-color: #f0c800;
  --sr-color: #00b070;
  --r-color: #0090f0;
  --n-color: #6a7890;

  --sign-ur: #ff5070;
  --sign-ssr: #f0c800;
  --sign-sr: #00b070;
  --sign-r: #0090f0;
  --sign-n: #6a7890;
}

/* ============================================
   v7 主题: stardew (星露谷物语)
   IP: 暖橙木 + 葡萄藤紫 + 牧场绿 + 像素手绘
   ============================================ */
body[data-variant="stardew"] {
  --bg: #f7e9c8;            /* 麦秆米 */
  --bg2: #fff4d8;           /* 木屋墙 */
  --bg3: #ebd3a0;           /* 旧木板 */
  --fg: #3a2010;            /* 深栗木 */
  --fg2: #6a4020;
  --fg-dim: #a08060;
  --accent: #d65020;        /* 南瓜橙 */
  --accent2: #6a9020;       /* 牧场绿 */
  --accent3: #8a5dbf;       /* 葡萄藤紫 */
  --seal: #d65020;
  --ink: #3a2010;
  --paper: #fff4d8;
  --border: #6a4020;
  --border-thin: rgba(106, 64, 32, 0.4);
  --shadow: 4px 4px 0 #6a4020;
  --shadow-sm: 2px 2px 0 #6a4020;
  --radius: 0;
  --radius-sm: 0;
  --font-main: 'STKaiti', 'Microsoft YaHei', 'Comic Sans MS', sans-serif;
  --font-pixel: 'Courier New', 'Consolas', monospace;
  --button-bg: linear-gradient(180deg, #d65020 0%, #a03810 100%);
  --button-fg: #fff4d8;
  --rolling-bg: #fff4d8;
  --pixel-grid: rgba(106, 64, 32, 0.05);

  --ur-color: #8a5dbf;      /* 紫水晶 · 五星 */
  --ssr-color: #d65020;     /* 南瓜橙 · 四星 */
  --sr-color: #6a9020;      /* 牧场绿 · 三星 */
  --r-color: #4a85bf;       /* 河流蓝 · R */
  --n-color: #8a6840;       /* 木褐 · N */

  --sign-ur: #8a5dbf;
  --sign-ssr: #d65020;
  --sign-sr: #6a9020;
  --sign-r: #4a85bf;
  --sign-n: #8a6840;
}

/* ============================================
   v7 主题: monument (纪念碑谷)
   IP: 沙漠粉 + 米黄 + 薄荷绿 + 透明感几何
   ============================================ */
body[data-variant="monument"] {
  --bg: #f0e8de;            /* 沙漠米 */
  --bg2: #faf3ec;           /* 暖白 */
  --bg3: #e0d0c0;           /* 旧砂石 */
  --fg: #2a3848;            /* 暮蓝 */
  --fg2: #5a6878;
  --fg-dim: #9aa8b0;
  --accent: #e88090;        /* 沙漠粉 */
  --accent2: #88ddc0;       /* 薄荷绿 */
  --accent3: #f0c870;       /* 沙金黄 */
  --seal: #e88090;
  --ink: #2a3848;
  --paper: #faf3ec;
  --border: #c0a890;
  --border-thin: rgba(192, 168, 144, 0.35);
  --shadow: 0 6px 0 rgba(192, 168, 144, 0.6);
  --shadow-sm: 0 3px 0 rgba(192, 168, 144, 0.5);
  --radius: 6px;
  --radius-sm: 4px;
  --font-main: 'Georgia', 'STKaiti', 'PingFang SC', serif;
  --button-bg: linear-gradient(180deg, #e88090 0%, #c05060 100%);
  --button-fg: #faf3ec;
  --rolling-bg: #faf3ec;
  --pixel-grid: rgba(192, 168, 144, 0.04);

  --ur-color: #e88090;      /* 沙漠粉 */
  --ssr-color: #88ddc0;     /* 薄荷绿 */
  --sr-color: #f0c870;      /* 沙金黄 */
  --r-color: #88a8c8;       /* 暮蓝灰 */
  --n-color: #9aa8b0;

  --sign-ur: #e88090;
  --sign-ssr: #88ddc0;
  --sign-sr: #f0c870;
  --sign-r: #88a8c8;
  --sign-n: #9aa8b0;
}