/*
 * URSPIRE · 音乐回忆主题特效层样式（主题库版 · 收进「正在播放」面板内部）
 * 配合 assets/js/music-memory-themes.js。所有特效注入 .np-sheet：
 *   背景/落叶/星火 在内容之下；HUD/边框/任务/成就/结算/尾声/闪光 在内容之上。
 * 仅在面板打开 + 歌曲匹配主题 + 后台与用户均开启时可见，不影响整页。
 */

:root {
  --mt-blue: #1769e0;
  --mt-cyan: #00a7c8;
  --mt-warm: #f6b44b;
  --mt-orange: #d98a3a;
  --mt-night: #202631;
  --mt-ink: #171a1f;
}

/* ============ 自定义背景图（最底层，双层交叉淡入 + 连续推拉）============ */
.np-sheet .mt-bgimg { position: absolute; inset: 0; overflow: hidden; }
/* 两张背景层叠放，靠各自 opacity 交叉淡入淡出；过渡时长由 --bgfade 控制 */
.np-sheet .mt-bgimg-cell {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity var(--bgfade, 1.6s) cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}
.np-sheet .mt-bgimg-cell.is-on { opacity: 1; }
.np-sheet .mt-bgimg-cell img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(var(--bgscale, 1));
  /* !important：盖过站点对某些图片(如 Logo)的全局 invert/滤镜，确保只应用主题设定的模糊 */
  filter: blur(var(--bgblur, 0px)) !important;
  transition: filter 0.9s ease;
  will-change: transform;
}
/* 每层独立做连续缓慢推拉；交叉淡入时两层都在动 → 缩放不中断、过渡顺滑 */
.np-sheet .mt-bgimg-cell.is-zoom img {
  animation: mt-kenburns var(--bgdur, 24s) cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
}
@keyframes mt-kenburns {
  from { transform: scale(var(--bgscale, 1)); }
  to { transform: scale(calc(var(--bgscale, 1) * 1.12)); }
}

/* ============ 背景情绪层（内容之下）============ */
.np-sheet .mt-bg {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, #16202f 0%, #0e141d 100%);
  transition: opacity 0.7s ease, background 1.4s ease;
  /* 固定为独立合成层，背景动画(ken-burns/落叶)不再触发前景内容重绘，消除 Chromium 抽搐 */
  transform: translateZ(0);
}
.np-sheet[data-memory-active="1"] .mt-bg { opacity: 1; }
.np-sheet .mt-bg > span { position: absolute; inset: 0; pointer-events: none; }
.np-sheet .mt-bg-tint {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(23, 105, 224, 0.30), transparent 60%),
    radial-gradient(120% 90% at 50% 110%, rgba(0, 167, 200, 0.24), transparent 60%);
  transition: background 1.6s ease, filter 0.8s ease;
}
.np-sheet .mt-bg-vignette { box-shadow: inset 0 0 260px rgba(8, 12, 20, 0.55); transition: box-shadow 1.6s ease; }
.np-sheet .mt-bg-grain {
  opacity: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='80' height='80' filter='url(%23n)' opacity='0.5'/></svg>");
  transition: opacity 1.6s ease;
}

