/* =========================================================
   CalcElf 欢迎仪式 / 隐私弹窗 / 水壶 / 皇冠领巾
   ========================================================= */

/* 欢迎仪式全屏 */
.calcelf-welcome-root {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 30%, #1a1a2e 0%, #0b0b14 70%, #000 100%);
  overflow: hidden;
}

.calcelf-welcome-stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.calcelf-lottie-box {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.calcelf-lottie-box svg {
  width: 100% !important;
  height: 100% !important;
}

.calcelf-welcome-content {
  position: absolute;
  left: 50%;
  bottom: 7vh;
  transform: translateX(-50%);
  z-index: 3;
  width: min(92vw, 680px);
  text-align: center;
  opacity: 0;
  transition: opacity 0.55s ease, transform 0.55s ease;
  pointer-events: none;
}

.calcelf-welcome-root.show-content .calcelf-welcome-content {
  opacity: 1;
  transform: translateX(-50%) translateY(-6px);
  pointer-events: auto;
}

#calcelfWelcomeTitle {
  margin: 0;
  font-size: clamp(32px, 6vw, 64px);
  color: #fff;
  text-shadow: 0 6px 24px rgba(0, 0, 0, 0.6), 0 0 24px rgba(255, 193, 7, 0.5);
  font-weight: var(--ce-fw-head);
  letter-spacing: 1px;
}

#calcelfWelcomeDesc {
  margin: 12px 0 18px;
  font-size: clamp(16px, 2.4vw, 24px);
  color: #ffd93d;
  font-weight: 700;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

#calcelfWelcomeBtn {
  font-size: clamp(16px, 2vw, 22px);
  padding: 14px 34px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-weight: var(--ce-fw-head);
  background: linear-gradient(135deg, #ffd93d, #ff9f1c);
  color: #1a1a2e;
  box-shadow: 0 10px 28px rgba(255, 193, 7, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#calcelfWelcomeBtn:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 14px 36px rgba(255, 193, 7, 0.65);
}

/* 隐私弹窗 */
.privacy-guard-modal {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.86);
  backdrop-filter: blur(10px);
  padding: 18px;
}

.privacy-guard-box {
  width: min(94vw, 760px);
  max-height: 88vh;
  background: #fff;
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
  border: 3px solid #ffc107;
}

.privacy-guard-box h2 {
  margin: 0 0 14px;
  font-size: clamp(20px, 3vw, 30px);
  color: #1a1a2e;
}

.privacy-guard-body {
  flex: 1;
  overflow-y: auto;
  max-height: 46vh;
  padding: 14px 16px;
  background: #f7f8fc;
  border-radius: 14px;
  color: #333;
  line-height: 1.75;
  font-size: 15px;
  border: 1px solid #e6e8f0;
}

.privacy-guard-body h3 {
  margin: 14px 0 6px;
  color: #16213e;
  font-size: 17px;
}

.privacy-scroll-hint {
  margin: 10px 0 0;
  color: #e67e22;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.privacy-check-label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 14px 0;
  font-size: 15px;
  color: #333;
  line-height: 1.5;
}

.privacy-check-label input {
  margin-top: 4px;
  transform: scale(1.25);
}

.privacy-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.privacy-actions .btn {
  padding: 12px 22px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-weight: var(--ce-fw-head);
}

