/* ---------------- anim.css：结算动效 + 静音开关 ----------------
 * 只加不改：style.css 是另一路在维护的基线，这里一条它的规则都不覆盖，
 * 只给它已经排好的结算元素补上动效。加载顺序排在它后面。
 *
 * 所有动效都尊重 prefers-reduced-motion: reduce —— 那一档退化成直接显示，
 * 内容一个字不少，只是不做位移、不做缩放、数字不滚动。                    */

/* ================= 静音开关 =================
 * 本任务唯一新增的控件。放在视口右下角，避开弹窗顶部的 ♡ 装饰与两侧面板；
 * z-index 高于 .modal(50)，结算和失败弹窗弹出来时也按得到。              */
#btnMute {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--coral-dark);
  cursor: pointer;
  background: rgba(255, 251, 243, .95);
  box-shadow: 0 3px 10px rgba(142, 91, 70, .2);
  transition: transform .12s ease, color .15s ease, border-color .15s ease;
}
#btnMute:hover { border-color: var(--coral); transform: translateY(-1px); }
#btnMute:active { transform: translateY(1px); }
#btnMute svg { width: 19px; height: 19px; }
#btnMute .m-wave { transition: opacity .15s ease; }
#btnMute .m-slash { opacity: 0; transition: opacity .15s ease; }
#btnMute.muted { color: var(--muted); }
#btnMute.muted .m-wave { opacity: 0; }
#btnMute.muted .m-slash { opacity: 1; }

/* ================= ① 结算弹窗入场 =================
 * .settle-in 由 ui.js 在摘掉 .hidden 之后打上（先移除再回流再加，能重播）。*/
#overlaySettle.settle-in { animation: settleFade .3s ease both; }
#overlaySettle.settle-in > .modal-box.settle {
  animation: settleRise .44s cubic-bezier(.22, .86, .28, 1.02) both;
}
@keyframes settleFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes settleRise {
  from { opacity: 0; transform: translateY(24px) scale(.962); }
  to { opacity: 1; transform: none; }
}

/* 印章跟着落下来，比弹窗本体晚一拍。旋转角度沿用 style.css 的 2deg。 */
#overlaySettle.settle-in .score-seal {
  animation: sealStamp .4s cubic-bezier(.2, 1.2, .35, 1) .26s both;
}
@keyframes sealStamp {
  from { opacity: 0; transform: rotate(2deg) scale(1.5); }
  to { opacity: 1; transform: rotate(2deg) scale(1); }
}

/* ================= ② ④ 数字滚动 =================
 * 滚动本身在 ui.js 里用 requestAnimationFrame 算文本，这里只保证位宽不抖。 */
.score-seal em, .modal-box.settle .settle-total { font-variant-numeric: tabular-nums; }

/* ================= ③ 十根指甲 2×5 网格逐个亮起 =================
 * 网格本体（含四档状态色）是 style.css 排的，这里只让它们一个一个亮。
 * --i 由 ui.js 按下标写进 style 属性。                                  */
#overlaySettle.settle-in .nail-result-grid > span {
  animation: sgPop .34s cubic-bezier(.2, 1.25, .4, 1) both;
  animation-delay: calc(.34s + var(--i, 0) * .055s);
}
@keyframes sgPop {
  from { opacity: 0; transform: translateY(8px) scale(.7); }
  62% { opacity: 1; transform: translateY(0) scale(1.09); }
  to { opacity: 1; transform: none; }
}

/* ================= ⑤ 亲密度心形逐个点亮 =================
 * ui.js 把那串 ♥♡ 拆成一个个 <i>，实心的才点亮，空心的原样待着。 */
.heart-row i { display: inline-block; font-style: normal; }
#overlaySettle.settle-in .heart-row i.on {
  animation: hbPop .4s cubic-bezier(.2, 1.35, .4, 1) both;
  animation-delay: calc(.96s + var(--i, 0) * .085s);
}
@keyframes hbPop {
  from { opacity: .22; transform: scale(.55); }
  55% { opacity: 1; transform: scale(1.32); }
  to { opacity: 1; transform: scale(1); }
}

/* ================= ⑥ 高分档（≥80）的额外光效 =================
 * 弹窗外圈一层蜜色光晕 + 价值那条的柔光，各脉两次就收。低分档不加。 */
#overlaySettle.settle-in > .modal-box.settle.settle-hi {
  animation:
    settleRise .44s cubic-bezier(.22, .86, .28, 1.02) both,
    hiHalo 2.6s ease-in-out .7s 2 both;
}
@keyframes hiHalo {
  0%, 100% { box-shadow: 0 20px 50px rgba(75, 55, 50, .28), inset 0 0 0 6px #fff5e8; }
  50% { box-shadow: 0 20px 50px rgba(75, 55, 50, .28), inset 0 0 0 6px #fff5e8, 0 0 32px 5px rgba(242, 180, 61, .45); }
}
#overlaySettle.settle-in > .modal-box.settle.settle-hi .settle-total {
  animation: hiText 2.4s ease-in-out .9s 2 both;
}
@keyframes hiText {
  0%, 100% { text-shadow: none; }
  50% { text-shadow: 0 0 13px rgba(242, 180, 61, .6), 0 0 3px rgba(255, 255, 255, .75); }
}

/* ================= 尊重 prefers-reduced-motion =================
 * 位移、缩放、光晕、逐个亮起全部退化成直接显示；数字滚动那一半在
 * ui.js 里按同一条查询短路，直接留最终值。内容一项不少。            */
@media (prefers-reduced-motion: reduce) {
  #overlaySettle.settle-in,
  #overlaySettle.settle-in > .modal-box.settle,
  #overlaySettle.settle-in > .modal-box.settle.settle-hi,
  #overlaySettle.settle-in > .modal-box.settle.settle-hi .settle-total,
  #overlaySettle.settle-in .nail-result-grid > span,
  #overlaySettle.settle-in .heart-row i.on {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    text-shadow: none !important;
  }
  /* 印章那条要留住 style.css 给的 2deg，不能一并 transform: none */
  #overlaySettle.settle-in .score-seal {
    animation: none !important;
    opacity: 1 !important;
    transform: rotate(2deg) !important;
  }
  #btnMute { transition: none; }
  #btnMute:hover, #btnMute:active { transform: none; }
}