/* celebrate.css · 答对庆祝的视觉层(配合 celebrate.js)
   只定义"新增"的东西;.fb 反馈条本体仍在各站 styles.css(那里已按语义配好 success/accent2)。
   依赖变量:--success --celebrate --accent --accent2 --card --rule --onCelebrate */

/* ---------- 纸屑 ---------- */
.cb-confetti{position:fixed;inset:0;pointer-events:none;z-index:9999}
.cb-confetti i{position:absolute;width:8px;height:8px;border-radius:2px;opacity:0;
  animation:cb-pop .95s cubic-bezier(.2,.7,.3,1) forwards}
.cb-confetti i:nth-child(3n){border-radius:50%;width:7px;height:7px}
.cb-confetti i:nth-child(4n){width:5px;height:12px}
@keyframes cb-pop{
  0%{opacity:1;transform:translate(0,0) rotate(0) scale(.5)}
  70%{opacity:1}
  100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 80px)) rotate(var(--rot)) scale(1)}}

/* ---------- 答错:轻微摇动(不惩罚) ---------- */
.cb-shake{animation:cb-shake .4s ease}
@keyframes cb-shake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}
  60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}

/* ---------- 吉祥物 ---------- */
.cb-mascot{width:44px;height:48px;flex:none;display:block}
.cb-mascot svg{width:100%;height:100%;overflow:visible;display:block}
.cb-mascot.big{width:132px;height:144px}
.cb-mascot.happy{animation:cb-hop .62s cubic-bezier(.3,1.3,.5,1) both}
@keyframes cb-hop{0%{transform:scaleY(.86) translateY(3px)}
  45%{transform:translateY(-15px) rotate(7deg) scale(1.06)}
  70%{transform:translateY(2px) scale(.97)}100%{transform:none}}
.cb-mascot.sad{animation:cb-wob .6s ease both}
@keyframes cb-wob{25%{transform:rotate(-7deg) scaleY(.93)}
  60%{transform:rotate(6deg) scaleY(.96)}100%{transform:none}}
/* 待机:极轻的呼吸,不抢注意力 */
.cb-mascot.idle{animation:cb-breathe 3.4s ease-in-out infinite}
@keyframes cb-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.015)}}

/* ---------- 连击徽章 ---------- */
.cb-streak{margin-left:auto;font-size:13px;font-weight:800;letter-spacing:.04em;
  background:var(--celebrate);color:var(--onCelebrate,#fff);padding:4px 10px;border-radius:999px;
  animation:cb-badge .4s cubic-bezier(.3,1.5,.5,1) both;flex:none}
@keyframes cb-badge{0%{transform:scale(0) rotate(-12deg)}100%{transform:scale(1) rotate(0)}}

/* ---------- 答对 quiet 档:✓ 与升箱阶段标签(P1 动效减法) ---------- */
.cb-tick{font-weight:800;color:var(--success);font-size:17px;line-height:1;flex:none}
.cb-stage{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  background:var(--celebrateSoft);color:var(--celebrate);border-radius:999px;padding:3px 10px;
  font-size:12.5px;font-weight:700;animation:cb-badge .4s cubic-bezier(.3,1.5,.5,1) both}
.cb-stage b{font-family:var(--hanzi,serif);font-size:15px;font-weight:700}
.cb-stage i{font-style:normal;font-weight:600;opacity:.8}
/* 反馈条里有阶段标签时允许折行:窄屏上标签自成一行靠右,不撑破圆角卡(不支持 :has 的老浏览器 = 现状不折行) */
.fb:has(.cb-stage){flex-wrap:wrap;row-gap:6px}
/* 连击徽章和阶段标签同在时,徽章贴着文案,右侧让给阶段标签(否则两个 margin-left:auto 各抢一半空位) */
.cb-streak:has(~ .cb-stage){margin-left:0}
/* 数字滚动:等宽数字,滚动时宽度不抖 */
.cb-count{font-variant-numeric:tabular-nums}

/* ---------- 静音开关 ---------- */
.cb-mute{position:fixed;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;
  width:36px;height:36px;border-radius:50%;border:1px solid var(--rule);background:var(--card);
  color:var(--mute);font-size:15px;line-height:34px;text-align:center;cursor:pointer;
  opacity:.5;transition:opacity .2s;padding:0}
.cb-mute:hover,.cb-mute:focus-visible{opacity:1}

/* ---------- 尊重减弱动效 ---------- */
@media (prefers-reduced-motion:reduce){
  .cb-confetti{display:none}
  .cb-mascot,.cb-mascot.happy,.cb-mascot.sad,.cb-mascot.idle,.cb-streak,.cb-stage,.cb-shake{animation:none!important}
  /* 树的长出/闪光(tree.js 自己也关了,这里双保险);推镜动画类名是动态的,由 tree.js 内部关 */
  .tr-fresh,.tr-glint{animation:none!important}
}