.privacy-actions .btn.primary {
  background: linear-gradient(135deg, #ffd93d, #ff9f1c);
  color: #1a1a2e;
}

.privacy-actions .btn.primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.privacy-actions .btn.ghost {
  background: #eef0f6;
  color: #333;
}

.privacy-wait {
  min-height: 22px;
  color: #888;
  font-size: 14px;
  text-align: right;
  margin-top: 8px;
}

/* 积分水壶 */
.water-can-btn {
  font-size: 32px;
  cursor: pointer;
  animation: waterFloat 1.5s infinite ease-in-out, waterGlow 1.5s infinite alternate;
  transition: transform 0.2s;
  filter: drop-shadow(0 0 8px rgba(52, 152, 219, 0.8));
  user-select: none;
}

.water-can-btn:hover {
  transform: scale(1.3) rotate(-10deg);
}

@keyframes waterFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes waterGlow {
  0% { filter: drop-shadow(0 0 5px rgba(52, 152, 219, 0.5)); }
  100% { filter: drop-shadow(0 0 15px rgba(52, 152, 219, 1)); }
}

/* 头像皇冠领巾 */
.avatar-wrap {
  position: relative;
  display: inline-block;
}

.avatar-crown {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  z-index: 2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.avatar-scarf {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  z-index: 2;
}

.crown-bronze { color: #cd7f32; }
.crown-silver { color: #c0c0c0; }
.crown-gold { color: #ffd700; }

.scarf-blue { color: #3498db; }
.scarf-green { color: #2ecc71; }
.scarf-purple { color: #9b59b6; }
.scarf-rainbow {
  color: #e74c3c;
  text-shadow: 0 0 5px #f1c40f, 0 0 10px #9b59b6;
}

/* 积分图标状态 */
.credit-meter-icon.rich { color: #2ecc71; }
.credit-meter-icon.good { color: #f1c40f; }
.credit-meter-icon.low { color: #e67e22; }
.credit-meter-icon.alert { color: #e74c3c; }


/* ═══════════════════════════════════════════════════════════════════
   D 方案：浇水动态动画（Credits 不足时的转化提醒）
   现状：水壶 SVG 里【已有】3 颗水珠（ce2-drop dp1/dp2/dp3）与壶内水（ce2-canwater），
        但没有任何动画 → 看起来是静态的 ✗（用户的原话）
   做法：纯 CSS 关键帧：① 水壶前倾 ② 三颗水珠错峰滴落 ③ 树叶被浇到后提亮 + 树苗轻弹
        ④ 2.5s 循环；⑤ 尊重 prefers-reduced-motion（不动的用户不该被动画打扰）
   ═══════════════════════════════════════════════════════════════════ */

@keyframes ceCanPour{
  0%,100%{transform:rotate(0deg) translateY(0)}
  18%{transform:rotate(-16deg) translateY(-2px)}   /* 前倾倒水 */
  46%{transform:rotate(-13deg) translateY(-1px)}
  70%{transform:rotate(-2deg)}
}
@keyframes ceDropFall{
  0%{transform:translateY(0) scale(.6);opacity:0}
  12%{opacity:1}
  55%{transform:translateY(26px) scale(1);opacity:1}
  80%{transform:translateY(44px) scale(.85);opacity:0}
  100%{transform:translateY(44px) scale(.85);opacity:0}
}
@keyframes ceLeafBoost{
  0%,100%{filter:brightness(1) saturate(1)}
  40%{filter:brightness(1.18) saturate(1.15)}
  75%{filter:brightness(1.06) saturate(1.06)}
}
@keyframes ceTrunkBounce{
  0%,100%{transform:rotate(0deg)}
  22%{transform:rotate(-1.6deg)}
  48%{transform:rotate(1.2deg)}
  70%{transform:rotate(-.6deg)}
}

/* 触发条件：Credits 低（tier-1 = 即将用完）。tier-2 也放，只是慢一点
   ★★ 真 bug 修复（本文件挂载时才暴露 ✓）：
      原来只写 .ce-watercan ✗ 而那个元素【早就改名成 .ce2-can 了】✗
      ⇒ 实测证明（真浏览器 ✓）：.ce-watercan 在 DOM 里匹配 0 个 ✓
        ⇒ 这条规则【从来没生效过】✗ 关键帧 ceCanPour 因此从来没用上 ✓
       ⇒ 补上 .ce2-can ✓（且 .ce2-can 一定带 .ce-credit-widget 祖先 ✓
          见 index.html #creditMeterWidget ✓ 所以特异性仍高于 themes.css:445 的
          .tier-2 .ce2-can ✓ 两条会【叠加】：ceCanFloat+ceCanPour 倾壶倒水 ✗
          ce2CanAlert 上下跳动 ✓ 正好是"跳着倒水"的意图 ✓✓）
       ★ 保留 .ce-watercan ✗ 不删 ✓（万一以后老元素回来 ✓ 且它是历史记录 ✓）
   ★★★ 必须包在 no-preference 里 ✗✗（否则自相矛盾 ✓）：
      全局 themes.css:149 用 *{animation:none!important} 关掉一切 ✓
      本文件里 .ce2-drop / .ce2-canwater 那几条【不带 !important】✗ 所以 reduce 下被关掉 ✓
      而这条为了压过 themes.css 里同名 animation 声明【必须带 !important】✓
      ⇒ 不带 !important 就和 themes.css:445 打平（后者先加载 ⇒ 输）✗ 动画又会死 ✓
      ⇒ 带 !important 则连 reduce 也压过去了 ✗✗（实测踩到：reduce 下 canAnims=["ceCanFloat","ceCanPour"] ✓
         而水珠 / 壶内水是 none ✓ ⇒ 变成"壶在倒水但没有水"✗ 自相矛盾 ✓）
      ⇒ 正解：把这条【只在 no-preference 下成立】✓ 两边的语义就都对了 ✓✓
      （与 themes.css:547/569 那两处点名关闭是同一套无障碍语义 ✓）*/
@media(prefers-reduced-motion:no-preference){
  .ce-credit-widget.tier-1 .ce-watercan,
  .ce-credit-widget.tier-2 .ce-watercan,
  .ce-credit-widget.tier-1 .ce2-can,
  .ce-credit-widget.tier-2 .ce2-can{animation:ceCanFloat 2.2s ease-in-out infinite, ceCanPour 2.5s ease-in-out infinite !important}
}

.ce-credit-widget.tier-1 .ce2-drop,
.ce-credit-widget.tier-2 .ce2-drop{animation:ceDropFall 2.5s ease-in infinite;transform-box:fill-box;transform-origin:50% 0}
.ce-credit-widget.tier-1 .ce2-drop.dp1,
.ce-credit-widget.tier-2 .ce2-drop.dp1{animation-delay:0s}
.ce-credit-widget.tier-1 .ce2-drop.dp2,
.ce-credit-widget.tier-2 .ce2-drop.dp2{animation-delay:.42s}
.ce-credit-widget.tier-1 .ce2-drop.dp3,
.ce-credit-widget.tier-2 .ce2-drop.dp3{animation-delay:.84s}

/* 被浇到：树叶提亮 + 树干轻弹（与既有的 tier 动画叠加，用 filter 不冲突 ✓） */
.ce-credit-widget.tier-1 .ce-tree .leaf,
.ce-credit-widget.tier-1 .ce-tree .leaf-a,
.ce-credit-widget.tier-1 .ce-tree .leaf-b,
.ce-credit-widget.tier-2 .ce-tree .leaf,
.ce-credit-widget.tier-2 .ce-tree .leaf-a,
.ce-credit-widget.tier-2 .ce-tree .leaf-b{animation:ceLeafBoost 2.5s ease-in-out infinite}
.ce-credit-widget.tier-1 .ce-tree .ce-trunk{animation:ceTrunkBounce 2.5s ease-in-out infinite}

/* 壶内水：倒下时液面轻微倾斜（细节但不喧宾）
   注：ce2-canwater 是 <g>，用 transform 而非 svg 的 d 属性 */
.ce-credit-widget.tier-1 .ce2-canwater,
.ce-credit-widget.tier-2 .ce2-canwater{animation:ceWaterSlosh 2.5s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes ceWaterSlosh{
  0%,100%{transform:rotate(0deg)}
  25%{transform:rotate(-7deg)}
  60%{transform:rotate(4deg)}
}

/* 无障碍：不动的用户不该被动画打扰（与既有规则合并）
   ★ .ce2-can 是本文件新接管浇水的【活元素】✗ 必须一并关掉 ✓
     （否则"减少动效"用户的水壶还在倾壶倒水 ✓ 那就自相矛盾了 ✓）
     注：全局 themes.css:149 的 *{animation:none!important} 已经兜住 ✓
     这条是【点名关闭】✗ 与鸟那条的做法一致 ✓ 防的是"将来全局规则被收窄"✓ */
@media(prefers-reduced-motion:reduce){
  .ce-watercan,.ce2-can,.ce2-drop,.ce2-canwater,.ce-tree .leaf,.ce-tree .leaf-a,.ce-tree .leaf-b,.ce-tree .ce-trunk{animation:none!important}
}

/* ★★ 第 59 轮：水壶边那个【跳动感叹号】的第二层 reduced-motion 点名 ✗✗
   （★ 与 themes.css 末尾那块同一纪律 ✓ 也与本文件 364-366 行那块同一做法 ✓）
   ── 为什么这里也要有一份 ✗✗（不是为了重复 ✗ 是为了那条断言 ✓）──
     tests/email-and-watering.js:184-195 那条断言的取值是
       const css = read('themes-ceremony.css')      ← 第 69 行 ✓
       const blocks = css.match(...reduce...); const joined = blocks.join('\n')
     ⇒ 它眼里的 joined 只由【本文件】自己的 reduce 块拼成 ✗ 不含 themes.css / components.css ✓
     ⇒ 本文件里没有 .ce2-warn ⇒ 那条点名断言必红 ✓
       （实测：本文件零个 .ce2-warn / themes.css 与 components.css 各有一个 ✓）
   ── 三个动效元素在本文件里的点名情况（第 59 轮实测 ✓）──
     .ce2-drop ✓ .ce2-canwater ✓ .ce2-can ✓（都在上面那个块里 ✓）
     .ce2-warn ✗ 第 59 轮【新增】⇒ 按该文件既有规矩补进来 ✓
   ★ 本条对浏览器行为【零新增影响】✗：
     上面那个块已经写了 animation:none!important（同一媒体查询 ✓ 特异性同为 (0,1,0) ✓）
     且全局 themes.css:167 的 *{animation:none!important} 本来就兜住 ✓
     ⇒ 本块是"点名"✗ 不是"新增效果"✓ 与两个块的既有注释口径一致 ✓
   ★ 修改此处务必同步 public/themes-ceremony.css ✓ */
@media(prefers-reduced-motion:reduce){
  .ce2-warn{animation:none!important;transform:none!important;opacity:1!important;filter:none!important}
}