.np-sheet[data-memory-phase="phase-dawn"] .mt-bg-tint {
  background: radial-gradient(120% 80% at 50% -10%, rgba(23, 105, 224, 0.34), transparent 60%),
              radial-gradient(120% 90% at 50% 110%, rgba(0, 167, 200, 0.26), transparent 60%);
}
.np-sheet[data-memory-phase="phase-noon"] .mt-bg-tint {
  background: radial-gradient(130% 90% at 50% -10%, rgba(246, 180, 75, 0.40), transparent 62%),
              radial-gradient(120% 90% at 50% 110%, rgba(23, 105, 224, 0.24), transparent 60%);
}
.np-sheet[data-memory-phase="phase-dusk"] .mt-bg-tint {
  background: radial-gradient(130% 95% at 50% -5%, rgba(246, 180, 75, 0.44), transparent 60%),
              radial-gradient(120% 95% at 50% 110%, rgba(217, 138, 58, 0.36), transparent 60%);
}
.np-sheet[data-memory-phase="phase-night"] .mt-bg { background: linear-gradient(180deg, #1a1410 0%, #0c0f15 100%); }
.np-sheet[data-memory-phase="phase-night"] .mt-bg-tint {
  background: radial-gradient(130% 100% at 50% 0%, rgba(217, 138, 58, 0.42), transparent 58%),
              linear-gradient(180deg, rgba(32, 38, 49, 0.45), rgba(32, 38, 49, 0.16));
}
.np-sheet[data-memory-phase="phase-night"] .mt-bg-vignette { box-shadow: inset 0 0 320px rgba(8, 12, 20, 0.7); }
.np-sheet[data-memory-phase="phase-night"] .mt-bg-grain { opacity: 0.22; }
.np-sheet[data-memory-phase="phase-return"] .mt-bg-tint {
  background: radial-gradient(120% 90% at 50% -10%, rgba(246, 180, 75, 0.26), transparent 62%),
              radial-gradient(120% 95% at 50% 110%, rgba(0, 167, 200, 0.22), transparent 60%);
}
/* 副歌：背景更亮更饱和 */
.np-sheet[data-memory-chorus="1"] .mt-bg-tint { filter: brightness(1.28) saturate(1.25); }

.np-sheet[data-memory-active="1"] .np-bg { opacity: 0.16; transition: opacity 0.7s ease; }

/* ============ 落叶层 ============ */
.np-sheet .mt-leaves { position: absolute; inset: 0; overflow: hidden; opacity: 1; transition: opacity 1.4s ease; }
.np-sheet .mt-leaf {
  position: absolute; top: -8%;
  width: var(--size, 18px); height: var(--size, 18px);
  background: radial-gradient(circle at 35% 30%, var(--mt-warm), var(--mt-orange) 70%);
  border-radius: 0 60% 0 60%; opacity: 0.85;
  animation: mt-fall var(--fall, 12s) linear var(--delay, 0s) infinite;
}
@keyframes mt-fall {
  0%   { transform: translate3d(0, -10%, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: 0.85; }
  50%  { transform: translate3d(var(--sway, 30px), 55vh, 0) rotate(calc(var(--spin, 240deg) * 0.5)); }
  92%  { opacity: 0.85; }
  100% { transform: translate3d(calc(var(--sway, 30px) * -0.6), 110vh, 0) rotate(var(--spin, 240deg)); opacity: 0; }
}

/* ============ 前景特效层（内容之上，不拦截点击）============ */
.np-sheet .mt-fx { position: absolute; inset: 0; z-index: 50; pointer-events: none; opacity: 0; transition: opacity 0.5s ease; }
.np-sheet[data-memory-active="1"] .mt-fx { opacity: 1; }

/* —— 星火（副歌 / 星光主题）—— */
.np-sheet .mt-sparkles { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease; }
.np-sheet[data-memory-chorus="1"] .mt-sparkles,
.np-sheet[data-memory-theme="starlight"][data-memory-active="1"] .mt-sparkles { opacity: 1; }
.np-sheet .mt-spark {
  position: absolute;
  width: var(--ss, 3px); height: var(--ss, 3px);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 1px rgba(255, 240, 200, 0.9);
  opacity: 0;
  animation: mt-twinkle var(--tw, 2.4s) ease-in-out var(--td, 0s) infinite;
}
@keyframes mt-twinkle { 0%,100% { opacity: 0; transform: scale(0.5); } 50% { opacity: 1; transform: scale(1); } }

/* —— 像素边框 + 扫描线（游戏屏感）—— */
.np-sheet .mt-frame { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; }
.np-sheet[data-memory-frame="1"][data-memory-active="1"] .mt-frame { opacity: 1; }
.np-sheet .mt-corner {
  position: absolute; width: 26px; height: 26px;
  border: 3px solid rgba(246, 180, 75, 0.7);
  filter: drop-shadow(0 0 6px rgba(246, 180, 75, 0.45));
}
.np-sheet .mt-corner-tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.np-sheet .mt-corner-tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.np-sheet .mt-corner-bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.np-sheet .mt-corner-br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }
.np-sheet .mt-scan {
  position: absolute; inset: 0; opacity: 0.05;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,0.9) 0 1px, transparent 1px 4px);
}

/* —— 副歌闪光 —— */
.np-sheet .mt-flash {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(circle at 50% 45%, rgba(255, 240, 205, 0.9), rgba(246, 180, 75, 0.35) 45%, transparent 72%);
}
.np-sheet .mt-flash.is-flash { animation: mt-flash 0.6s ease-out; }
@keyframes mt-flash { 0% { opacity: 0.9; } 100% { opacity: 0; } }

/* ============ 常驻 HUD（副本进度 + 章节 + 玩家状态）============ */
.np-sheet .mt-hud {
  position: absolute;
  top: calc(max(8px, env(safe-area-inset-top)) + 42px);
  left: clamp(12px, 4vw, 28px);
  right: clamp(12px, 4vw, 28px);
  display: flex; flex-direction: column; gap: 7px;
  opacity: 0; transition: opacity 0.5s ease;
}
.np-sheet[data-memory-hud="1"][data-memory-active="1"] .mt-hud { opacity: 1; }
/* 桌面双列布局：音量条在右上角，HUD 收到左半区避免重叠；手机端保持满宽 */
@media (min-width: 900px) {
  .np-sheet .mt-hud { right: auto; width: min(520px, 48vw); }
}
/* 手机端：歌词/队列视图顶部有专属歌曲头（.np-mhead），HUD 只在封面视图出现，避免重叠 */
@media (max-width: 899px) {
  .np-sheet[data-np-view="lyrics"] .mt-hud,
  .np-sheet[data-np-view="queue"] .mt-hud { opacity: 0 !important; }
  .np-sheet[data-np-view="lyrics"] .mt-toggle,
  .np-sheet[data-np-view="queue"] .mt-toggle { opacity: 0.5; }
}
.np-sheet .mt-hud-top { display: flex; align-items: center; gap: 10px; }
.np-sheet .mt-hud-chapter {
  flex: none; font-size: 12px; font-weight: 800; letter-spacing: 0.04em;
  color: var(--mt-warm); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}
.np-sheet .mt-hud-progress {
  flex: 1 1 auto; height: 7px; border-radius: 5px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
.np-sheet .mt-hud-progress > i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--mt-cyan), var(--mt-warm));
  box-shadow: 0 0 10px rgba(246, 180, 75, 0.6);
  transition: width 0.3s linear;
}
.np-sheet .mt-hud-pct { flex: none; font-size: 11px; font-weight: 700; color: #fff; opacity: 0.85; min-width: 30px; text-align: right; }
.np-sheet .mt-hud-stats { display: flex; align-items: center; gap: 8px; }
.np-sheet .mt-hud-tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
  color: #eaf2ff; padding: 2px 8px; border-radius: 6px;
  background: rgba(13, 20, 32, 0.55); border: 1px solid rgba(255, 255, 255, 0.14);
}
.np-sheet .mt-hud-heat {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; color: var(--mt-warm);
}
.np-sheet .mt-hud-heat > b { display: block; width: 54px; height: 6px; border-radius: 4px; background: rgba(255,255,255,0.16); overflow: hidden; }
.np-sheet .mt-hud-heat > b > i {
  display: block; height: 100%; width: 38%;
  background: linear-gradient(90deg, var(--mt-orange), var(--mt-warm));
  transition: width 0.6s ease;
}

/* —— 右上角任务 / 道具堆叠（下移避开 HUD）—— */
.np-sheet .mt-quest-stack {
  position: absolute;
  top: calc(max(8px, env(safe-area-inset-top)) + 92px);
  right: clamp(12px, 3vw, 28px);
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  max-width: min(80%, 320px);
}
.np-sheet[data-memory-hud="0"] .mt-quest-stack { top: clamp(54px, 8vh, 96px); }
.np-sheet .mt-quest {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px 9px 11px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(23, 105, 224, 0.18);
  box-shadow: 0 8px 24px rgba(8, 12, 20, 0.28);
  color: var(--mt-ink); transform: translateX(28px); opacity: 0;
  transition: transform 0.42s cubic-bezier(0.18, 0.9, 0.28, 1), opacity 0.42s ease;
}
.np-sheet .mt-quest.is-in { transform: translateX(0); opacity: 1; }
.np-sheet .mt-quest.is-out { transform: translateX(24px); opacity: 0; }
.np-sheet .mt-quest-icon { flex: none; width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(135deg, var(--mt-blue), var(--mt-cyan)); position: relative; }
.np-sheet .mt-quest-icon::after { content: ""; position: absolute; inset: 6px; border-radius: 3px; background: #fff; clip-path: polygon(14% 48%, 40% 74%, 86% 22%, 78% 14%, 40% 56%, 22% 38%); }
.np-sheet .mt-quest--item .mt-quest-icon { background: linear-gradient(135deg, var(--mt-warm), var(--mt-orange)); }
.np-sheet .mt-quest--item .mt-quest-icon::after { inset: 5px; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.np-sheet .mt-quest-body { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.np-sheet .mt-quest-tag { font-size: 11px; letter-spacing: 0.06em; color: var(--mt-blue); font-weight: 700; }
.np-sheet .mt-quest--item .mt-quest-tag { color: var(--mt-orange); }
.np-sheet .mt-quest-text { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 加载条 */
.np-sheet .mt-loading {
  display: flex; flex-direction: column; gap: 6px; padding: 12px 16px;
  border-radius: 12px; background: rgba(13, 20, 32, 0.92); color: #eaf2ff;
  box-shadow: 0 10px 28px rgba(8, 12, 20, 0.4);
  min-width: 210px; transform: translateX(28px); opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
}
.np-sheet .mt-loading.is-in { transform: translateX(0); opacity: 1; }
.np-sheet .mt-loading.is-out { opacity: 0; }
.np-sheet .mt-loading-title { font-size: 12.5px; letter-spacing: 0.12em; color: var(--mt-cyan); font-weight: 700; }
.np-sheet .mt-loading-bar { display: block; height: 6px; border-radius: 4px; background: rgba(255,255,255,0.12); overflow: hidden; }
.np-sheet .mt-loading-bar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--mt-cyan), var(--mt-warm)); animation: mt-load 4.4s cubic-bezier(0.4, 0.1, 0.2, 1) forwards; }
@keyframes mt-load { to { width: 100%; } }
.np-sheet .mt-loading-line { font-size: 11.5px; opacity: 0.78; }

/* ============ 居中弹出 ============ */
.np-sheet .mt-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; }
.np-sheet .mt-pop {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  transform: scale(0.86) translateY(8px); opacity: 0;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
}
.np-sheet .mt-pop.is-in { transform: scale(1) translateY(0); opacity: 1; }
.np-sheet .mt-pop.is-out { transform: scale(1.04); opacity: 0; }

/* 成就（更炫：光环脉冲 + 徽章扫光 + COMBO）*/
.np-sheet .mt-pop--achieve { position: relative; }
.np-sheet .mt-achieve-glow {
  position: absolute; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(246, 180, 75, 0.55), transparent 64%);
  filter: blur(8px); animation: mt-pulse 2.2s ease-in-out infinite;
}
@keyframes mt-pulse { 0%,100% { transform: scale(0.9); opacity: 0.65; } 50% { transform: scale(1.12); opacity: 1; } }
.np-sheet .mt-achieve-combo {
  position: absolute; top: -34px;
  font-size: 22px; font-weight: 900; font-style: italic; letter-spacing: 0.06em;
  color: #fff; text-shadow: 0 0 16px rgba(246, 180, 75, 0.9);
  animation: mt-combo 0.6s cubic-bezier(0.18, 1.5, 0.4, 1) both;
}
@keyframes mt-combo { from { transform: scale(0.3) rotate(-12deg); opacity: 0; } to { transform: scale(1) rotate(-6deg); opacity: 1; } }
.np-sheet .mt-achieve-badge {
  position: relative; width: 70px; height: 70px; margin-bottom: 12px;
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(135deg, var(--mt-warm), var(--mt-orange));
  box-shadow: 0 10px 30px rgba(217, 138, 58, 0.55);
  animation: mt-badge-pop 0.6s cubic-bezier(0.18, 1.4, 0.4, 1) both;
}
@keyframes mt-badge-pop { from { transform: scale(0.4) rotate(-18deg); } to { transform: scale(1) rotate(0); } }
.np-sheet .mt-achieve-badge::after {
  content: ""; position: absolute; inset: 20px; background: #fff;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.np-sheet .mt-achieve-shine {
  position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.85), transparent);
  animation: mt-shine 1.4s ease 0.25s 2;
}
@keyframes mt-shine { from { left: -120%; } to { left: 160%; } }
.np-sheet .mt-achieve-kicker { position: relative; font-size: 12px; letter-spacing: 0.22em; font-weight: 700; color: var(--mt-warm); }
.np-sheet .mt-achieve-name { position: relative; font-size: clamp(22px, 5vw, 34px); font-weight: 800; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45); }

.np-sheet .mt-finale-text { font-size: clamp(26px, 7vw, 52px); font-weight: 800; letter-spacing: 0.04em; color: #fff; text-shadow: 0 4px 30px rgba(8, 12, 20, 0.55), 0 0 28px rgba(246, 180, 75, 0.45); }
.np-sheet .mt-finale-text.is-strong { color: var(--mt-warm); }

.np-sheet .mt-pop--settle .mt-settle-title { display: block; font-size: 13px; letter-spacing: 0.3em; font-weight: 700; color: var(--mt-cyan); margin-bottom: 14px; }
.np-sheet .mt-settle-rows {
  display: grid; gap: 9px 24px; padding: 22px 30px; border-radius: 16px;
  background: rgba(13, 20, 32, 0.93); box-shadow: 0 18px 50px rgba(8, 12, 20, 0.5);
  border: 1px solid rgba(246, 180, 75, 0.25);
  min-width: min(82%, 280px);
}
.np-sheet .mt-settle-row { display: flex; justify-content: space-between; gap: 28px; color: #dce7f7; font-size: 15px; }
.np-sheet .mt-settle-row em { font-style: normal; opacity: 0.7; }
.np-sheet .mt-settle-row b { font-weight: 700; color: var(--mt-warm); }

/* ============ 尾声定格 ============ */
.np-sheet .mt-ending {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  /* 中心也保留较高暗度，盖住背后歌词/图像，避免文字叠文字 */
  background: radial-gradient(135% 135% at 50% 45%, rgba(8, 11, 17, 0.7), rgba(8, 11, 17, 0.92));
  opacity: 0; transition: opacity 1.4s ease;
}
.np-sheet .mt-ending.is-on { opacity: 1; }
/* 尾声定格时淡出实时歌词与队列，让结尾文案独占画面 */
.np-sheet[data-memory-ending="1"] .np-lyrics,
.np-sheet[data-memory-ending="1"] .np-view-queue,
.np-sheet[data-memory-ending="1"] .np-mhead { opacity: 0; pointer-events: none; transition: opacity 1s ease; }
.np-sheet .mt-ending-inner { text-align: center; padding: 24px; max-width: 90%; }
.np-sheet .mt-ending-mark { display: inline-block; font-size: 11px; letter-spacing: 0.3em; color: var(--mt-cyan); margin-bottom: 22px; opacity: 0; animation: mt-ending-in 1s ease forwards; }
.np-sheet .mt-ending-line {
  display: block; font-size: clamp(16px, 4.4vw, 24px); font-weight: 600; line-height: 1.9;
  color: #f2f6ff; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55);
  opacity: 0; animation: mt-ending-in 1.1s ease forwards; animation-delay: calc(0.5s + var(--i) * 0.9s);
}
@keyframes mt-ending-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ============ 面板内主题开关（图标按钮，无文字）============ */
.np-sheet .mt-toggle {
  position: absolute; z-index: 60;
  top: max(8px, env(safe-area-inset-top)); left: clamp(12px, 4vw, 28px);
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 50%;
  background: rgba(40, 46, 58, 0.55); color: #fff; cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.np-sheet .mt-toggle:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.24); }
.np-sheet .mt-toggle-ico { width: 20px; height: 20px; color: rgba(255, 255, 255, 0.72); transition: color 0.3s ease, transform 0.3s ease; }
.np-sheet .mt-toggle.is-on .mt-toggle-ico { color: var(--mt-warm); }
.np-sheet .mt-toggle.is-on { border-color: rgba(246, 180, 75, 0.55); background: rgba(246, 180, 75, 0.16); }
/* 桌面端关闭按钮在左上角(left:22)，开关挪到它右侧避免遮挡 */
@media (min-width: 900px) {
  .np-sheet .mt-toggle { top: 18px; left: 68px; }
}

/* ============ 极光光束（副歌）============ */
.np-sheet .mt-aurora {
  position: absolute; inset: -20%; opacity: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(0, 167, 200, 0.22) 46%, rgba(246, 180, 75, 0.26) 56%, transparent 70%);
  transform: translateX(-30%) rotate(2deg); transition: opacity 1s ease;
}
.np-sheet[data-memory-chorus="1"] .mt-aurora { opacity: 1; animation: mt-aurora 6s ease-in-out infinite; }
@keyframes mt-aurora { 0%,100% { transform: translateX(-28%) rotate(2deg); } 50% { transform: translateX(28%) rotate(-2deg); } }

/* ============ 记忆碎片光斑（bokeh）============ */
.np-sheet .mt-bokeh { position: absolute; inset: 0; overflow: hidden; opacity: 0.45; transition: opacity 1s ease; }
.np-sheet[data-memory-chorus="1"] .mt-bokeh { opacity: 1; }
.np-sheet .mt-orb {
  position: absolute; width: var(--os, 60px); height: var(--os, 60px); border-radius: 50%;
  background: radial-gradient(circle, rgba(246, 180, 75, 0.34), transparent 70%);
  filter: blur(4px); opacity: 0;
  animation: mt-orb var(--orise, 18s) ease-in-out var(--odelay, 0s) infinite;
}
@keyframes mt-orb {
  0% { transform: translateY(20px) translateX(0) scale(0.8); opacity: 0; }
  30% { opacity: 0.8; } 70% { opacity: 0.8; }
  100% { transform: translateY(-62vh) translateX(var(--odrift, 0)) scale(1.1); opacity: 0; }
}

/* ============ 流星（夜 / 尾声）============ */
.np-sheet .mt-stars { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.np-sheet[data-memory-phase="phase-night"] .mt-stars,
.np-sheet[data-memory-phase="phase-return"] .mt-stars { opacity: 1; }
.np-sheet .mt-shoot {
  position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.85); opacity: 0;
  animation: mt-shoot var(--shd, 5s) ease-in var(--shdelay, 0s) infinite;
}
.np-sheet .mt-shoot::after {
  content: ""; position: absolute; right: 2px; top: 50%; width: 64px; height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7)); transform: translateY(-50%);
}
@keyframes mt-shoot {
  0% { transform: translate(0, 0) rotate(20deg); opacity: 0; }
  6% { opacity: 1; }
  26% { transform: translate(-200px, 84px) rotate(20deg); opacity: 0; }
  100% { opacity: 0; }
}

/* ============ 烟花爆裂（成就 / 强 finale）============ */
.np-sheet .mt-fireworks { position: absolute; inset: 0; }
.np-sheet .mt-burst { position: absolute; top: 42%; left: 50%; }
.np-sheet .mt-burst-p {
  position: absolute; left: 0; top: 0; width: 7px; height: 7px; border-radius: 50%;
  background: var(--bc, #f6b44b); box-shadow: 0 0 9px 1px var(--bc, #f6b44b);
  animation: mt-burst var(--bd, 1s) cubic-bezier(0.15, 0.6, 0.3, 1) forwards;
}
@keyframes mt-burst {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(var(--bx, 0), var(--by, 0)) scale(0.3); opacity: 0; }
}

/* ============ 降级 ============ */
@media (prefers-reduced-motion: reduce) {
  .np-sheet .mt-leaf, .np-sheet .mt-spark, .np-sheet .mt-flash,
  .np-sheet .mt-orb, .np-sheet .mt-shoot, .np-sheet .mt-aurora, .np-sheet .mt-burst-p { display: none; }
  .np-sheet .mt-achieve-glow, .np-sheet .mt-achieve-shine, .np-sheet .mt-achieve-combo { animation: none; }
  .np-sheet .mt-loading-bar > i { animation-duration: 0.6s; }
  .np-sheet .mt-fx, .np-sheet .mt-bg, .np-sheet .mt-quest, .np-sheet .mt-pop, .np-sheet .mt-ending { transition-duration: 0.2s; }
}

/* ============ 性能：面板关闭（不可见）时暂停所有持续动画 ============
   画面效果完全不变（关闭时本就看不见），仅在低配设备省下持续的 GPU/CPU 开销。 */
.np-sheet:not(.is-open) .mt-leaf,
.np-sheet:not(.is-open) .mt-spark,
.np-sheet:not(.is-open) .mt-orb,
.np-sheet:not(.is-open) .mt-shoot,
.np-sheet:not(.is-open) .mt-aurora,
.np-sheet:not(.is-open) .mt-bgimg-cell.is-zoom img {
  animation-play-state: paused !important;
}

/* ===================================================================
   可读性增强：让前景 UI / 文字不被背景图像、歌词等干扰
   方案 1 蒙版 + 方案 2 文字光晕 + 方案 3 局部底板
   =================================================================== */
/* 1) 内容可读性蒙版：压在背景图与所有背景特效之上、面板内容之下。
      顶部(HUD/开关/任务卡)与底部(进度/控制/标签)加暗，中部(封面)保持清晰。 */
.np-sheet .mt-bg::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(6, 9, 14, 0.58) 0%,
    rgba(6, 9, 14, 0.12) 18%,
    rgba(6, 9, 14, 0) 40%,
    rgba(6, 9, 14, 0) 58%,
    rgba(6, 9, 14, 0.34) 80%,
    rgba(6, 9, 14, 0.66) 100%);
}
/* 中央有大字/成就/结算时，加一层柔和径向暗化，保证居中文字可读 */
.np-sheet .mt-center .mt-pop { position: relative; }
.np-sheet .mt-center .mt-pop::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 150%; height: 200%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(6, 9, 14, 0.5), transparent 72%);
}

/* 2) 关键文字双层光晕（任意背景都清晰） */
.np-sheet .mt-hud-chapter { text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 2px 14px rgba(0,0,0,0.6); }
.np-sheet .mt-hud-pct,
.np-sheet[data-memory-active="1"] .np-title,
.np-sheet[data-memory-active="1"] .np-artist { text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 2px 12px rgba(0,0,0,0.55); }
.np-sheet .mt-finale-text { text-shadow: 0 2px 6px rgba(0,0,0,0.8), 0 4px 30px rgba(8,12,20,0.6), 0 0 28px rgba(246,180,75,0.4); }
.np-sheet .mt-ending-line { text-shadow: 0 2px 6px rgba(0,0,0,0.85), 0 2px 20px rgba(0,0,0,0.6); }
/* 歌词压在背景图上时也给阴影（仅主题激活时） */
.np-sheet[data-memory-active="1"] .np-lyric-line { text-shadow: 0 1px 3px rgba(0,0,0,0.7), 0 2px 16px rgba(0,0,0,0.5); }
.np-sheet[data-memory-active="1"] .np-lyric-line.is-active { text-shadow: 0 1px 4px rgba(0,0,0,0.6), 0 0 18px rgba(246,180,75,0.35); }

/* 3) 章节标签局部底板：永不裸贴图像 */
.np-sheet .mt-hud-chapter {
  background: rgba(8, 12, 20, 0.42);
  padding: 2px 9px; border-radius: 7px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
/* 任务卡 / 加载框底板加厚一点，背景再亮也压得住 */
.np-sheet .mt-quest { background: rgba(255, 255, 255, 0.93); }
.np-sheet .mt-loading { background: rgba(13, 20, 32, 0.9); }