/* ==========================================================
   皖美消消乐 —— 赛博传统主题 · 精品质感版
   红 / 黑 / 白 / 霓虹橙 · 金属漆面 / 内发光 / 层次 / 仪式感
   ========================================================== */
/* 自托管书法字体（Ma Shan Zheng · OFL 许可 · 按仓库文案子集化，无外链 CDN）
   保证安卓/Linux 等无楷体系统上的书法观感一致 */
@font-face {
  font-family: "Ma Shan Zheng";
  src: url("../assets/fonts/mashanzheng-subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --red: #e5302b;
  --red-deep: #a31410;
  --red-dark: #5c0d0a;
  --orange: #ff9a2e;
  --amber: #ffc94d;
  --gold: #f6d488;
  --ink: #0b0b10;
  --ink-2: #14141d;
  --ink-3: #1d1d29;
  --paper: #f7f2e8;
  --white: #ffffff;
  --glow-red: 0 0 12px rgba(229, 48, 43, .8), 0 0 28px rgba(229, 48, 43, .35);
  --glow-orange: 0 0 10px rgba(255, 154, 46, .8), 0 0 24px rgba(255, 154, 46, .35);
  --metal: linear-gradient(150deg, #4a3524 0%, #c9a25c 18%, #f6d488 32%, #8a683a 48%, #3c2c1c 62%, #b28d51 82%, #5c4630 100%);
  --lacquer: linear-gradient(165deg, #251a22 0%, #180f16 45%, #241019 100%);
  --font-ui: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  --font-brush: "Ma Shan Zheng", "KaiTi", "STKaiti", "Kaiti SC", "AR PL UKai CN", "Noto Serif SC", serif;
  /* 上舞台下棋盘：顶部救援舞台高度 + 棋盘按剩余空间自适应 */
  --stage-h: clamp(170px, 30vh, 320px);
  --board-size: max(200px, min(92vmin, 560px, calc(100vh - var(--stage-h) - 252px)));
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-ui);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

#app { position: relative; height: 100%; width: 100%; overflow: hidden; }

/* ---------- 背景装饰：光晕 + 流动光雾 + 马头墙剪影 ---------- */
.bg-deco { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
/* 光晕用预柔化径向渐变而非 blur(90px) 滤镜：观感一致，
   省掉两张全屏级滤镜层的每帧合成（低端机与软渲染的掉帧大户） */
.bg-glow { position: absolute; border-radius: 50%; opacity: .22; }
.bg-glow-red {
  width: 70vmax; height: 70vmax; left: -25vmax; top: -30vmax;
  background: radial-gradient(circle, rgba(229, 48, 43, .9), rgba(229, 48, 43, .38) 40%, rgba(229, 48, 43, .1) 66%, transparent 82%);
  animation: glow-drift 16s ease-in-out infinite alternate;
}
.bg-glow-orange {
  width: 60vmax; height: 60vmax; right: -23vmax; bottom: -27vmax;
  background: radial-gradient(circle, rgba(255, 154, 46, .9), rgba(255, 154, 46, .38) 40%, rgba(255, 154, 46, .1) 66%, transparent 82%);
  animation: glow-drift 20s ease-in-out infinite alternate-reverse;
}
@keyframes glow-drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(6vmax, 4vmax) scale(1.12); }
}
.bg-fog {
  /* 渐变本身已足够柔，去掉 blur 滤镜层（视觉等价、合成便宜） */
  position: absolute; left: -30%; width: 160%; height: 46%;
  background: radial-gradient(ellipse 42% 58% at 30% 50%, rgba(229, 48, 43, .10), transparent 70%),
              radial-gradient(ellipse 36% 52% at 72% 44%, rgba(255, 154, 46, .08), transparent 70%);
  will-change: transform;
}
.bg-fog-1 { top: 12%; animation: fog-drift 38s linear infinite; }
.bg-fog-2 { bottom: 4%; animation: fog-drift 52s linear infinite reverse; opacity: .8; }
@keyframes fog-drift {
  0% { transform: translateX(-6%); }
  50% { transform: translateX(6%); }
  100% { transform: translateX(-6%); }
}
.bg-skyline { position: absolute; bottom: 0; left: 0; width: 100%; height: 22vh; color: #050508; opacity: .8; filter: drop-shadow(0 -2px 14px rgba(229, 48, 43, .25)); }
.bg-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 120% 90% at 50% 42%, transparent 55%, rgba(0, 0, 0, .5) 100%);
}

/* ---------- 屏幕切换 ---------- */
.screen {
  position: absolute; inset: 0; z-index: 1;
  display: none; flex-direction: column; align-items: center;
  overflow-y: auto; overflow-x: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.screen.active { display: flex; animation: screen-in .42s cubic-bezier(.22, .9, .36, 1) both; }
@keyframes screen-in {
  from { opacity: 0; transform: translateY(14px) scale(.992); filter: brightness(1.35); }
  to { opacity: 1; transform: none; filter: brightness(1); }
}

/* 转场：光雾扫过（柔雾层 + 高光刃双层错速，不是色块硬切） */
#screen-veil {
  position: fixed; inset: 0; z-index: 500; pointer-events: none; opacity: 0;
  background:
    linear-gradient(105deg,
      transparent 26%,
      rgba(255, 201, 77, .1) 40%,
      rgba(255, 255, 255, .24) 50%,
      rgba(229, 48, 43, .1) 60%,
      transparent 74%),
    radial-gradient(ellipse 46% 120% at 50% 50%, rgba(255, 226, 178, .16), transparent 70%);
  background-size: 300% 100%, 260% 100%;
  background-position: 120% 0, 150% 0;
  background-repeat: no-repeat;
  filter: blur(6px);
}
#screen-veil.sweep { animation: veil-sweep .55s ease-out; }
@keyframes veil-sweep {
  0% { opacity: 0; background-position: 120% 0, 150% 0; }
  25% { opacity: 1; }
  100% { opacity: 0; background-position: -60% 0, -80% 0; }
}

/* ---------- 通用按钮 ---------- */
.btn {
  position: relative;
  font-family: var(--font-ui);
  font-size: 1.05rem; font-weight: 700; letter-spacing: .15em;
  color: var(--paper);
  background: linear-gradient(160deg, #262636, var(--ink-2));
  border: 1px solid rgba(247, 242, 232, .28);
  border-radius: 12px;
  padding: .8em 2.2em;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%);
  background-size: 250% 100%; background-position: 130% 0;
  transition: background-position .001s;
  pointer-events: none;
}
.btn:hover { transform: translateY(-2px); border-color: var(--orange); box-shadow: var(--glow-orange), 0 6px 18px rgba(0, 0, 0, .5); }
.btn:hover::after { background-position: -50% 0; transition: background-position .55s ease; }
.btn:active { transform: translateY(0) scale(.97); }
.btn:disabled {
  opacity: .38; cursor: not-allowed; filter: grayscale(.65);
  transform: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
/* 键盘可达：所有可点控件统一 focus 光环（仅键盘触发） */
button:focus-visible, .select-card:focus-visible, .level-card:focus-visible {
  outline: 2.5px solid var(--amber);
  outline-offset: 2px;
}
/* 次级 ghost 按钮：降权重，不与主按钮抢视线 */
.btn-ghost {
  background: transparent;
  border-color: rgba(247, 242, 232, .2);
  box-shadow: none;
  color: rgba(247, 242, 232, .7);
}
.btn-ghost:hover { border-color: rgba(255, 154, 46, .6); color: var(--paper); box-shadow: none; }
.btn-primary {
  background: linear-gradient(160deg, #ff5346, var(--red) 40%, var(--red-deep));
  border-color: rgba(255, 220, 180, .65);
  color: #fff;
  text-shadow: 0 1px 3px rgba(90, 0, 0, .6);
  box-shadow: var(--glow-red), inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -6px 14px rgba(90, 0, 0, .4);
}
.btn-primary:hover { border-color: #fff; box-shadow: 0 0 18px rgba(229, 48, 43, .9), 0 0 40px rgba(229, 48, 43, .4), inset 0 1px 0 rgba(255, 255, 255, .4); }
.btn-icon {
  background: var(--ink-3); color: var(--paper);
  border: 1px solid rgba(247, 242, 232, .25); border-radius: 50%;
  width: 44px; height: 44px; font-size: 1.2rem; cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .1);
  transition: transform .15s, border-color .15s;
}
.btn-icon:hover { transform: translateY(-1px); border-color: var(--orange); }
.btn-icon:active { transform: scale(.92); }
.btn-icon.muted { opacity: .45; }
.btn-icon-sm { width: 38px; height: 38px; flex: 0 0 auto; }
/* 音乐/音效双开关：内联 SVG（不依赖 emoji 字体），muted 时显示斜杠隐藏声波 */
.btn-sound, .btn-music { display: inline-flex; align-items: center; justify-content: center; }
.btn-sound svg, .btn-music svg { width: 58%; height: 58%; display: block; }
.btn-sound .slash, .btn-music .slash { display: none; stroke: var(--red); }
.btn-sound.muted .slash, .btn-music.muted .slash { display: block; }
.btn-sound.muted .wave { display: none; }
.btn-back {
  background: linear-gradient(160deg, #262636, var(--ink-3)); color: var(--paper);
  border: 1px solid rgba(247, 242, 232, .3); border-radius: 10px;
  width: 42px; height: 42px; font-size: 1.3rem; cursor: pointer; flex: 0 0 auto;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .1);
  transition: transform .15s, border-color .15s;
}
.btn-back:hover { border-color: var(--orange); transform: translateX(-2px); }
.btn-back:active { transform: scale(.93); }

/* ---------- 书法印章徽章 ---------- */
.brush { font-family: var(--font-brush); }
.seal-badge {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-brush); font-size: 1.3rem; font-weight: 700;
  color: #fff;
  background: linear-gradient(160deg, #ff4a40, var(--red) 55%, var(--red-deep));
  border: 2px solid rgba(255, 255, 255, .92); border-radius: 10px;
  width: 2.6em; height: 2.6em;
  box-shadow: var(--glow-red), inset 0 2px 4px rgba(255, 255, 255, .35), inset 0 -4px 8px rgba(90, 0, 0, .5);
  animation: seal-breathe 3.2s ease-in-out infinite;
}
/* 竖排印章文字：1em 宽逐字换行（writing-mode 在缺竖排度量的字体下会把字形画出盒外） */
.seal-badge .seal-text {
  width: 1em; line-height: 1.05; text-align: center; word-break: break-all;
}
.seal-badge-mei { background: linear-gradient(160deg, #c9201a, var(--red-deep) 60%, #6e0e0a); border-radius: 50%; animation-delay: 1.6s; }
@keyframes seal-breathe {
  0%, 100% { box-shadow: 0 0 8px rgba(229, 48, 43, .6), 0 0 20px rgba(229, 48, 43, .25), inset 0 2px 4px rgba(255, 255, 255, .35), inset 0 -4px 8px rgba(90, 0, 0, .5); }
  50% { box-shadow: 0 0 16px rgba(229, 48, 43, .95), 0 0 36px rgba(229, 48, 43, .45), inset 0 2px 4px rgba(255, 255, 255, .35), inset 0 -4px 8px rgba(90, 0, 0, .5); }
}

/* ---------- 标题金属质感（金箔缓缓走光） ---------- */
.game-title .brush, .loading-title .brush {
  color: var(--red);
  background: linear-gradient(175deg, #ff6a58 8%, var(--red) 38%, #8f100c 62%, #ff4a40 88%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(229, 48, 43, .65)) drop-shadow(0 2px 2px rgba(0, 0, 0, .8));
}
.game-title .metal, .loading-title .metal {
  background: linear-gradient(120deg, #fffdf6 10%, #f6d488 30%, #b9955a 46%, #fdf3d0 62%, #97794a 82%, #fffdf6 98%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .85)) drop-shadow(0 0 12px rgba(255, 201, 77, .25));
  animation: foil-sheen 7s ease-in-out infinite;
}
@keyframes foil-sheen {
  0%, 58% { background-position: 0% 0; }
  86%, 100% { background-position: 120% 0; }
}

/* ---------- 环境尘雾：少而精的金尘/羽屑缓缓升起（立绘打光层） ---------- */
.ambient-dust { position: absolute; inset: 4% 6%; pointer-events: none; overflow: hidden; z-index: 2; }
.ambient-dust i {
  position: absolute; bottom: -4%; width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, rgba(255, 201, 77, .9) 55%, transparent 78%);
  box-shadow: 0 0 8px rgba(255, 201, 77, .7);
  opacity: 0;
  animation: dust-rise 6.5s linear infinite;
  will-change: transform, opacity;
}
.ambient-dust i:nth-child(1) { left: 12%; animation-delay: 0s; }
.ambient-dust i:nth-child(2) { left: 30%; width: 3px; height: 3px; animation-delay: 1.4s; animation-duration: 7.5s; }
.ambient-dust i:nth-child(3) { left: 48%; animation-delay: 2.8s; }
.ambient-dust i:nth-child(4) { left: 64%; width: 4px; height: 4px; animation-delay: .8s; animation-duration: 8s; }
.ambient-dust i:nth-child(5) { left: 79%; animation-delay: 3.6s; }
.ambient-dust i:nth-child(6) { left: 88%; width: 3px; height: 3px; animation-delay: 5s; animation-duration: 7s; }
.ambient-dust i:nth-child(7) { left: 22%; width: 6px; height: 6px; animation-delay: 4.2s; animation-duration: 9s; }
@keyframes dust-rise {
  0% { transform: translate(0, 0) scale(.6); opacity: 0; }
  12% { opacity: .85; }
  60% { opacity: .5; }
  100% { transform: translate(14px, -86%) scale(1); opacity: 0; }
}

/* ---------- 加载页 ---------- */
#screen-loading { justify-content: center; background: radial-gradient(circle at 50% 40%, #241019 0%, var(--ink) 72%); }
.loading-box { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 24px; }
.loading-chars { display: flex; gap: 10px; align-items: flex-end; }
.loading-char {
  width: min(34vw, 170px); border-radius: 18px;
  border: 1px solid rgba(255, 154, 46, .35);
  filter: drop-shadow(0 10px 26px rgba(229, 48, 43, .45));
}
.bounce-1 { animation: char-bounce 1.6s ease-in-out infinite; }
.bounce-2 { animation: char-bounce 1.6s ease-in-out .8s infinite; }
@keyframes char-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.loading-title { font-size: 2.2rem; letter-spacing: .12em; }
.loading-title .brush { font-size: 1.25em; }
.loading-bar {
  position: relative;
  width: min(70vw, 320px); height: 12px; border-radius: 8px;
  background: linear-gradient(180deg, #0a0a10, #191924);
  border: 1px solid rgba(255, 201, 77, .35);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .8), 0 0 12px rgba(229, 48, 43, .2);
  overflow: hidden;
}
.loading-fill {
  position: relative; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--red-deep), var(--red) 55%, var(--orange));
  box-shadow: var(--glow-orange);
  transition: width .3s;
}
.loading-fill::before {
  /* 能量流动斜纹：进度条不是死色块 */
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, transparent 0 9px, rgba(255, 255, 255, .16) 9px 13px);
  background-size: 44px 100%;
  animation: fill-stripes 1s linear infinite;
}
@keyframes fill-stripes { to { background-position: 44px 0; } }
.loading-fill::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 14px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85));
  filter: blur(1px);
}
.loading-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  width: min(70vw, 320px); margin-top: -8px;
}
.loading-stage { font-size: .78rem; letter-spacing: .18em; color: var(--amber); text-shadow: 0 0 10px rgba(255, 154, 46, .4); }
.loading-pct {
  font-size: .84rem; font-weight: 800; color: var(--gold);
  font-variant-numeric: tabular-nums; letter-spacing: .05em;
  text-shadow: 0 0 8px rgba(255, 201, 77, .5);
}
.loading-tip { color: rgba(247, 242, 232, .6); font-size: .9rem; min-height: 1.4em; text-align: center; }
/* 加载完成仪式：条满金光 + 标题爆闪一记 */
.loading-box.done .loading-bar {
  border-color: var(--gold);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .8), 0 0 26px rgba(255, 201, 77, .75);
  transition: box-shadow .3s, border-color .3s;
}
.loading-box.done .loading-title { animation: title-flash .5s ease-out; }
@keyframes title-flash { 30% { filter: brightness(1.9); transform: scale(1.03); } }

/* ---------- 主菜单 ---------- */
#screen-menu { justify-content: center; }
.menu-wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 28px; padding: 24px; max-width: 1000px; width: 100%;
}
.menu-hero { position: relative; flex: 1 1 380px; max-width: 560px; }
.menu-hero::before {
  content: ""; position: absolute; inset: -3px; border-radius: 25px; z-index: 0;
  background: var(--metal);
  opacity: .85;
}
.menu-hero::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -16px; height: 26px; z-index: -1;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(229, 48, 43, .45), transparent 70%);
  filter: blur(8px);
}
.menu-hero-img {
  position: relative; z-index: 1;
  width: 100%; border-radius: 22px; display: block;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .7), var(--glow-red);
  animation: hero-idle 5.2s ease-in-out infinite;
}
@keyframes hero-idle {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.006); }
}
.menu-hero-badges { position: absolute; top: 14px; left: 14px; display: flex; gap: 10px; z-index: 2; }
.menu-panel { flex: 1 1 300px; max-width: 400px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.game-title { font-size: clamp(2.2rem, 6vw, 3.4rem); letter-spacing: .1em; text-align: center; }
.game-title .brush { font-size: 1.2em; }
.game-subtitle { color: var(--amber); letter-spacing: .3em; font-size: .95rem; margin-bottom: 8px; text-shadow: 0 0 14px rgba(255, 154, 46, .5); }
.menu-btns { display: flex; flex-direction: column; gap: 12px; width: min(280px, 80vw); }
.menu-btns .btn { width: 100%; }
.menu-foot { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.menu-copy { color: rgba(247, 242, 232, .45); font-size: .8rem; letter-spacing: .2em; }

/* ---------- 页面头 ---------- */
.page-head {
  display: flex; align-items: center; gap: 14px;
  width: 100%; max-width: 720px; padding: 18px 16px 8px;
}
.page-head h2 {
  font-size: 1.4rem; letter-spacing: .18em; font-family: var(--font-brush);
  background: linear-gradient(178deg, #fff3d4 15%, var(--gold) 45%, #b08c50 70%, #ffe9b8 95%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8));
}

/* ---------- 关卡地图 ---------- */
.level-map {
  display: flex; flex-direction: column; gap: 0;
  width: 100%; max-width: 560px; padding: 12px 20px 60px;
}
.level-node { display: flex; gap: 16px; align-items: stretch; }
.level-node .node-rail { display: flex; flex-direction: column; align-items: center; width: 44px; flex: 0 0 auto; }
.node-dot {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.05rem; flex: 0 0 auto;
  background: linear-gradient(160deg, #23232f, #15151e);
  border: 2px solid rgba(247, 242, 232, .28); color: rgba(247, 242, 232, .5);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.node-dot svg { width: 52%; height: 52%; display: block; }
.node-line { flex: 1; width: 3px; background: linear-gradient(rgba(229, 48, 43, .35), rgba(229, 48, 43, .1)); min-height: 22px; border-radius: 2px; transition: background .3s; }
/* 已通段落连线：能量流光顺路而下 */
.node-line.filled {
  background: linear-gradient(180deg, var(--orange) 0%, var(--red) 40%, rgba(255, 224, 150, .95) 50%, var(--red) 60%, var(--orange) 100%);
  background-size: 100% 300%;
  box-shadow: 0 0 8px rgba(255, 154, 46, .45);
  animation: line-flow 2.4s linear infinite;
}
@keyframes line-flow { from { background-position: 0 0; } to { background-position: 0 300%; } }
.level-node:last-child .node-line { display: none; }
/* 当前关：节点呼吸光 + 外扩光环 ping */
.level-node.current .node-dot { position: relative; animation: node-breathe 1.9s ease-in-out infinite; }
.level-node.current .node-dot::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(255, 201, 77, .85);
  animation: node-ping 1.9s cubic-bezier(.2, .6, .4, 1) infinite;
}
@keyframes node-ping {
  0% { transform: scale(.85); opacity: 1; }
  75%, 100% { transform: scale(1.65); opacity: 0; }
}
@keyframes node-breathe {
  0%, 100% { box-shadow: var(--glow-red), inset 0 2px 4px rgba(255, 255, 255, .4); }
  50% { box-shadow: 0 0 22px rgba(229, 48, 43, 1), 0 0 44px rgba(229, 48, 43, .5), inset 0 2px 4px rgba(255, 255, 255, .4); }
}
.lv-current-tag {
  font-size: .64rem; font-weight: 800; letter-spacing: .12em; color: #2a1102;
  background: linear-gradient(160deg, #ffe9b8, var(--amber));
  border-radius: 999px; padding: 2px 9px;
  box-shadow: 0 0 10px rgba(255, 201, 77, .55);
  animation: cur-tag-pulse 1.9s ease-in-out infinite;
}
@keyframes cur-tag-pulse { 50% { box-shadow: 0 0 18px rgba(255, 201, 77, .95); } }
.level-node.cleared .node-dot { border-color: rgba(255, 224, 150, .95); }
.level-card {
  position: relative;
  flex: 1; margin-bottom: 20px; padding: 15px 18px;
  display: block; width: 100%; text-align: left;
  font-family: var(--font-ui); color: var(--paper); font-size: 1rem;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, .04) 0%, transparent 40%),
    var(--lacquer);
  border: 1px solid rgba(255, 201, 77, .22); border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .07);
  transition: transform .18s, border-color .18s, box-shadow .18s;
  overflow: hidden;
}
.level-card:not(:disabled):active { transform: translateX(3px) scale(.99); }
.level-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(var(--orange), var(--red));
  opacity: 0; transition: opacity .18s;
}
.level-card:hover { transform: translateX(5px); border-color: var(--orange); box-shadow: var(--glow-orange), 0 8px 22px rgba(0, 0, 0, .55); }
.level-card:hover::before { opacity: 1; }
.level-card h3 { font-size: 1.15rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.level-card h3 .lv-place { font-size: .78rem; font-weight: 400; color: var(--amber); letter-spacing: .1em; }
.level-card p { margin-top: 6px; font-size: .85rem; color: rgba(247, 242, 232, .65); line-height: 1.5; }
.level-card .lv-stars { margin-top: 6px; color: var(--amber); letter-spacing: .2em; font-size: .95rem; text-shadow: 0 0 8px rgba(255, 201, 77, .55); }
.level-node.unlocked .node-dot {
  background: radial-gradient(circle at 32% 28%, #ff6a58, var(--red) 55%, var(--red-deep));
  border-color: rgba(255, 235, 200, .95); color: #fff;
  box-shadow: var(--glow-red), inset 0 2px 4px rgba(255, 255, 255, .4);
}
.level-node.locked .node-dot svg { color: rgba(247, 242, 232, .45); }
.level-node.locked .level-card { opacity: .45; cursor: not-allowed; filter: grayscale(.6); }
.level-node.locked .level-card:hover { transform: none; border-color: rgba(255, 201, 77, .22); box-shadow: 0 8px 22px rgba(0, 0, 0, .5); }
.level-node.locked .level-card:hover::before { opacity: 0; }

/* ---------- 图鉴 ---------- */
.dex-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px; width: 100%; max-width: 860px; padding: 12px 20px 60px;
}
.dex-card {
  position: relative;
  background:
    radial-gradient(circle at 85% 12%, rgba(255, 201, 77, .06), transparent 42%),
    linear-gradient(105deg, rgba(255, 255, 255, .035) 0%, transparent 45%),
    var(--lacquer);
  border: 1px solid rgba(255, 201, 77, .2); border-radius: 16px;
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.dex-card:hover { transform: translateY(-3px); border-color: rgba(255, 201, 77, .5); box-shadow: 0 12px 30px rgba(0, 0, 0, .6), 0 0 18px rgba(255, 154, 46, .18); }
.dex-card.dex-hero { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 18px; border-color: rgba(229, 48, 43, .55); }
.dex-card.dex-hero img {
  width: min(34vw, 150px); border-radius: 14px; flex: 0 0 auto;
  border: 1px solid rgba(255, 154, 46, .4);
  box-shadow: var(--glow-red), 0 10px 24px rgba(0, 0, 0, .55);
}
.dex-card .dex-icon {
  width: 64px; height: 64px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .4);
}
.dex-card h3 { font-size: 1.1rem; color: var(--amber); font-family: var(--font-brush); letter-spacing: .1em; }
.dex-card h3 small { color: rgba(247, 242, 232, .5); font-family: var(--font-ui); margin-left: 8px; letter-spacing: .05em; }
.dex-card p { font-size: .85rem; line-height: 1.65; color: rgba(247, 242, 232, .75); }
.dex-sec-title {
  grid-column: 1 / -1; font-family: var(--font-brush); color: var(--red);
  font-size: 1.2rem; letter-spacing: .25em; margin-top: 8px;
  display: flex; align-items: center; gap: 12px;
  text-shadow: 0 0 12px rgba(229, 48, 43, .4);
}
.dex-sec-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(229, 48, 43, .6), transparent); }

/* ---------- 游戏页：关卡主题背景 ---------- */
#screen-game { justify-content: flex-start; overflow: hidden; }
.game-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.game-bg-img {
  position: absolute; inset: -3.5%;
  background-size: cover; background-position: center 35%;
  opacity: 0; transition: opacity .8s ease;
  animation: bg-drift 46s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes bg-drift {
  from { transform: translateX(-1.1%) scale(1.02); }
  to { transform: translateX(1.1%) scale(1.06); }
}
.theme-lv1 .game-bg-img { background-image: url(../assets/bg-lv1.jpg?v=r3); opacity: .5; }
.theme-lv2 .game-bg-img { background-image: url(../assets/bg-lv2.jpg?v=r3); opacity: .5; }
.theme-lv3 .game-bg-img { background-image: url(../assets/bg-lv3.jpg?v=r3); opacity: .48; }
.theme-lv4 .game-bg-img { background-image: url(../assets/bg-lv4.jpg?v=r3); opacity: .42; }
.theme-lv5 .game-bg-img { background-image: url(../assets/bg-lv5.jpg?v=r3); opacity: .48; }
.game-bg .fog {
  position: absolute; left: -30%; width: 160%; height: 40%;
  background: radial-gradient(ellipse 45% 60% at 35% 50%, rgba(247, 242, 232, .05), transparent 70%),
              radial-gradient(ellipse 38% 52% at 70% 45%, rgba(255, 154, 46, .06), transparent 70%);
  will-change: transform;
}
.game-bg .fog-1 { top: 6%; animation: fog-drift 34s linear infinite; }
.game-bg .fog-2 { bottom: 0; animation: fog-drift 46s linear infinite reverse; }
.game-bg-vignette {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 11, 16, .72) 0%, rgba(11, 11, 16, .25) 22%, rgba(11, 11, 16, .28) 68%, rgba(11, 11, 16, .8) 100%),
    radial-gradient(ellipse 100% 78% at 50% 46%, transparent 42%, rgba(6, 6, 10, .55) 100%);
}
#screen-game > *:not(.game-bg) { position: relative; z-index: 1; }

/* ---------- 游戏 HUD ----------
   信息架构：顶栏 = 返回 | 关名地点 | 静音；
   舞台下 hud-strip = 步数 | 目标（图标+进度条） | 分数，同一视觉重量 */
.game-hud {
  display: flex; align-items: center; gap: 14px;
  width: 100%; max-width: 640px; padding: 12px 16px 4px;
}
.hud-level { flex: 1; min-width: 0; text-align: center; }
.hud-level-name {
  font-family: var(--font-brush); font-size: 1.15rem; letter-spacing: .08em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--gold);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 14px rgba(255, 201, 77, .35);
}
.hud-place { font-size: .72rem; color: rgba(247, 242, 232, .6); letter-spacing: .15em; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.hud-strip {
  display: flex; gap: 10px; align-items: stretch; justify-content: center;
  width: 100%; max-width: 640px; padding: 4px 16px; min-height: 54px;
  flex: 0 0 auto; /* 不被 flex 列压缩：多目标关内容再多也不许被棋盘盖住 */
}
.hud-stat {
  text-align: center; min-width: 74px;
  display: flex; flex-direction: column; justify-content: center;
  /* 实底半透明替代 backdrop-filter：动画背景上毛玻璃每帧重采样是掉帧大户，
     ≥.88 不透明度下模糊几乎不可辨，观感等价、合成成本大降 */
  background: linear-gradient(180deg, rgba(22, 22, 32, .9), rgba(13, 13, 20, .9));
  border: 1px solid rgba(255, 201, 77, .22); border-radius: 14px;
  padding: 4px 10px 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.hud-label { font-size: .66rem; color: rgba(247, 242, 232, .55); letter-spacing: .3em; }
.hud-value {
  font-size: 1.35rem; font-weight: 800; color: #fff;
  text-shadow: 0 0 10px rgba(255, 154, 46, .6);
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
}
.hud-value.bump { animation: hud-bump .3s cubic-bezier(.34, 1.5, .64, 1); }
@keyframes hud-bump { 40% { transform: scale(1.22); text-shadow: 0 0 18px rgba(255, 201, 77, .95); } }
.hud-moves .hud-value { color: var(--orange); }
.hud-moves.low { border-color: rgba(229, 48, 43, .6); }
.hud-moves.low .hud-value { color: var(--red); animation: pulse-red 1s infinite; }
@keyframes pulse-red { 50% { text-shadow: 0 0 16px rgba(229, 48, 43, 1); transform: scale(1.06); } }

.hud-goals {
  display: flex; gap: 8px; align-items: stretch; justify-content: center; flex-wrap: wrap;
  /* flex-basis 0：窄屏多目标时目标区在中列内部换行，
     步数/分数固定守两端，不再把整条挤成三行（分数曾被棋盘盖住） */
  flex: 1 1 0; min-width: 0;
}
.goal-chip {
  display: flex; align-items: center; gap: 7px;
  background: linear-gradient(180deg, rgba(31, 31, 44, .94), rgba(17, 17, 26, .94));
  border: 1px solid rgba(247, 242, 232, .22);
  border-radius: 14px; padding: 5px 12px 5px 7px; font-size: .85rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .07);
  transition: border-color .25s, color .25s, box-shadow .25s;
}
.goal-chip img { width: 28px; height: 28px; border-radius: 9px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); flex: 0 0 auto; }
.goal-chip .goal-ico {
  width: 20px; height: 20px; flex: 0 0 auto; color: var(--amber);
  filter: drop-shadow(0 0 6px rgba(255, 201, 77, .5));
}
.goal-chip .goal-body { display: flex; flex-direction: column; gap: 3px; align-items: stretch; justify-content: center; }
.goal-chip .goal-nums { font-size: .85rem; font-weight: 800; line-height: 1; }
.goal-chip .goal-nums i { font-style: normal; font-size: .78em; font-weight: 700; color: rgba(247, 242, 232, .55); }
.goal-track {
  display: block; width: 56px; height: 4px; border-radius: 3px; overflow: hidden;
  background: rgba(0, 0, 0, .55);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .8);
}
.goal-track b {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--red), var(--orange));
  box-shadow: 0 0 6px rgba(255, 154, 46, .6);
  transition: width .35s cubic-bezier(.3, .9, .4, 1);
}
.goal-chip.done { border-color: #4cd964; color: #4cd964; box-shadow: 0 0 12px rgba(76, 217, 100, .35), inset 0 1px 0 rgba(255, 255, 255, .07); }
.goal-chip.done .goal-nums i { color: rgba(76, 217, 100, .7); }
.goal-chip.done .goal-track b { background: linear-gradient(90deg, #2fae52, #4cd964); box-shadow: 0 0 6px rgba(76, 217, 100, .7); }
.goal-chip.done::after { content: "✓"; font-weight: 900; }
.goal-chip.pop { animation: goal-pop .55s cubic-bezier(.34, 1.6, .64, 1); }
@keyframes goal-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.18); box-shadow: 0 0 22px rgba(76, 217, 100, .8); }
  100% { transform: scale(1); }
}

/* ---------- 棋盘：金属漆面框 + 玻璃格 ---------- */
.board-outer { position: relative; width: var(--board-size); height: var(--board-size); margin: 10px auto; flex: 0 0 auto; }
.board-outer::before {
  /* 金属描金外框 */
  content: ""; position: absolute; inset: calc(clamp(5px, 1.3vmin, 9px) * -1);
  border-radius: calc(14px + clamp(5px, 1.3vmin, 9px));
  background: var(--metal);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .65), 0 0 34px rgba(229, 48, 43, .22), inset 0 1px 1px rgba(255, 255, 255, .5);
}
.board-outer::after {
  /* 框体内缝阴影，让棋盘看起来嵌进金属框 */
  content: ""; position: absolute; inset: -1px; border-radius: 15px; pointer-events: none; z-index: 2;
  box-shadow: 0 0 0 1.5px rgba(20, 10, 4, .9), inset 0 2px 6px rgba(0, 0, 0, .65);
}
.board {
  position: relative; width: 100%; height: 100%;
  background:
    radial-gradient(ellipse 120% 90% at 50% -18%, rgba(255, 154, 46, .1), transparent 55%),
    linear-gradient(165deg, rgba(229, 48, 43, .07), rgba(20, 14, 24, 0) 45%),
    linear-gradient(180deg, #17121d, #100c15);
  border-radius: 14px;
  box-shadow: inset 0 0 46px rgba(0, 0, 0, .6), inset 0 0 18px rgba(229, 48, 43, .1);
  overflow: hidden;
  touch-action: none;
}
.board.shake { animation: board-shake .3s; }
@keyframes board-shake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-4px, 2px); }
  50% { transform: translate(3px, -3px); }
  75% { transform: translate(-2px, -2px); }
}
.board.shake-big { animation: board-shake-big .38s; }
@keyframes board-shake-big {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-6px, 3px); }
  45% { transform: translate(5px, -4px); }
  70% { transform: translate(-4px, -2px); }
  85% { transform: translate(2px, 2px); }
}
.fx-layer { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 30; }

/* 玻璃扫光：一道细高光每 9s 掠过棋盘与金属框，让漆面「活」起来 */
.board-sheen {
  position: absolute; inset: calc(clamp(5px, 1.3vmin, 9px) * -1);
  border-radius: calc(14px + clamp(5px, 1.3vmin, 9px));
  pointer-events: none; z-index: 23; overflow: hidden;
}
.board-sheen::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 34%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .05) 38%, rgba(255, 240, 210, .1) 50%, rgba(255, 255, 255, .05) 62%, transparent);
  transform: translateX(-160%) skewX(-12deg);
  animation: board-glint 9s ease-in-out infinite;
  will-change: transform;
}
@keyframes board-glint {
  0%, 74% { transform: translateX(-160%) skewX(-12deg); }
  92%, 100% { transform: translateX(460%) skewX(-12deg); }
}

/* 玻璃格子（静态层） */
.cell {
  position: absolute; left: 0; top: 0; width: 12.5%; height: 12.5%;
  transform: translate(calc(var(--c) * 100%), calc(var(--r) * 100%));
  padding: 3.2%;
  pointer-events: none; z-index: 1;
}
.cell::before {
  content: ""; display: block; width: 100%; height: 100%; border-radius: 24%;
  background: linear-gradient(160deg, rgba(247, 242, 232, .045), rgba(0, 0, 0, .3));
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, .55),
    inset 0 -1px 0 rgba(255, 255, 255, .05),
    0 1px 0 rgba(255, 255, 255, .03);
}
.cell.alt::before { background: linear-gradient(160deg, rgba(247, 242, 232, .02), rgba(0, 0, 0, .4)); }

/* ---------- 棋子 ---------- */
.tile {
  position: absolute; left: 0; top: 0;
  width: 12.5%; height: 12.5%;
  transform: translate(calc(var(--c) * 100%), calc(var(--r) * 100%));
  /* 更跟手：.24s + 轻微过冲的物理曲线（JS 交换锁 260ms 同步收紧） */
  transition: transform .24s cubic-bezier(.3, 1.32, .56, 1);
  /* padding 百分比相对父容器（棋盘）宽度，0.55% ≈ 格子的 4.4% */
  padding: 0.55%;
  cursor: pointer;
  z-index: 5;
  will-change: transform;
}
.tile-inner {
  position: relative; width: 100%; height: 100%;
  border-radius: 22%;
  /* 裁掉 AI 图自带的暗色留边，让图标填满格子 */
  background-size: 116% 116%; background-position: center;
  box-shadow:
    0 5px 10px rgba(0, 0, 0, .6),
    0 1px 3px rgba(0, 0, 0, .5),
    inset 0 0 0 1px rgba(255, 255, 255, .14),
    inset 0 0 14px -8px var(--pc, transparent);
  transition: box-shadow .15s, filter .15s;
}
/* 光泽层：顶部高光 + 底部收暗，塑造立体感 */
.tile-inner::after {
  content: ""; position: absolute; inset: 0; border-radius: 22%; pointer-events: none;
  background:
    radial-gradient(ellipse 78% 42% at 50% 6%, rgba(255, 255, 255, .28), transparent 62%),
    linear-gradient(180deg, transparent 68%, rgba(0, 0, 0, .28) 100%);
  mix-blend-mode: screen;
}
.tile:active .tile-inner { transform: scale(.94); filter: brightness(1.15); }
/* 选中格 = 镶宝石：细白芯环 + 琥珀光晕 + 旋转棱光环（不再是粗描边） */
.tile.selected { z-index: 10; }
.tile.selected .tile-inner {
  box-shadow:
    0 10px 18px rgba(0, 0, 0, .65),
    0 0 0 1.5px rgba(255, 255, 255, .95),
    0 0 14px rgba(255, 201, 77, .85),
    0 0 30px rgba(255, 154, 46, .45),
    inset 0 0 12px -4px rgba(255, 224, 150, .8);
  animation: sel-pulse .7s ease-in-out infinite alternate;
}
.tile.selected::after {
  content: ""; position: absolute; inset: -7%; border-radius: 30%; pointer-events: none;
  background: conic-gradient(rgba(255, 224, 150, .95), transparent 22%, rgba(255, 255, 255, .9) 30%, transparent 45%, rgba(255, 201, 77, .95) 55%, transparent 72%, rgba(255, 255, 255, .85) 82%, transparent 92%, rgba(255, 224, 150, .95));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px));
  animation: gem-spin 2.2s linear infinite;
  filter: drop-shadow(0 0 6px rgba(255, 201, 77, .8));
}
@keyframes gem-spin { to { transform: rotate(360deg); } }
@keyframes sel-pulse {
  from { transform: translateY(-3%) scale(1.05) rotate(-1.2deg); }
  to { transform: translateY(-5%) scale(1.12) rotate(1.2deg); }
}
.tile.denied .tile-inner { animation: tile-denied .3s ease-in-out; }
@keyframes tile-denied {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7%); }
  60% { transform: translateX(6%); }
}
.tile.clearing { z-index: 20; }
.tile.clearing .tile-inner { animation: tile-clear .27s cubic-bezier(.5, 0, .8, .4) forwards; }
@keyframes tile-clear {
  0% { transform: scale(1); filter: brightness(1); }
  30% { transform: scale(.86); filter: brightness(1.9); }   /* 蓄力收缩 */
  62% { transform: scale(1.32); filter: brightness(2.8); opacity: 1; }
  100% { transform: scale(0); filter: brightness(3); opacity: 0; }
}
/* 落地 squash & stretch：强度随落距分档（JS 写 --land 0.42~1）——
   短落轻点头、高空重砸弹，实感立现且不拉长锁盘时序 */
.tile.landing .tile-inner { animation: land-squash .3s cubic-bezier(.34, 1.4, .64, 1); }
@keyframes land-squash {
  0% { transform: scaleY(calc(1 - .26 * var(--land, .7))) scaleX(calc(1 + .18 * var(--land, .7))); }
  55% { transform: scaleY(calc(1 + .11 * var(--land, .7))) scaleX(calc(1 - .07 * var(--land, .7))); }
  100% { transform: scale(1); }
}
/* 高空落地扬尘：格底两缕细尘向两侧散开 */
.land-dust {
  position: absolute; width: 8px; height: 5px; border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(255, 226, 178, .55), rgba(255, 200, 130, .2) 60%, transparent 80%);
  animation: land-dust .4s ease-out forwards;
  will-change: transform, opacity;
}
@keyframes land-dust {
  0% { transform: translate(0, 0) scale(.5); opacity: 0; }
  30% { opacity: .85; }
  100% { transform: translate(var(--dx, 12px), -7px) scale(1.5); opacity: 0; }
}
.tile.hint .tile-inner { animation: hint-bounce 1s ease-in-out infinite; }
@keyframes hint-bounce {
  0%, 100% { transform: translateY(0); filter: brightness(1); }
  40% { transform: translateY(-9%); filter: brightness(1.5); box-shadow: 0 12px 16px rgba(0, 0, 0, .5), 0 0 16px rgba(255, 201, 77, .75); }
  60% { transform: translateY(-7%); }
}
/* 特殊棋凝结生成 */
.tile.spawning { z-index: 22; }
.tile.spawning .tile-inner { animation: sp-condense .5s cubic-bezier(.22, 1.3, .4, 1); }
@keyframes sp-condense {
  0% { transform: scale(1.7) rotate(8deg); filter: brightness(3.2) saturate(.2); opacity: 0; }
  45% { transform: scale(.88) rotate(-3deg); filter: brightness(2); opacity: 1; }
  75% { transform: scale(1.12); filter: brightness(1.5); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* 特殊棋标识 */
.tile .sp-mark { position: absolute; inset: 0.55%; border-radius: 22%; pointer-events: none; overflow: hidden; }
.tile.sp-row .sp-mark {
  background: linear-gradient(0deg, transparent 38%, rgba(255, 255, 255, .85) 47%, rgba(255, 201, 77, .95) 53%, transparent 62%);
  animation: sp-slide-x 1s linear infinite;
  box-shadow: 0 0 12px rgba(255, 201, 77, .8), inset 0 0 0 1.5px rgba(255, 224, 150, .6);
}
@keyframes sp-slide-x { from { background-position: -30px 0; } to { background-position: 30px 0; } }
.tile.sp-col .sp-mark {
  background: linear-gradient(90deg, transparent 38%, rgba(255, 255, 255, .85) 47%, rgba(255, 201, 77, .95) 53%, transparent 62%);
  animation: sp-slide-y 1s linear infinite;
  box-shadow: 0 0 12px rgba(255, 201, 77, .8), inset 0 0 0 1.5px rgba(255, 224, 150, .6);
}
@keyframes sp-slide-y { from { background-position: 0 -30px; } to { background-position: 0 30px; } }
.tile.sp-bomb .sp-mark {
  border: 3px solid rgba(255, 80, 60, .95);
  box-shadow: 0 0 14px rgba(255, 80, 60, .9), inset 0 0 14px rgba(255, 80, 60, .7);
  animation: bomb-pulse .7s ease-in-out infinite alternate;
}
@keyframes bomb-pulse { from { transform: scale(.92); } to { transform: scale(1.04); } }
.tile.sp-rainbow .tile-inner { box-shadow: 0 0 4px 2px #fff, 0 0 18px 6px rgba(255, 154, 46, .9); }
.tile.sp-rainbow .sp-mark {
  background: conic-gradient(#e5302b, #ff9a2e, #ffe94d, #4cd964, #37c6ff, #b06bff, #e5302b);
  opacity: .4; mix-blend-mode: screen;
  animation: rainbow-spin 2.4s linear infinite;
}
@keyframes rainbow-spin { to { filter: hue-rotate(360deg); } }

/* ---------- 交互跟手 ---------- */
/* 按下即时缩小 + 拖拽预览（未达交换阈值时轻微跟手 + 朝拖拽方向微倾） */
.tile.pressing { z-index: 9; }
.tile.pressing .tile-inner {
  transform: translate(var(--dpx, 0), var(--dpy, 0)) rotate(var(--tilt, 0deg)) scale(.92);
  filter: brightness(1.18);
  transition: filter .08s;
}
/* 选中格的可交换邻格微提示 */
.tile.nbr-hint .tile-inner {
  box-shadow:
    0 5px 10px rgba(0, 0, 0, .6),
    0 0 0 1.5px rgba(255, 201, 77, .55),
    inset 0 0 10px -4px rgba(255, 201, 77, .5);
  animation: nbr-pulse 1.1s ease-in-out infinite;
}
@keyframes nbr-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.22); }
}
/* 小锤瞄准模式：金框 + 呼吸渐晕，hover 格提亮，随时可再点小锤取消 */
.board.targeting { cursor: crosshair; box-shadow: inset 0 0 46px rgba(0, 0, 0, .6), inset 0 0 0 3px rgba(255, 201, 77, .55); }
.board.targeting::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 25; border-radius: 14px;
  background: radial-gradient(ellipse at 50% 50%, transparent 52%, rgba(255, 201, 77, .14) 100%);
  animation: targeting-pulse 1.3s ease-in-out infinite;
}
@keyframes targeting-pulse { 50% { opacity: .45; } }
.board.targeting .tile:hover .tile-inner { filter: brightness(1.4); }
.hammer-hit {
  position: absolute; border-radius: 50%; pointer-events: none;
  border: 3px solid rgba(255, 224, 150, .95);
  background: radial-gradient(circle, rgba(255, 255, 255, .55), transparent 60%);
  box-shadow: 0 0 22px rgba(255, 201, 77, .9);
  animation: ring-grow .45s ease-out forwards;
}
/* 重排中的轻微涡旋 */
.board.shuffling { animation: board-swirl .9s ease-in-out; }
@keyframes board-swirl {
  0%, 100% { transform: rotate(0) scale(1); }
  40% { transform: rotate(1.2deg) scale(.985); }
  70% { transform: rotate(-.8deg) scale(1.005); }
}
/* 重排洗牌：沿对角线波次翻面收起 → 换肤 → 翻回落定 */
.tile.flip-out .tile-inner { animation: tile-flip-out .2s ease-in var(--flip-delay, 0ms) both; }
@keyframes tile-flip-out {
  to { transform: perspective(320px) rotateY(88deg) scale(.82); filter: brightness(1.6); }
}
.tile.flip-in .tile-inner { animation: tile-flip-in .26s cubic-bezier(.34, 1.4, .64, 1) var(--flip-delay, 0ms) both; }
@keyframes tile-flip-in {
  from { transform: perspective(320px) rotateY(-88deg) scale(.82); filter: brightness(1.7); }
}
/* 主动技预备：目标行/列充能高亮带（先亮后爆，与舞台蓄力对齐） */
.line-charge {
  position: absolute; pointer-events: none; border-radius: 10px; z-index: 26;
  background: linear-gradient(90deg, transparent, rgba(255, 201, 77, .28) 25%, rgba(255, 224, 150, .5) 50%, rgba(255, 201, 77, .28) 75%, transparent);
  box-shadow: 0 0 22px rgba(255, 201, 77, .4);
  animation: line-charge-in .3s ease-out both;
}
.line-charge.v {
  background: linear-gradient(0deg, transparent, rgba(255, 201, 77, .28) 25%, rgba(255, 224, 150, .5) 50%, rgba(255, 201, 77, .28) 75%, transparent);
}
/* 蓄力带即点即亮（ease-out 前快后慢），预备相全程可见不再偏暗 */
@keyframes line-charge-in {
  0% { opacity: .45; filter: brightness(1.2); }
  30% { opacity: 1; }
  100% { opacity: 1; filter: brightness(1.9); }
}
/* 首次引导：一对可交换棋子加醒目虚线环（只出现一次） */
.tile.guide { z-index: 8; }
.tile.guide::after {
  content: ""; position: absolute; inset: -9%; border-radius: 32%; pointer-events: none;
  border: 2.5px dashed rgba(255, 224, 150, .9);
  box-shadow: 0 0 14px rgba(255, 201, 77, .55);
  animation: guide-ring 1.2s ease-in-out infinite;
}
@keyframes guide-ring {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.07); opacity: .65; }
}

/* ---------- 徽州灰瓦砖锁 ---------- */
.tile .lock-cover {
  position: absolute; inset: 0.55%; border-radius: 22%;
  pointer-events: none; opacity: 0; z-index: 3;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, .12) 0%, transparent 42%),
    repeating-linear-gradient(0deg, #6d6a60 0 22%, #4e4b44 22% 26%, #7a776c 26% 48%, #57544c 48% 52%),
    linear-gradient(180deg, #7a776c, #4e4b44);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, .3),
    inset 0 -3px 6px rgba(0, 0, 0, .55),
    0 3px 8px rgba(0, 0, 0, .5);
  transition: opacity .2s;
}
.tile .lock-cover::after {
  /* 马头墙翘角剪影：点出徽派身份 */
  content: ""; position: absolute; left: 14%; right: 14%; top: 12%; height: 26%;
  background: #2c2c34;
  clip-path: polygon(0 100%, 8% 45%, 20% 45%, 20% 12%, 42% 12%, 42% 45%, 58% 45%, 58% 0, 80% 0, 80% 45%, 92% 45%, 100% 100%);
  opacity: .85;
}
.tile.locked { cursor: not-allowed; }
.tile.locked .lock-cover { opacity: .96; }
.tile.locked .tile-inner { filter: saturate(.35) brightness(.75); }
.tile.unlocking .lock-cover { animation: lock-shatter .46s ease-out forwards; }
@keyframes lock-shatter {
  0% { opacity: .96; transform: scale(1); filter: brightness(2); }
  100% { opacity: 0; transform: scale(1.28) rotate(6deg); filter: brightness(2.6); }
}
.tile-shard { width: 7px; height: 7px; }

/* ---------- 锣鼓惊变的棋子跳位 ---------- */
.tile.gong-jolt { transition-duration: .42s; transition-timing-function: cubic-bezier(.3, 1.5, .5, 1); }
.tile.gong-jolt .tile-inner { animation: gong-jolt-spin .42s ease-in-out; }
@keyframes gong-jolt-spin {
  0% { transform: scale(1) rotate(0); filter: brightness(1.8); }
  50% { transform: scale(1.14) rotate(9deg); }
  100% { transform: scale(1) rotate(0); filter: brightness(1); }
}

/* ---------- 机制层：云雾 / 流光雨 ---------- */
.mech-layer { position: absolute; inset: 0; pointer-events: none; z-index: 24; overflow: hidden; border-radius: 14px; }
.fog-band {
  position: absolute; left: -2%; width: 104%; height: 12.5%;
  background:
    radial-gradient(ellipse 34% 78% at 22% 50%, rgba(247, 242, 232, .92), transparent 78%),
    radial-gradient(ellipse 40% 88% at 55% 42%, rgba(233, 238, 244, .9), transparent 76%),
    radial-gradient(ellipse 34% 72% at 84% 55%, rgba(247, 242, 232, .88), transparent 78%),
    linear-gradient(90deg, rgba(240, 240, 244, .65), rgba(247, 245, 240, .8) 50%, rgba(240, 240, 244, .65));
  filter: blur(3px);
  opacity: 0;
  animation: fog-band-in .7s ease-out forwards, fog-band-drift 5s ease-in-out infinite alternate;
}
/* 云头蓬松层：两层错速云朵團，云海不再是一条白雾抹布 */
.fog-band::before {
  content: ""; position: absolute; inset: -38% -2%;
  background:
    radial-gradient(ellipse 22% 58% at 10% 66%, rgba(255, 255, 255, .8), transparent 70%),
    radial-gradient(ellipse 28% 66% at 38% 30%, rgba(240, 245, 252, .75), transparent 72%),
    radial-gradient(ellipse 22% 56% at 66% 64%, rgba(255, 255, 255, .78), transparent 70%),
    radial-gradient(ellipse 26% 62% at 90% 36%, rgba(240, 245, 252, .7), transparent 72%);
  filter: blur(5px);
  animation: fog-puff-drift 7s ease-in-out infinite alternate;
}
.fog-band::after {
  content: ""; position: absolute; inset: -26% -2%;
  background:
    radial-gradient(ellipse 30% 62% at 24% 40%, rgba(233, 240, 248, .55), transparent 74%),
    radial-gradient(ellipse 34% 68% at 74% 58%, rgba(233, 240, 248, .5), transparent 76%);
  filter: blur(9px);
  animation: fog-puff-drift 9s ease-in-out infinite alternate-reverse;
}
@keyframes fog-puff-drift {
  from { transform: translateX(-2.2%); }
  to { transform: translateX(2.2%); }
}
@keyframes fog-band-in { to { opacity: .95; } }
@keyframes fog-band-drift {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 26px 0, -20px 0, 16px 0, 0 0; }
}
/* 云雾被风撕开：拉伸 + 斜掠 + 炸亮一瞬再散尽 */
.fog-band.dispersing { animation: fog-band-out .62s cubic-bezier(.3, .1, .4, 1) forwards; }
@keyframes fog-band-out {
  0% { opacity: .95; filter: blur(3px) brightness(1); transform: none; }
  26% { opacity: .85; filter: blur(5px) brightness(1.5); transform: translateX(3%) skewX(-6deg) scaleX(1.06); }
  100% { opacity: 0; filter: blur(16px) brightness(1.2); transform: translateX(14%) skewX(-14deg) scaleX(1.35) scaleY(1.5); }
}
.mech-layer[data-rain] { background: linear-gradient(180deg, rgba(255, 201, 77, .06), transparent 40%); }
.rain-streak {
  position: absolute; top: -18%; width: 2.5px; height: 16%;
  border-radius: 3px;
  background: linear-gradient(180deg, transparent, rgba(255, 224, 150, .95), rgba(255, 255, 255, .9));
  box-shadow: 0 0 8px rgba(255, 201, 77, .8);
  animation: rain-fall 1.1s linear infinite;
}
@keyframes rain-fall {
  from { transform: translateY(0); opacity: 0; }
  12% { opacity: 1; }
  85% { opacity: .9; }
  to { transform: translateY(860%); opacity: 0; }
}
/* 盛典金箔：细小箔片摆动翻转着落（金箔感而非随机矩形） */
.rain-foil {
  position: absolute; top: -6%; width: 7px; height: 10px; border-radius: 2px;
  background: linear-gradient(155deg, #fff7de 8%, var(--gold) 36%, #b28d51 55%, #ffe9b8 82%);
  box-shadow: 0 0 6px rgba(255, 201, 77, .75);
  animation: foil-fall 2.6s linear infinite;
  will-change: transform, opacity;
}
@keyframes foil-fall {
  0% { transform: translate(0, 0) rotate3d(1, 1, 0, 0deg); opacity: 0; }
  10% { opacity: .95; }
  55% { transform: translate(calc(var(--sway, 20px) * .6), 56vmin) rotate3d(1, 1, 0, calc(var(--spin, 480deg) * .55)); opacity: .9; }
  100% { transform: translate(var(--sway, 20px), 104vmin) rotate3d(1, 1, 0, var(--spin, 480deg)); opacity: 0; }
}

/* ---------- 特效 ---------- */
.particle {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  pointer-events: none;
  animation: particle-fly .6s cubic-bezier(.2, .6, .5, 1) forwards;
  will-change: transform, opacity;
}
@keyframes particle-fly {
  from { transform: translate(0, 0) scale(1); opacity: 1; }
  to { transform: translate(var(--dx), var(--dy)) scale(.15); opacity: 0; }
}
.shard {
  position: absolute; width: 8px; height: 8px; border-radius: 24%;
  pointer-events: none;
  animation: shard-fall .62s cubic-bezier(.3, .1, .7, .5) forwards;
  will-change: transform, opacity;
}
@keyframes shard-fall {
  from { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; }
  to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot, 200deg)) scale(.35); opacity: 0; }
}
/* ---------- 主题化碎裂：按棋子文化符号碎开（transform/opacity only，走 FX 池） ---------- */
/* 茶叶：叶尖形，左右摆着飘落 */
.shard.shard-leaf {
  width: 11px; height: 6px; border-radius: 0 80% 0 80%;
  background: linear-gradient(135deg, #8ee897, #2f9e46 75%);
  box-shadow: 0 0 6px rgba(76, 217, 100, .55);
  animation: leaf-flutter .95s cubic-bezier(.35, .1, .6, .9) forwards;
}
@keyframes leaf-flutter {
  0% { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; }
  32% { transform: translate(calc(var(--dx) * .72), calc(var(--dy) * .3)) rotate(96deg) scale(1.04); opacity: 1; }
  62% { transform: translate(calc(var(--dx) * .3), calc(var(--dy) * .62)) rotate(28deg) scale(.94); opacity: .95; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot, 140deg)) scale(.6); opacity: 0; }
}
/* 山石：多边棱角，沉且快地崩落 */
.shard.shard-rock {
  width: 9px; height: 9px; border-radius: 0;
  clip-path: polygon(28% 0, 88% 12%, 100% 62%, 66% 100%, 12% 88%, 0 34%);
  background: linear-gradient(150deg, #cfeefb, #4a90b8 55%, #2b5f80);
  box-shadow: 0 0 6px rgba(55, 198, 255, .5);
  animation: shard-fall .52s cubic-bezier(.4, .05, .85, .6) forwards;
}
/* 凤羽：细长羽片，转着圈横漂 */
.shard.shard-feather {
  width: 5px; height: 15px; border-radius: 50% 50% 62% 62%;
  background: linear-gradient(180deg, #fff3d6, #ff9a2e 45%, #e5302b);
  box-shadow: 0 0 7px rgba(255, 154, 46, .7);
  animation: feather-drift .9s cubic-bezier(.3, .15, .6, .85) forwards;
}
@keyframes feather-drift {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  45% { transform: translate(calc(var(--dx) * .68), calc(var(--dy) * .4)) rotate(calc(var(--rot, 160deg) * .7)); opacity: .95; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(calc(var(--rot, 160deg) * 1.5)) scale(.75); opacity: 0; }
}
/* 马头墙砖瓦：扁平灰白瓦屑，翻着面直坠 */
.shard.shard-tilebit {
  width: 9px; height: 5px; border-radius: 1px;
  background: linear-gradient(180deg, #f3efe5, #b9b4a4 65%, #8e897b);
  box-shadow: 0 0 5px rgba(232, 228, 218, .6);
  animation: shard-fall .58s cubic-bezier(.38, .05, .8, .55) forwards;
}
/* 戏韵纸片：紫金彩纸 3D 翻飞（背景色由 JS 交替上色） */
.shard.shard-paper {
  width: 7px; height: 9px; border-radius: 1px;
  animation: paper-spin .95s cubic-bezier(.3, .1, .55, .9) forwards;
}
@keyframes paper-spin {
  0% { transform: translate(0, 0) rotate3d(1, 1, 0, 0deg); opacity: 1; }
  50% { transform: translate(calc(var(--dx) * .58), calc(var(--dy) * .44)) rotate3d(1, 1, 0, calc(var(--rot, 200deg) * 1.6)); opacity: .95; }
  100% { transform: translate(var(--dx), var(--dy)) rotate3d(1, 1, 0, calc(var(--rot, 200deg) * 2.6)) scale(.78); opacity: 0; }
}
/* 小皖盔屑：赤红金属光屑，四射后急收 */
.shard.shard-spark {
  width: 7px; height: 7px; border-radius: 22%;
  background: radial-gradient(circle at 40% 35%, #fff, #ffb199 45%, #e5302b 82%);
  box-shadow: 0 0 8px rgba(229, 48, 43, .8);
  animation: spark-pop .52s cubic-bezier(.2, .5, .6, 1) forwards;
}
@keyframes spark-pop {
  0% { transform: translate(0, 0) rotate(45deg) scale(.6); opacity: 1; }
  35% { transform: translate(calc(var(--dx) * .5), calc(var(--dy) * .32)) rotate(45deg) scale(1.18); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(150deg) scale(.2); opacity: 0; }
}
/* 小美花瓣：圆润粉瓣，柔柔地摆落 */
.shard.shard-petal {
  width: 8px; height: 8px; border-radius: 68% 32% 68% 32%;
  background: radial-gradient(circle at 35% 30%, #fff, #ffb7d9 55%, #ff7ab8);
  box-shadow: 0 0 7px rgba(255, 122, 184, .65);
  animation: petal-drift .9s cubic-bezier(.32, .12, .58, .88) forwards;
}
@keyframes petal-drift {
  0% { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; }
  36% { transform: translate(calc(var(--dx) * .66), calc(var(--dy) * .34)) rotate(-70deg) scale(1.02); opacity: 1; }
  68% { transform: translate(calc(var(--dx) * .38), calc(var(--dy) * .68)) rotate(-18deg) scale(.92); opacity: .92; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot, -120deg)) scale(.55); opacity: 0; }
}
/* 能量光点：JS 驱动弧线飞行（贝塞尔轨迹 + 拖尾 + 命中爆点） */
.fly-spark {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  margin: -5px 0 0 -5px;
  pointer-events: none; z-index: 60;
  background: radial-gradient(circle at 35% 30%, #fff, var(--amber) 55%, rgba(255, 154, 46, 0) 78%);
  box-shadow: 0 0 10px rgba(255, 201, 77, .9);
  will-change: transform;
}
.spark-trail {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  margin: -3px 0 0 -3px;
  pointer-events: none; z-index: 59;
  background: radial-gradient(circle, rgba(255, 224, 150, .9), rgba(255, 154, 46, 0) 72%);
  animation: trail-dot .34s ease-out forwards;
  will-change: transform, opacity;
}
.spark-trail.stagebound { background: radial-gradient(circle, rgba(255, 120, 100, .9), rgba(229, 48, 43, 0) 72%); }
@keyframes trail-dot {
  from { opacity: .9; }
  to { opacity: 0; }
}
.spark-hit {
  position: absolute; width: 26px; height: 26px; border-radius: 50%;
  margin: -13px 0 0 -13px;
  pointer-events: none; z-index: 61;
  border: 2px solid rgba(255, 224, 150, .95);
  box-shadow: 0 0 14px rgba(255, 201, 77, .9);
  animation: hit-pop .36s ease-out forwards;
}
.spark-hit.stagebound { border-color: rgba(255, 120, 100, .95); box-shadow: 0 0 14px rgba(229, 48, 43, .9); }
@keyframes hit-pop {
  from { opacity: 1; scale: .3; }
  to { opacity: 0; scale: 1.3; }
}
/* 命中目标的脉冲（HUD 分数 / 舞台进度条） */
.hud-value.surge { animation: hud-bump .3s cubic-bezier(.34, 1.5, .64, 1); }
.sp-fill.surge::after { width: 22px; filter: blur(0); }
.beam {
  position: absolute; pointer-events: none; border-radius: 8px;
  background: linear-gradient(90deg, transparent, #fff 30%, var(--amber) 50%, #fff 70%, transparent);
  box-shadow: 0 0 26px 8px rgba(255, 201, 77, .85), 0 0 60px 18px rgba(255, 154, 46, .4);
  animation: beam-fade .45s ease-out forwards;
}
.beam.v { background: linear-gradient(0deg, transparent, #fff 30%, var(--amber) 50%, #fff 70%, transparent); }
@keyframes beam-fade {
  0% { opacity: 0; transform: scaleX(.3) scaleY(.6); }
  22% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.08); }
}
/* 残影刃：跟在主光刃后半拍的弱光影 */
.beam.beam-ghost { opacity: .55; filter: blur(1.5px); }
/* 余晖光带：光刃收招后沿轨迹缓缓发亮再熄灭（三段式收尾） */
.beam-afterglow {
  position: absolute; pointer-events: none; border-radius: 12px;
  background: linear-gradient(90deg, transparent, rgba(255, 201, 77, .3) 22%, rgba(255, 224, 150, .42) 50%, rgba(255, 201, 77, .3) 78%, transparent);
  box-shadow: 0 0 30px rgba(255, 154, 46, .35);
  filter: blur(2px);
  animation: afterglow-fade 1s ease-out forwards;
}
.beam-afterglow.v {
  background: linear-gradient(0deg, transparent, rgba(255, 201, 77, .3) 22%, rgba(255, 224, 150, .42) 50%, rgba(255, 201, 77, .3) 78%, transparent);
}
@keyframes afterglow-fade {
  0% { opacity: 0; }
  22% { opacity: .4; }
  45% { opacity: 1; }
  100% { opacity: 0; }
}
/* 爆点余烬：冲击波后缓缓熄灭的暖光 */
.blast-afterglow {
  position: absolute; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 201, 77, .5), rgba(255, 90, 60, .25) 55%, transparent 72%);
  filter: blur(3px);
  animation: afterglow-fade .9s ease-out forwards;
}
/* 凤羽余晖：细长羽屑打旋飘落 */
.feather-streak {
  position: absolute; width: 5px; height: 16px; border-radius: 3px 3px 50% 50%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 122, 184, .8) 55%, rgba(229, 48, 43, .5));
  box-shadow: 0 0 8px rgba(255, 154, 46, .6);
  animation: feather-fall 1.3s cubic-bezier(.3, .2, .6, .8) forwards;
  will-change: transform, opacity;
}
@keyframes feather-fall {
  0% { transform: translate(0, 0) rotate(0); opacity: 0; }
  14% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot, 180deg)); opacity: 0; }
}
/* 锣鼓震波：鼓面波纹荡开 */
.gong-ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  border: 3px solid rgba(255, 201, 77, .85);
  box-shadow: 0 0 24px rgba(255, 201, 77, .55), inset 0 0 18px rgba(255, 154, 46, .4);
  animation: gong-ripple-grow .68s cubic-bezier(.2, .6, .4, 1) forwards;
}
@keyframes gong-ripple-grow {
  from { transform: scale(.2); opacity: 1; }
  to { transform: scale(2.6); opacity: 0; }
}
/* 大团消除冲击环 */
.clear-ring {
  position: absolute; border-radius: 50%; pointer-events: none;
  border: 2.5px solid rgba(255, 255, 255, .9);
  box-shadow: 0 0 20px rgba(255, 201, 77, .8);
  animation: ring-grow .5s ease-out forwards;
}
.beam-trail {
  position: absolute; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(255, 201, 77, .4) 60%, transparent 75%);
  animation: trail-fade .8s ease-out forwards;
}
@keyframes trail-fade {
  0% { opacity: 0; transform: scale(.2); }
  30% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.4); }
}
.blast-ring {
  position: absolute; border-radius: 50%; pointer-events: none;
  border: 4px solid rgba(255, 90, 60, .95);
  box-shadow: 0 0 30px 8px rgba(255, 90, 60, .7), inset 0 0 20px rgba(255, 154, 46, .8);
  animation: ring-grow .45s ease-out forwards;
}
@keyframes ring-grow { from { transform: scale(.15); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
.condense-ring {
  position: absolute; border-radius: 50%; pointer-events: none;
  border: 3px solid rgba(255, 224, 150, .9);
  box-shadow: 0 0 20px rgba(255, 201, 77, .8);
  animation: ring-shrink .45s ease-in forwards;
}
@keyframes ring-shrink { from { transform: scale(1.6); opacity: 0; } 35% { opacity: 1; } to { transform: scale(.2); opacity: 0; } }
.rainbow-flash {
  position: absolute; inset: 0; pointer-events: none; border-radius: 14px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .5), transparent 55%),
    conic-gradient(from 0deg, rgba(229, 48, 43, .3), rgba(255, 154, 46, .3), rgba(255, 233, 77, .3), rgba(76, 217, 100, .26), rgba(55, 198, 255, .26), rgba(176, 107, 255, .26), rgba(229, 48, 43, .3));
  animation: rainbow-flash-in .6s ease-out forwards;
  mix-blend-mode: screen;
}
@keyframes rainbow-flash-in {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0; }
}
.rainbow-sweep {
  /* 羽扇扫屏：圆盘旋转，无方角突出 */
  position: absolute; left: 50%; top: 50%; width: 120%; height: 120%;
  margin-left: -60%; margin-top: -60%;
  pointer-events: none; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 30%, rgba(0, 0, 0, 0) 31%),
    repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .32) 0deg 7deg, transparent 7deg 45deg);
  -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, .9) 20%, transparent 68%);
  mask-image: radial-gradient(circle, rgba(0, 0, 0, .9) 20%, transparent 68%);
  animation: rainbow-sweep-in .68s ease-out forwards;
  mix-blend-mode: screen;
}
@keyframes rainbow-sweep-in {
  0% { opacity: 0; transform: scale(.4) rotate(0deg); }
  28% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.1) rotate(120deg); }
}
.float-score {
  position: absolute; pointer-events: none;
  font-weight: 900; font-size: clamp(14px, 3vmin, 22px); color: var(--amber);
  text-shadow: 0 0 8px rgba(0, 0, 0, .9), 0 0 12px rgba(255, 154, 46, .8);
  animation: float-up .8s cubic-bezier(.2, .8, .4, 1) forwards;
  z-index: 40;
  font-variant-numeric: tabular-nums;
}
@keyframes float-up {
  from { transform: translateY(0) scale(.7); opacity: 0; }
  18% { opacity: 1; transform: translateY(-6px) scale(1.12); }
  100% { transform: translateY(-48px) scale(1); opacity: 0; }
}

/* ---------- 连击横幅（分档次） ---------- */
.combo-pop {
  position: absolute; left: 50%; top: -6px; transform: translateX(-50%);
  z-index: 50; pointer-events: none;
  font-family: var(--font-brush); font-weight: 900;
  font-size: clamp(20px, 5vmin, 34px);
  color: #fff; text-shadow: 0 0 14px var(--red), 0 0 30px var(--orange);
  opacity: 0;
  white-space: nowrap;
}
.combo-pop.show { animation: combo-in .8s ease-out forwards; }
@keyframes combo-in {
  0% { opacity: 0; transform: translateX(-50%) scale(.4); }
  25% { opacity: 1; transform: translateX(-50%) scale(1.25); }
  55% { transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-18px) scale(1); }
}
.combo-pop[data-tier="2"] {
  font-size: clamp(24px, 5.8vmin, 40px);
  color: var(--amber);
  text-shadow: 0 0 14px var(--orange), 0 0 34px var(--red), 0 2px 2px rgba(0, 0, 0, .8);
}
.combo-pop[data-tier="3"] {
  font-size: clamp(28px, 6.8vmin, 48px);
  background: linear-gradient(180deg, #fff 20%, var(--amber) 55%, var(--orange) 90%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(255, 154, 46, .95)) drop-shadow(0 0 40px rgba(229, 48, 43, .7));
}
.combo-pop[data-tier="3"].show { animation: combo-in-big .9s ease-out forwards; }
/* ×5+ 档：字后放射金芒，宣传片级仪式感 */
.combo-pop[data-tier="3"]::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 3.4em; height: 3.4em;
  transform: translate(-50%, -50%); z-index: -1; border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 224, 150, .5), transparent 60%),
    repeating-conic-gradient(rgba(255, 201, 77, .55) 0deg 6deg, transparent 6deg 30deg);
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%);
  mask-image: radial-gradient(circle, #000 30%, transparent 70%);
  animation: combo-rays .9s ease-out forwards;
}
@keyframes combo-rays {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(0deg); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5) rotate(40deg); }
}
@keyframes combo-in-big {
  0% { opacity: 0; transform: translateX(-50%) scale(.3) rotate(-6deg); }
  22% { opacity: 1; transform: translateX(-50%) scale(1.45) rotate(2deg); }
  50% { transform: translateX(-50%) scale(1) rotate(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-24px) scale(1.05); }
}

/* ---------- 技能横幅：必杀技字幕 ---------- */
.skill-toast {
  position: fixed; left: 50%; top: 16%; transform: translateX(-50%) scale(.6);
  z-index: 200; pointer-events: none; opacity: 0;
  font-family: var(--font-brush); font-size: clamp(20px, 5.5vmin, 34px); font-weight: 900;
  letter-spacing: .18em; color: #fff; white-space: nowrap;
  padding: .38em 1.6em;
  background:
    linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .16) 48%, transparent 62%) no-repeat,
    linear-gradient(90deg, transparent, rgba(92, 13, 10, .95) 12%, rgba(163, 20, 16, .95) 38%, rgba(229, 48, 43, .95) 50%, rgba(163, 20, 16, .95) 62%, rgba(92, 13, 10, .95) 88%, transparent);
  background-size: 260% 100%, 100% 100%;
  background-position: 130% 0, 0 0;
  border-top: 1.5px solid rgba(255, 224, 150, .9); border-bottom: 1.5px solid rgba(255, 224, 150, .9);
  text-shadow:
    0 0 4px rgba(255, 255, 255, .5),
    0 0 14px rgba(255, 154, 46, .95),
    0 2px 3px rgba(60, 0, 0, .9);
  box-shadow: 0 0 34px rgba(229, 48, 43, .45), 0 10px 30px rgba(0, 0, 0, .5);
}
.skill-toast::before, .skill-toast::after {
  content: ""; position: absolute; top: 50%; width: 3.2em; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  box-shadow: 0 0 10px rgba(255, 201, 77, .9);
}
.skill-toast::before { right: 100%; }
.skill-toast::after { left: 100%; }
.skill-toast.show { animation: toast-in 1.15s cubic-bezier(.2, .9, .3, 1) forwards; }
@keyframes toast-in {
  0% { opacity: 0; transform: translateX(-50%) scale(1.9); filter: brightness(4) blur(2px); background-position: 130% 0, 0 0; }
  16% { opacity: 1; transform: translateX(-50%) scale(1); filter: brightness(1.6) blur(0); }
  30% { filter: brightness(1); background-position: -50% 0, 0 0; }
  82% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.04) translateY(-8px); }
}

/* ---------- 底部：动作栏（主动技 + 道具） + 旁白条 ---------- */
.game-foot {
  width: 100%; max-width: 640px; padding: 4px 16px 12px;
  display: flex; align-items: stretch; gap: 10px;
}
.action-bar { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.skill-btn {
  position: relative;
  width: 60px; height: 60px; border-radius: 50%;
  border: none; cursor: pointer; padding: 0;
  background: linear-gradient(160deg, #262636, var(--ink-2));
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .12);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: transform .15s;
  -webkit-tap-highlight-color: transparent;
}
.skill-btn:active { transform: scale(.94); }
/* 充能环：conic 渐变按 --charge 填充 + 表盘刻度（成品仪表感） */
.skill-btn .skill-ring {
  position: absolute; inset: -3px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(var(--orange) calc(var(--charge, 0) * 360deg), rgba(247, 242, 232, .14) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  transition: background .2s;
}
.skill-btn::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(rgba(11, 11, 16, .9) 0deg 2deg, transparent 2deg 45deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
}
.skill-btn img {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; border: 1.5px solid rgba(229, 48, 43, .7);
  pointer-events: none;
}
.skill-btn .skill-name {
  position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
  font-size: .56rem; font-weight: 800; letter-spacing: .02em; white-space: nowrap;
  color: var(--gold); text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 8px rgba(0, 0, 0, .8);
  background: rgba(11, 11, 16, .85);
  border: 1px solid rgba(255, 201, 77, .35);
  border-radius: 8px; padding: 1px 6px;
  pointer-events: none;
}
/* 充能满：呼吸金光 + 图标微弹（动画只作用于子元素，按钮本体保持稳定可点） */
.skill-btn[data-skill-ready="1"] .skill-ring {
  background: conic-gradient(#fff, var(--amber), var(--orange), var(--red), var(--amber), #fff);
  animation: skill-ring-spin 1.6s linear infinite;
}
.skill-btn[data-skill-ready="1"] img {
  border-color: var(--gold);
  box-shadow: 0 0 16px rgba(255, 201, 77, .95), 0 0 34px rgba(255, 154, 46, .5);
  animation: skill-ready-bounce 1.4s ease-in-out infinite;
}
@keyframes skill-ready-bounce { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2px) scale(1.05); } }
@keyframes skill-ring-spin { to { transform: rotate(360deg); } }
/* 充能完成的一次性爆闪环（区别于常驻呼吸金光） */
.skill-btn.just-ready::before {
  content: ""; position: absolute; inset: -5px; border-radius: 50%; pointer-events: none;
  border: 2.5px solid rgba(255, 224, 150, .95);
  box-shadow: 0 0 26px rgba(255, 201, 77, .95), inset 0 0 18px rgba(255, 201, 77, .7);
  animation: ready-burst .8s ease-out forwards;
}
@keyframes ready-burst {
  0% { opacity: 1; transform: scale(.6); }
  100% { opacity: 0; transform: scale(1.8); }
}
/* 未充满点击：左右轻晃提示 */
.skill-btn.nudge { animation: skill-nudge .3s ease-in-out; }
@keyframes skill-nudge { 25% { transform: translateX(-4px); } 65% { transform: translateX(4px); } }
.item-btn {
  position: relative;
  width: 48px; height: 48px; border-radius: 14px;
  border: 1px solid rgba(247, 242, 232, .25); cursor: pointer;
  background:
    radial-gradient(ellipse 90% 46% at 50% 4%, rgba(255, 255, 255, .12), transparent 62%),
    linear-gradient(160deg, #262636, var(--ink-2));
  color: var(--paper);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -5px 10px rgba(0, 0, 0, .35);
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s, border-color .15s, opacity .2s;
  -webkit-tap-highlight-color: transparent;
}
.item-btn svg { width: 55%; height: 55%; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
.item-btn:hover { border-color: var(--orange); transform: translateY(-1px); }
.item-btn:active { transform: scale(.93); }
.item-btn:disabled { opacity: .32; cursor: not-allowed; filter: grayscale(.7); }
.item-btn .item-count {
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; border-radius: 9px;
  font-size: .68rem; font-weight: 900; line-height: 18px; text-align: center;
  color: #fff; background: linear-gradient(160deg, #ff5346, var(--red-deep));
  border: 1px solid rgba(255, 220, 180, .7);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
  pointer-events: none;
}
.item-btn.armed {
  border-color: var(--gold);
  box-shadow: 0 0 16px rgba(255, 201, 77, .8), inset 0 0 10px rgba(255, 201, 77, .3);
  animation: armed-pulse 1.2s ease-in-out infinite;
}
@keyframes armed-pulse {
  50% { box-shadow: 0 0 26px rgba(255, 201, 77, 1), inset 0 0 14px rgba(255, 201, 77, .5); }
}
.item-btn.armed svg { animation: skill-ready-bounce 1s ease-in-out infinite; }
.narrator-bar {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, rgba(26, 26, 37, .92), rgba(15, 15, 23, .92));
  border: 1px solid rgba(255, 201, 77, .18);
  border-radius: 14px; padding: 8px 14px; min-height: 48px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.narrator-bar img {
  width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--red);
  object-fit: cover; flex: 0 0 auto;
  box-shadow: 0 0 10px rgba(229, 48, 43, .45);
  animation: avatar-idle 3.4s ease-in-out infinite;
}
@keyframes avatar-idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.narrator-bar span {
  font-size: .85rem; line-height: 1.45; color: rgba(247, 242, 232, .85);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- 连击档位特效层 ---------- */
#edge-fx { position: fixed; inset: 0; z-index: 180; pointer-events: none; }
#edge-fx.zap::before {
  content: ""; position: absolute; inset: 0;
  box-shadow:
    inset 0 0 34px rgba(255, 154, 46, .55),
    inset 0 0 90px rgba(229, 48, 43, .3);
  animation: edge-zap-in .65s ease-out forwards;
}
@keyframes edge-zap-in {
  0% { opacity: 0; }
  18% { opacity: 1; }
  46% { opacity: .55; }
  62% { opacity: .85; }
  100% { opacity: 0; }
}
#edge-fx.mega::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 46%, rgba(255, 255, 255, .55), rgba(255, 224, 150, .25) 55%, transparent 78%);
  animation: mega-flash .4s ease-out forwards;
}
@keyframes mega-flash {
  0% { opacity: 0; }
  22% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- 机制标签 ---------- */
.goal-chip.mech-chip {
  border-color: rgba(176, 107, 255, .55);
  color: #d8b8ff;
  font-family: var(--font-brush);
  letter-spacing: .1em;
  box-shadow: 0 0 12px rgba(176, 107, 255, .25), inset 0 1px 0 rgba(255, 255, 255, .07);
  padding: 4px 12px;
}
.lv-mech {
  font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  color: #d8b8ff; background: rgba(176, 107, 255, .14);
  border: 1px solid rgba(176, 107, 255, .5); border-radius: 999px;
  padding: 2px 9px;
}
.select-skill {
  font-size: .78rem; line-height: 1.5; color: var(--amber);
  background: rgba(255, 154, 46, .08);
  border: 1px dashed rgba(255, 154, 46, .4); border-radius: 10px;
  padding: 6px 10px;
}
.dex-passive { color: var(--amber) !important; font-size: .8rem !important; }

/* ---------- 弹窗 ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 100;
  display: none; align-items: center; justify-content: center;
  background: rgba(6, 6, 10, .78); backdrop-filter: blur(7px);
  padding: 20px;
}
.overlay.active { display: flex; animation: overlay-in .3s ease both; }
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
.dialog {
  position: relative;
  width: min(94vw, 460px); max-height: 88vh; overflow-y: auto;
  background:
    radial-gradient(circle at 88% 6%, rgba(255, 201, 77, .08), transparent 40%),
    linear-gradient(165deg, #2a1c26, #16121d 55%, #1c1017);
  border: 1px solid rgba(255, 201, 77, .4); border-radius: 20px;
  padding: 28px 24px 22px; text-align: center;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, .85),
    0 0 0 3px rgba(20, 10, 4, .8),
    0 0 0 4.5px rgba(200, 160, 90, .5),
    var(--glow-red);
  animation: dialog-in .42s cubic-bezier(.34, 1.4, .64, 1) both;
}
@keyframes dialog-in {
  from { opacity: 0; transform: scale(.82) translateY(26px); filter: brightness(1.6); }
  to { opacity: 1; transform: none; filter: brightness(1); }
}
.dialog-deco {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 140px; height: 5px; border-radius: 0 0 6px 6px;
  background: linear-gradient(90deg, var(--red), var(--gold) 50%, var(--red));
  box-shadow: var(--glow-orange);
}
.dialog-title {
  font-family: var(--font-brush); font-size: 1.5rem; letter-spacing: .1em; margin-bottom: 4px;
  background: linear-gradient(178deg, #fff3d4 15%, var(--gold) 48%, #c19a5c 72%, #ffe9b8 95%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .85));
}
.dialog-place { color: var(--red); font-size: .82rem; letter-spacing: .25em; margin-bottom: 4px; text-shadow: 0 0 10px rgba(229, 48, 43, .4); }
/* 关卡主题曲名：小字点题（每关不同调式音色的可读线索） */
.dialog-bgm {
  color: rgba(255, 201, 77, .78); font-size: .72rem; letter-spacing: .18em; margin-bottom: 10px;
  text-shadow: 0 0 8px rgba(255, 154, 46, .35);
}
.dialog-bgm:empty { display: none; }
.dialog-desc { font-size: .9rem; line-height: 1.7; color: rgba(247, 242, 232, .8); margin-bottom: 12px; }
.intro-narration { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.narr-line { display: flex; gap: 10px; align-items: flex-start; text-align: left; }
.narr-line img {
  width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--red);
  object-fit: cover; flex: 0 0 auto;
  box-shadow: 0 0 8px rgba(229, 48, 43, .4);
}
.narr-line.mei img { border-color: var(--orange); box-shadow: 0 0 8px rgba(255, 154, 46, .4); }
.narr-line .narr-bubble {
  background: linear-gradient(160deg, #232331, #191924);
  border: 1px solid rgba(247, 242, 232, .14);
  border-radius: 4px 14px 14px 14px; padding: 8px 12px;
  font-size: .84rem; line-height: 1.55; color: rgba(247, 242, 232, .85);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
}
.narr-line .narr-bubble b { color: var(--amber); margin-right: 6px; font-family: var(--font-brush); }
.dialog-goals { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.dialog-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
/* 结算/确认弹窗按钮层级：主按钮通栏在上，次按钮居中，ghost 收尾 */
.result-btns { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 2px; }
.result-btns .btn { width: 100%; }
.result-btns .btn-primary { font-size: 1.08rem; padding: .85em 2em; }
.result-btns .btn-ghost { padding: .55em 1em; font-size: .85rem; letter-spacing: .14em; }
.dialog-sm { width: min(92vw, 360px); }
.result-char {
  /* 结算立绘改用透明帧动画姿势图（胜=cheer 帧 / 负=sad 帧） */
  width: 136px; margin: 4px auto 2px; display: block;
  filter: drop-shadow(0 10px 22px rgba(229, 48, 43, .5)) drop-shadow(0 0 14px rgba(255, 154, 46, .3));
  animation: result-char-in .6s cubic-bezier(.34, 1.5, .64, 1) both;
}
@keyframes result-char-in {
  from { opacity: 0; transform: translateY(20px) scale(.7); }
  to { opacity: 1; transform: none; }
}
.result-char-shadow {
  width: 90px; height: 12px; margin: -4px auto 8px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(229, 48, 43, .4), transparent 70%);
  filter: blur(3px);
}
/* 胜利结算：角色身后一轮缓转金芒，把「救援成功」拍成海报 */
#overlay-result .dialog[data-result="win"] .result-char { position: relative; z-index: 1; }
#overlay-result .dialog[data-result="win"]::before {
  content: ""; position: absolute; top: 14px; left: 50%; width: 250px; height: 250px;
  margin-left: -125px; pointer-events: none; z-index: 0; border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 224, 150, .28), transparent 58%),
    repeating-conic-gradient(rgba(255, 201, 77, .32) 0deg 9deg, transparent 9deg 30deg);
  -webkit-mask-image: radial-gradient(circle, #000 28%, transparent 68%);
  mask-image: radial-gradient(circle, #000 28%, transparent 68%);
  animation: result-rays 16s linear infinite;
}
@keyframes result-rays { to { transform: rotate(360deg); } }
/* 失败结算：立绘降饱和收温，挫败但不阴间 */
#overlay-result .dialog[data-result="lose"] .result-char {
  filter: saturate(.6) brightness(.88) drop-shadow(0 10px 22px rgba(0, 0, 0, .6)) drop-shadow(0 0 10px rgba(120, 90, 90, .35));
}
.result-stars { font-size: 2.2rem; letter-spacing: .18em; margin-bottom: 6px; min-height: 2.6rem; }
.result-stars .on {
  display: inline-block;
  background: linear-gradient(178deg, #fffce8 15%, var(--amber) 50%, var(--orange) 85%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(255, 201, 77, .9)) drop-shadow(0 0 26px rgba(255, 154, 46, .5));
  animation: star-pop .5s cubic-bezier(.34, 1.7, .64, 1) both;
}
.result-stars .on:nth-child(2) { animation-delay: .22s; }
.result-stars .on:nth-child(3) { animation-delay: .44s; }
.result-stars .off { color: rgba(247, 242, 232, .18); }
@keyframes star-pop {
  from { transform: scale(0) rotate(-60deg); }
  60% { transform: scale(1.35) rotate(8deg); }
  to { transform: scale(1) rotate(0); }
}
.result-score { font-size: 1.15rem; font-weight: 800; color: #fff; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.result-score b { color: var(--orange); font-size: 1.3em; text-shadow: 0 0 12px rgba(255, 154, 46, .6); }
/* 步数奖励明细：进结算面板而非对局中弹横幅（横幅会盖住胜利相拥演出） */
.result-bonus {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  color: rgba(255, 214, 140, .85); margin-top: 2px;
}

/* 结算彩带 */
.confetti {
  position: absolute; top: -6%; width: 9px; height: 14px; border-radius: 3px;
  pointer-events: none; opacity: 0;
  animation: confetti-fall var(--dur, 1.6s) ease-in var(--delay, 0s) forwards;
  will-change: transform, opacity;
}
@keyframes confetti-fall {
  0% { opacity: 0; transform: translate(0, 0) rotate(0); }
  8% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 0), 112vh) rotate(var(--rot, 500deg)); }
}

/* ==========================================================
   选角屏：选谁出战，谁就去救另一个
   ========================================================== */
.select-sub {
  color: var(--amber); font-size: .9rem; letter-spacing: .12em; text-align: center;
  padding: 2px 24px 10px; text-shadow: 0 0 12px rgba(255, 154, 46, .4);
}
.select-cards {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
  gap: 20px; width: 100%; max-width: 920px; padding: 8px 20px 50px;
}
.select-card {
  position: relative; flex: 1 1 320px; max-width: 420px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--font-ui); color: var(--paper); text-align: center;
  background:
    radial-gradient(circle at 85% 8%, rgba(255, 201, 77, .07), transparent 42%),
    linear-gradient(105deg, rgba(255, 255, 255, .04) 0%, transparent 45%),
    var(--lacquer);
  border: 1.5px solid rgba(255, 201, 77, .3); border-radius: 20px;
  padding: 20px 18px 18px; cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .07);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.select-card:hover {
  transform: translateY(-5px);
  border-color: var(--orange);
  box-shadow: var(--glow-orange), 0 16px 38px rgba(0, 0, 0, .6);
}
.select-card:active { transform: translateY(-2px) scale(.985); }
.select-figure { position: relative; }
.select-figure img {
  width: min(52vw, 230px); border-radius: 16px; display: block;
  border: 1px solid rgba(255, 154, 46, .4);
  box-shadow: var(--glow-red), 0 12px 30px rgba(0, 0, 0, .6);
  animation: hero-idle 4.6s ease-in-out infinite;
}
/* 立绘脚下接触光：光池随浮动同步呼吸 */
.select-figure::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -12px; height: 22px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse, rgba(255, 170, 90, .5), rgba(229, 48, 43, .2) 55%, transparent 72%);
  filter: blur(6px);
  animation: shadow-breathe 4.6s ease-in-out infinite;
}
.select-card[data-pick="mei"] .select-figure::after { animation-delay: 2.3s; }
.select-card[data-pick="mei"] .select-figure img { animation-delay: 2.3s; }
.select-figure .seal-badge { position: absolute; top: 10px; left: 10px; }
.select-card h3 {
  font-family: var(--font-brush); font-size: 1.55rem; letter-spacing: .12em;
  color: var(--gold); text-shadow: 0 0 14px rgba(255, 201, 77, .4), 0 1px 2px rgba(0, 0, 0, .9);
}
.select-card h3 small { display: block; font-family: var(--font-ui); font-size: .74rem; letter-spacing: .18em; color: rgba(247, 242, 232, .55); margin-top: 4px; }
.select-card p { font-size: .84rem; line-height: 1.65; color: rgba(247, 242, 232, .72); }
.select-cta {
  display: inline-block; margin-top: 4px;
  font-weight: 800; font-size: .95rem; letter-spacing: .12em; color: #fff;
  background: linear-gradient(160deg, #ff5346, var(--red) 40%, var(--red-deep));
  border: 1px solid rgba(255, 220, 180, .65); border-radius: 999px;
  padding: .55em 1.5em;
  text-shadow: 0 1px 3px rgba(90, 0, 0, .6);
  box-shadow: var(--glow-red), inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -6px 14px rgba(90, 0, 0, .4);
}
.select-card:hover .select-cta { box-shadow: 0 0 18px rgba(229, 48, 43, .95), 0 0 40px rgba(229, 48, 43, .45), inset 0 1px 0 rgba(255, 255, 255, .4); }
/* 选中演出：金边充能 + 底座光，短暂停留再转场 */
.select-card.picked {
  border-color: var(--gold);
  transform: translateY(-6px) scale(1.015);
  box-shadow:
    0 0 0 2.5px rgba(255, 201, 77, .9),
    0 0 36px rgba(255, 154, 46, .55),
    0 18px 40px rgba(0, 0, 0, .6);
}
.select-card.picked::after {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: -14px; height: 26px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 201, 77, .65), transparent 70%);
  filter: blur(6px);
  animation: picked-glow .32s ease-out;
}
@keyframes picked-glow { from { opacity: 0; transform: scaleX(.5); } }
.select-card.picked .select-cta {
  background: linear-gradient(160deg, #ffd76e, var(--orange) 45%, #c96a10);
  border-color: #fff; color: #2a1102; text-shadow: none;
  box-shadow: 0 0 20px rgba(255, 201, 77, .95), inset 0 1px 0 rgba(255, 255, 255, .5);
}

/* 关卡地图：当前英雄栏（与关卡卡片同一漆器材质，融入布局） */
.map-hero-bar {
  display: flex; align-items: center; gap: 10px;
  width: 100%; max-width: 560px; margin: 0 auto 6px; padding: 8px 14px;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, .04) 0%, transparent 40%),
    var(--lacquer);
  border: 1px solid rgba(255, 201, 77, .22); border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .07);
}
@media (max-width: 600px) { .map-hero-bar { max-width: calc(100% - 40px); } }
.map-hero-bar img {
  width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--red);
  object-fit: cover; flex: 0 0 auto;
  box-shadow: 0 0 10px rgba(229, 48, 43, .5);
}
.map-hero-text { font-size: .88rem; font-weight: 700; letter-spacing: .06em; color: rgba(247, 242, 232, .9); }
.btn-mini { margin-left: auto; padding: .45em 1.1em; font-size: .8rem; letter-spacing: .1em; border-radius: 999px; }

/* ==========================================================
   顶部救援舞台：英雄从左接近，被困伙伴在右侧高台
   ========================================================== */
.rescue-stage {
  position: relative;
  width: min(100% - 24px, 640px);
  height: var(--stage-h);
  margin: 2px auto 4px;
  border-radius: 16px;
  overflow: hidden;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 201, 77, .3);
  background: linear-gradient(180deg, #131320, #0d0d14);
  box-shadow:
    0 12px 34px rgba(0, 0, 0, .55),
    0 0 0 3px rgba(20, 10, 4, .8),
    0 0 0 4px rgba(200, 160, 90, .4),
    inset 0 0 40px rgba(0, 0, 0, .5);
}
.rescue-stage.stage-shake { animation: stage-shake .32s; }
@keyframes stage-shake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-3px, 2px); }
  55% { transform: translate(3px, -2px); }
  80% { transform: translate(-2px, -1px); }
}

/* 舞台背景：复用关卡图但取更低视角 + 压暗，突出角色 */
.stage-bg {
  position: absolute; inset: -4%;
  background-size: cover; background-position: center 20%;
  opacity: .62; filter: saturate(1.05);
  animation: bg-drift 40s ease-in-out infinite alternate;
}
.theme-lv1 .stage-bg { background-image: url(../assets/bg-lv1.jpg?v=r3); }
.theme-lv2 .stage-bg { background-image: url(../assets/bg-lv2.jpg?v=r3); }
.theme-lv3 .stage-bg { background-image: url(../assets/bg-lv3.jpg?v=r3); }
.theme-lv4 .stage-bg { background-image: url(../assets/bg-lv4.jpg?v=r3); }
.theme-lv5 .stage-bg { background-image: url(../assets/bg-lv5.jpg?v=r3); }
.rescue-stage::before {
  /* 压暗渐晕，保证角色与进度条可读 */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(8, 8, 12, .78) 0%, rgba(8, 8, 12, .18) 34%, rgba(8, 8, 12, .12) 62%, rgba(8, 8, 12, .66) 100%),
    radial-gradient(ellipse 130% 90% at 50% 40%, transparent 50%, rgba(5, 5, 8, .5) 100%);
  pointer-events: none;
}
.stage-mist {
  position: absolute; left: -30%; width: 160%; height: 46%; z-index: 2;
  background: radial-gradient(ellipse 44% 60% at 34% 50%, rgba(247, 242, 232, .07), transparent 70%),
              radial-gradient(ellipse 38% 52% at 70% 45%, rgba(255, 154, 46, .07), transparent 70%);
  pointer-events: none; will-change: transform;
}
.stage-mist-1 { top: 44%; animation: fog-drift 30s linear infinite; }
.stage-mist-2 { bottom: -6%; animation: fog-drift 44s linear infinite reverse; }

/* 舞台标题 + 救援进度 */
.stage-head {
  position: absolute; top: 0; left: 0; right: 0; z-index: 7;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 8px 12px 0;
}
.stage-title {
  font-family: var(--font-brush); font-size: clamp(1rem, 2.6vmin, 1.3rem); letter-spacing: .16em;
  background: linear-gradient(178deg, #fff3d4 15%, var(--gold) 48%, #c19a5c 72%, #ffe9b8 95%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .95)) drop-shadow(0 0 12px rgba(255, 201, 77, .3));
  white-space: nowrap; flex: 0 0 auto; padding-top: 1px;
}
.stage-progress { flex: 1; min-width: 0; }
.sp-track {
  position: relative; height: 10px; border-radius: 6px;
  background: linear-gradient(180deg, #0a0a10, #191924);
  border: 1px solid rgba(255, 201, 77, .35);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .8), 0 0 10px rgba(229, 48, 43, .18);
  overflow: hidden;
}
.sp-fill {
  position: relative; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--red-deep), var(--red) 55%, var(--orange));
  box-shadow: var(--glow-orange);
  transition: width .5s cubic-bezier(.3, .9, .4, 1);
}
.sp-fill::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, transparent 0 7px, rgba(255, 255, 255, .14) 7px 10px);
  background-size: 34px 100%;
  animation: fill-stripes 1.1s linear infinite;
}
.sp-fill::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 12px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9));
  filter: blur(1px);
}
.sp-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.sp-nodes { display: flex; justify-content: space-between; flex: 1; }
.sp-node {
  font-size: .62rem; letter-spacing: .12em; color: rgba(247, 242, 232, .38);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
  transition: color .3s, text-shadow .3s;
}
.sp-node.on { color: var(--amber); text-shadow: 0 0 8px rgba(255, 201, 77, .8), 0 1px 2px rgba(0, 0, 0, .9); }
.sp-pct {
  font-size: .66rem; font-weight: 800; color: var(--amber); letter-spacing: .04em;
  font-variant-numeric: tabular-nums; text-shadow: 0 0 8px rgba(255, 154, 46, .6), 0 1px 2px rgba(0, 0, 0, .9);
  min-width: 2.4em; text-align: right;
}

/* 舞台场景与角色（角色可点击互动） */
.stage-scene { position: absolute; inset: 0; z-index: 3; }
/* 天光束：从右上斜落的两道柔光，把被困处打亮（唯美景深层） */
.stage-scene::before {
  content: ""; position: absolute; inset: -6% -2%; pointer-events: none; z-index: 0;
  background:
    linear-gradient(112deg, transparent 56%, rgba(255, 214, 150, .12) 66%, transparent 76%),
    linear-gradient(104deg, transparent 66%, rgba(255, 240, 214, .1) 74%, transparent 84%);
  mix-blend-mode: screen;
  animation: godray-breathe 7s ease-in-out infinite;
}
@keyframes godray-breathe {
  0%, 100% { opacity: .55; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(1.5%); }
}
/* 舞台脚光：底缘一条暖色地灯，让角色「站进光里」 */
.stage-scene::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2%; height: 30%;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 34% 62% at 74% 96%, rgba(255, 170, 90, .3), transparent 72%),
    radial-gradient(ellipse 120% 80% at 50% 108%, rgba(255, 120, 70, .16), transparent 70%);
  mix-blend-mode: screen;
}
.stage-actor { position: absolute; pointer-events: auto; cursor: pointer; }
/* 英雄接触光：脚下暖色光池随英雄一起移动 */
.stage-hero::before {
  content: ""; position: absolute; left: 2%; right: 2%; bottom: -9%; height: 22%;
  pointer-events: none; z-index: 0; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 190, 110, .4), rgba(255, 120, 70, .14) 55%, transparent 72%);
  filter: blur(4px);
  animation: aura-breathe 2.6s ease-in-out infinite;
}
/* 被困者暖光：受困处一团局部暖光，视线自然落在她身上 */
.stage-rescuee::before {
  content: ""; position: absolute; inset: -22% -30%;
  pointer-events: none; z-index: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(255, 200, 130, .26), rgba(255, 130, 80, .1) 55%, transparent 72%);
  filter: blur(6px);
  animation: aura-breathe 3.4s ease-in-out infinite;
}
.stage-actor .actor-img {
  position: relative; z-index: 2;
  width: 100%; display: block;
  /* 双层光：投影落地 + 暖色 rim light 把角色从背景里勾出来 */
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .55)) drop-shadow(0 0 14px rgba(229, 48, 43, .25)) drop-shadow(0 -1px 8px rgba(255, 186, 110, .22));
}
/* 帧间 crossfade：上一帧在 ghost 层淡出（由 anim.js 驱动透明度） */
.actor-ghost {
  position: absolute; left: 0; top: 0; width: 100%; z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .55)) drop-shadow(0 0 14px rgba(229, 48, 43, .25));
}
/* 分层动画：能量光环（异步慢闪）+ 接地光影（随浮动同步呼吸） */
.actor-aura {
  position: absolute; left: 8%; right: 8%; top: 12%; bottom: 6%; z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 55%, rgba(255, 154, 46, .3), rgba(229, 48, 43, .14) 55%, transparent 72%);
  filter: blur(6px);
  animation: aura-breathe 2.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes aura-breathe {
  0%, 100% { opacity: .5; transform: scale(.96); }
  50% { opacity: .95; transform: scale(1.06); }
}
.actor-shadow {
  position: absolute; left: 18%; right: 18%; bottom: -5%; height: 9%; z-index: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .5), transparent 70%);
  filter: blur(2px);
  animation: shadow-breathe 2.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shadow-breathe {
  0%, 100% { transform: scaleX(1); opacity: .8; }
  50% { transform: scaleX(.86); opacity: .55; }
}
.stage-hero {
  left: calc(var(--hx, 4%) + var(--dash, 0%)); bottom: 4%; z-index: 5;
  width: clamp(64px, 30%, 132px);
  transition: left .9s cubic-bezier(.22, .9, .32, 1);
}
.stage-hero .actor-img { animation: actor-bob 2.6s ease-in-out infinite; }
@keyframes actor-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5%); }
}
/* 推进中：前倾姿态 + 尾流速度线 */
.stage-hero.moving .actor-img { animation: actor-lean 0.9s ease-out; }
@keyframes actor-lean {
  0% { transform: rotate(0) translateY(0); }
  30% { transform: rotate(5deg) translateX(3%) translateY(-3%); }
  100% { transform: rotate(0) translateY(0); }
}
.wing-trail {
  position: absolute; right: 78%; top: 34%; width: 90%; height: 38%; z-index: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255, 154, 46, .55)) no-repeat 0 12% / 100% 12%,
    linear-gradient(90deg, transparent, rgba(255, 201, 77, .4)) no-repeat 0 52% / 84% 10%,
    linear-gradient(90deg, transparent, rgba(255, 255, 255, .3)) no-repeat 12% 88% / 68% 8%;
  opacity: 0; pointer-events: none;
  filter: blur(1px);
  transition: opacity .3s;
}
.stage-hero.moving .wing-trail,
.stage-hero.skill-dash .wing-trail,
.rescue-stage.final-dash .wing-trail { opacity: 1; animation: trail-flicker .5s linear infinite; }
@keyframes trail-flicker { 50% { opacity: .55; } }
/* 必杀预备动作：收翅蓄力（squash）再爆发 */
.stage-hero.anticipate .actor-img { animation: anticipate-squash .16s ease-in forwards; }
@keyframes anticipate-squash {
  to { transform: scale(.86, .92) translateY(6%) rotate(-4deg); filter: brightness(1.4) drop-shadow(0 8px 12px rgba(0, 0, 0, .55)); }
}
/* 主动技冲刺：更快的位移曲线 */
.stage-hero.skill-dash { transition: left .5s cubic-bezier(.5, 0, .2, 1); }
/* 胜利终段：加速俯冲（ease-in 加速度）*/
.rescue-stage.final-dash .stage-hero { transition: left .55s cubic-bezier(.6, .04, .9, .5); }
/* 接触停顿：双人挤压弹一下 */
.stage-actor.impact .actor-img { animation: impact-squash .4s cubic-bezier(.34, 1.6, .64, 1); }
@keyframes impact-squash {
  0% { transform: scale(1.12, .84); }
  55% { transform: scale(.94, 1.08); }
  100% { transform: scale(1); }
}
.stage-impact {
  position: absolute; left: 56%; top: 30%; width: 26%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(255, 201, 77, .5) 45%, transparent 70%);
  animation: impact-flash .5s ease-out forwards;
  mix-blend-mode: screen;
}
@keyframes impact-flash {
  0% { opacity: 0; transform: scale(.3); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.6); }
}
.stage-rescuee {
  right: 4%; bottom: 26%; z-index: 4;
  width: clamp(56px, 25%, 112px);
}
/* 被困者挣扎幅度随英雄接近升级（--agit 0→1 时更快更急） */
.stage-rescuee .actor-img {
  animation: rescuee-shiver calc(3.4s - 1.9s * var(--agit, 0)) ease-in-out infinite;
}
@keyframes rescuee-shiver {
  0%, 100% { transform: translateY(0) rotate(0); }
  30% { transform: translateY(calc(-2% - 2.5% * var(--agit, 0))) rotate(calc(-1.2deg - 1.6deg * var(--agit, 0))); }
  65% { transform: translateY(1%) rotate(calc(1deg + 1.2deg * var(--agit, 0))); }
}
/* 小美护盾：被困者金色光环 */
.shield-halo {
  position: absolute; inset: -14% -18%; z-index: 3;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 224, 150, .95);
  background: radial-gradient(circle, rgba(255, 201, 77, .12) 45%, rgba(255, 201, 77, .26) 68%, transparent 72%);
  box-shadow: 0 0 22px rgba(255, 201, 77, .7), inset 0 0 20px rgba(255, 224, 150, .5);
  opacity: 0; transform: scale(.6);
  transition: opacity .3s, transform .4s cubic-bezier(.34, 1.5, .64, 1);
  pointer-events: none;
}
.stage-rescuee.shielded .shield-halo { opacity: 1; transform: scale(1); animation: field-pulse 1.6s ease-in-out infinite; }
/* 点击互动的高光反馈 */
.stage-actor:active .actor-img { filter: brightness(1.35) drop-shadow(0 8px 12px rgba(0, 0, 0, .55)); }
.hero-bubble { right: auto; left: 6%; border-radius: 10px 10px 10px 2px; transform-origin: bottom left; }
/* 锣鼓惊变：全舞台猛震 + 金光闪 */
.rescue-stage.gong-hit { animation: gong-shake .5s; }
@keyframes gong-shake {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-5px, 3px) rotate(-.4deg); }
  35% { transform: translate(5px, -3px) rotate(.4deg); }
  55% { transform: translate(-3px, -2px); }
  75% { transform: translate(2px, 2px); }
}
.rescue-stage.gong-hit::after {
  content: ""; position: absolute; inset: 0; z-index: 8; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255, 201, 77, .4), transparent 62%);
  animation: rescued-flash .8s ease-out forwards;
}
/* 超高连击的舞台高光 */
.rescue-stage.hype .stage-scene { filter: brightness(1.22) saturate(1.18); transition: filter .15s; }

/* 被困平台：每关一种情境（简单层叠精灵） */
.stage-perch { position: absolute; right: 0; bottom: 0; width: 33%; height: 28%; z-index: 3; }
.stage-perch::before { content: ""; position: absolute; inset: 0; }
.stage-perch::after { content: ""; position: absolute; }
/* 合肥夜湖：码头钢架高台（斜撑桁架纹理 + 一排码头灯珠） */
[data-trap="dock"] .stage-perch::before {
  background:
    repeating-linear-gradient(116deg, transparent 0 13px, rgba(55, 198, 255, .1) 13px 15px),
    repeating-linear-gradient(64deg, transparent 0 13px, rgba(55, 198, 255, .06) 13px 15px),
    linear-gradient(180deg, #262636 0%, #15151e 60%);
  clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
  border-top: 2px solid rgba(55, 198, 255, .8);
  box-shadow: 0 -4px 18px rgba(55, 198, 255, .35);
}
[data-trap="dock"] .stage-perch::after {
  /* 码头护栏灯珠：一排暖色圆灯替代生硬虚线 */
  left: 10%; right: 10%; top: 20%; height: 12%;
  background: radial-gradient(circle at 50% 50%, #ffe9b8 18%, rgba(255, 170, 90, .85) 34%, rgba(255, 120, 60, .25) 52%, transparent 62%);
  background-size: 14.5% 100%;
  background-repeat: repeat-x;
  filter: drop-shadow(0 0 5px rgba(255, 170, 90, .9));
  animation: dock-lamps 2.8s ease-in-out infinite;
}
@keyframes dock-lamps {
  0%, 100% { opacity: .85; }
  50% { opacity: 1; }
}
/* 徽州深巷：马头墙阶梯 */
[data-trap="alley"] .stage-perch::before {
  background: linear-gradient(180deg, #d8d3c6, #a9a496 70%);
  clip-path: polygon(0 62%, 18% 62%, 18% 34%, 44% 34%, 44% 10%, 72% 10%, 72% 34%, 100% 34%, 100% 100%, 0 100%);
  box-shadow: inset 0 3px 0 #2c2c34;
}
[data-trap="alley"] .stage-perch::after {
  left: 44%; top: 2%; width: 28%; height: 9%;
  background: #23232d; border-radius: 3px;
}
/* 黄山云海：松岩绝壁 */
[data-trap="cliff"] .stage-perch::before {
  background: linear-gradient(165deg, #3a3f4c, #191c26 70%);
  clip-path: polygon(22% 0, 60% 12%, 100% 4%, 100% 100%, 0 100%, 10% 48%);
}
[data-trap="cliff"] .stage-perch::after {
  left: 4%; top: -16%; width: 42%; height: 34%;
  background: radial-gradient(ellipse 50% 42% at 50% 38%, #1f4d33 0%, #143323 58%, transparent 62%);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5));
}
/* 黄梅戏台：坍塌的红梁戏台 */
[data-trap="opera"] .stage-perch::before {
  background: linear-gradient(180deg, #5c1410, #33100c 70%);
  clip-path: polygon(0 34%, 14% 20%, 86% 20%, 100% 36%, 100% 100%, 0 100%);
  border-top: 2px solid rgba(255, 201, 77, .75);
  box-shadow: 0 -4px 16px rgba(229, 48, 43, .4);
}
[data-trap="opera"] .stage-perch::after {
  right: 8%; top: -12%; width: 12%; height: 26%;
  background: radial-gradient(circle at 50% 30%, #ff6a58, var(--red) 65%);
  border-radius: 46% 46% 50% 50%;
  box-shadow: 0 0 14px rgba(229, 48, 43, .9);
}
/* 皖美盛典：发光能量台 */
[data-trap="finale"] .stage-perch::before {
  background: linear-gradient(180deg, rgba(255, 201, 77, .28), rgba(229, 48, 43, .16) 65%);
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
  border-top: 2px solid var(--gold);
  box-shadow: 0 -6px 24px rgba(255, 201, 77, .5);
}
[data-trap="finale"] .stage-perch::after {
  left: 20%; right: 20%; top: -8%; height: 8%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
  filter: blur(2px);
}

/* 困住被救者的装置：能量罩 + 三道能量束缚（技能/进度可逐条打碎）
   ——束缚是流动的红橙能量束而非灰钢条：白热芯线 + 流光脉冲 + 两端锚点光珠 */
.trap-rig { position: absolute; inset: -8% -12%; z-index: 6; pointer-events: none; }
.trap-field {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px dashed rgba(255, 90, 60, .65);
  background: radial-gradient(circle, rgba(229, 48, 43, .1) 30%, rgba(229, 48, 43, .18) 70%, transparent 72%);
  box-shadow: inset 0 0 22px rgba(229, 48, 43, .35), 0 0 16px rgba(229, 48, 43, .3);
  animation: field-pulse 2.2s ease-in-out infinite;
  transition: opacity .6s, transform .6s;
}
/* 能量罩缓旋微光：一圈细碎高光沿罩壁流转，能量牢笼的「活」感 */
.trap-field::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  background: conic-gradient(rgba(255, 224, 150, .85), transparent 16%, transparent 46%, rgba(255, 120, 90, .7) 55%, transparent 64%, transparent 88%, rgba(255, 224, 150, .85));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: field-orbit 5.5s linear infinite;
  opacity: .8;
}
@keyframes field-orbit { to { transform: rotate(360deg); } }
@keyframes field-pulse {
  0%, 100% { transform: scale(1); opacity: .85; }
  50% { transform: scale(1.05); opacity: 1; }
}
.trap-chain {
  position: absolute; left: 1%; right: 1%; height: 4.6%;
  border-radius: 999px; opacity: .95;
  /* 白热芯线 + 红橙辉光包裹：能量束缚 */
  background:
    repeating-linear-gradient(90deg, transparent 0 12px, rgba(255, 255, 255, .5) 12px 16px, transparent 16px 26px),
    linear-gradient(180deg, rgba(255, 90, 60, .25), rgba(255, 230, 190, .95) 42%, #fff 50%, rgba(255, 230, 190, .95) 58%, rgba(255, 90, 60, .25)),
    linear-gradient(90deg, rgba(229, 48, 43, .1), rgba(255, 120, 80, .9) 10%, rgba(255, 120, 80, .9) 90%, rgba(229, 48, 43, .1));
  background-size: 52px 100%, 100% 100%, 100% 100%;
  box-shadow:
    0 0 8px rgba(255, 110, 70, .9),
    0 0 20px rgba(229, 48, 43, .55),
    inset 0 0 4px rgba(255, 255, 255, .8);
  animation: chain-flow 1.4s linear infinite, chain-hum 2.6s ease-in-out infinite;
  transition: opacity .1s;
}
@keyframes chain-flow { to { background-position: 52px 0, 0 0, 0 0; } }
@keyframes chain-hum {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}
/* 两端锚点光珠：束缚有「锁点」，不是悬空色条 */
.trap-chain::before, .trap-chain::after {
  content: ""; position: absolute; top: 50%; width: .62em; height: .62em;
  font-size: clamp(8px, 1.6vmin, 11px);
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #fff, #ffd9a0 45%, rgba(255, 110, 70, .95) 75%);
  box-shadow: 0 0 10px rgba(255, 170, 100, .95), 0 0 20px rgba(229, 48, 43, .6);
}
.trap-chain::before { left: -1.5%; }
.trap-chain::after { right: -1.5%; }
.trap-chain.chain-1 { top: 27%; transform: rotate(-19deg); }
.trap-chain.chain-2 { top: 50%; transform: rotate(13deg); }
.trap-chain.chain-3 { top: 70%; transform: rotate(-6deg); }
/* 断裂：白闪过载 → 束流断散坠落 */
.trap-chain.broken { animation: chain-break .55s cubic-bezier(.4, 0, .8, .6) forwards; }
@keyframes chain-break {
  0% { opacity: 1; filter: brightness(2.6) saturate(.4); }
  30% { opacity: .95; filter: brightness(1.8); }
  100% { opacity: 0; transform: translateY(46px) rotate(24deg) scaleX(.7); filter: brightness(1); }
}

/* 被救者气泡 */
.rescuee-bubble {
  position: absolute; bottom: 102%; right: 8%; z-index: 7;
  background: linear-gradient(160deg, #fdf8ee, #ece4d2);
  color: #3c1512; font-size: .7rem; font-weight: 800; letter-spacing: .05em;
  padding: 4px 10px; border-radius: 10px 10px 2px 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .5), 0 0 0 1.5px rgba(229, 48, 43, .5);
  opacity: 0; transform: translateY(6px) scale(.7); transform-origin: bottom right;
  transition: opacity .25s, transform .25s cubic-bezier(.34, 1.5, .64, 1);
  white-space: nowrap; pointer-events: none;
}
.rescuee-bubble.show { opacity: 1; transform: translateY(0) scale(1); }

/* 舞台特效层 */
.stage-fx { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.stage-spark {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--amber) 55%, transparent 78%);
  box-shadow: 0 0 8px rgba(255, 201, 77, .9);
  animation: particle-fly .6s cubic-bezier(.2, .6, .5, 1) forwards;
}
.stage-shard {
  /* 能量束缚断裂的光屑：暖芯光粒（配合能量锁链，不再是灰石子） */
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff, #ffc94d 50%, rgba(255, 110, 70, .9) 80%);
  box-shadow: 0 0 8px rgba(255, 170, 100, .95), 0 0 16px rgba(229, 48, 43, .5);
  animation: shard-fall .66s cubic-bezier(.3, .1, .7, .5) forwards;
}
.stage-beam {
  position: absolute; left: -4%; right: -4%; top: 56%; height: 7%;
  border-radius: 8px;
  background: linear-gradient(90deg, transparent, #fff 30%, var(--amber) 50%, #fff 70%, transparent);
  box-shadow: 0 0 24px 8px rgba(255, 201, 77, .8), 0 0 54px 16px rgba(255, 154, 46, .4);
  animation: beam-fade .5s ease-out forwards;
}
.stage-beam.v {
  left: auto; right: auto; top: -4%; bottom: -4%; width: 7%; height: auto;
  background: linear-gradient(0deg, transparent, #fff 30%, var(--amber) 50%, #fff 70%, transparent);
}
/* 舞台必杀余晖：光刃轨迹上缓缓熄灭的暖光带 */
.stage-beam-afterglow {
  position: absolute; left: -4%; right: -4%; top: 52%; height: 14%;
  border-radius: 12px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 201, 77, .32) 30%, rgba(255, 224, 150, .4) 50%, rgba(255, 201, 77, .32) 70%, transparent);
  filter: blur(3px);
  animation: afterglow-fade 1.05s ease-out forwards;
}
.stage-beam-afterglow.v {
  left: auto; right: auto; top: -4%; bottom: -4%; width: 10%; height: auto;
  background: linear-gradient(0deg, transparent, rgba(255, 201, 77, .32) 30%, rgba(255, 224, 150, .4) 50%, rgba(255, 201, 77, .32) 70%, transparent);
}
.stage-ring {
  position: absolute; top: 46%; width: 26%; aspect-ratio: 1; border-radius: 50%;
  margin-left: -13%; margin-top: -13%;
  border: 4px solid rgba(255, 90, 60, .95);
  box-shadow: 0 0 28px 8px rgba(255, 90, 60, .7), inset 0 0 18px rgba(255, 154, 46, .8);
  animation: ring-grow .5s ease-out forwards;
}
.stage-rainbow {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 55% 55%, rgba(255, 255, 255, .4), transparent 55%),
    conic-gradient(from 0deg, rgba(229, 48, 43, .3), rgba(255, 154, 46, .3), rgba(255, 233, 77, .3), rgba(76, 217, 100, .26), rgba(55, 198, 255, .26), rgba(176, 107, 255, .26), rgba(229, 48, 43, .3));
  mix-blend-mode: screen;
  animation: rainbow-flash-in .7s ease-out forwards;
}
.stage-heart {
  position: absolute; font-size: 15px; color: #ff5d76;
  text-shadow: 0 0 10px rgba(255, 93, 118, .9);
  animation: heart-rise 1.4s ease-out forwards; opacity: 0;
}
@keyframes heart-rise {
  0% { opacity: 0; transform: translateY(6px) scale(.5); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-46px) scale(1.25); }
}
.stage-firework {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  animation: firework-pop 1.2s ease-out forwards; opacity: 0;
}
@keyframes firework-pop {
  0% { opacity: 0; transform: scale(.3); box-shadow: 0 0 0 0 currentColor; }
  25% { opacity: 1; }
  60% { opacity: .9; transform: scale(1.4); box-shadow: 0 0 24px 14px transparent; }
  100% { opacity: 0; transform: scale(2); }
}

/* 救援成功 / 失败 舞台状态 */
.rescue-stage.rescued .trap-field { opacity: 0; transform: scale(1.5); }
.rescue-stage.rescued::after {
  content: ""; position: absolute; inset: 0; z-index: 8; pointer-events: none;
  background: radial-gradient(circle at 66% 60%, rgba(255, 224, 150, .5), transparent 58%);
  animation: rescued-flash 1.4s ease-out forwards;
}
@keyframes rescued-flash {
  0% { opacity: 0; }
  22% { opacity: 1; }
  100% { opacity: 0; }
}
.rescue-stage.rescued .stage-rescuee .actor-img { animation: actor-bob 1.6s ease-in-out infinite; }
/* 胜利相拥微动画：三帧关键姿势（弹出定格 → 环抱收紧贴脸 → 相视）
   栈式交叉淡入，收紧帧带轻微下压回弹；容器负责 hug-pop 弹出，
   期间两位单人 actor 隐身（!important 压过 crossfade 内联透明度与影子动画） */
.stage-hug {
  position: absolute; left: 52%; bottom: 6%; z-index: 6;
  width: clamp(92px, 42%, 184px);
  opacity: 0; pointer-events: none;
}
.stage-hug .hug-inner {
  position: relative; aspect-ratio: 1;
  transition: transform .32s cubic-bezier(.34, 1.45, .5, 1);
}
/* 环抱收紧：整体轻微下压（squash），相视时回弹放松 */
.stage-hug[data-hugframe="2"] .hug-inner { transform: scale(.96) translateY(2.5%); }
.stage-hug[data-hugframe="3"] .hug-inner { transform: scale(1.015); }
.stage-hug img {
  position: absolute; inset: 0; width: 100%; display: block;
  opacity: 0; transition: opacity .2s ease-out;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .6)) drop-shadow(0 0 18px rgba(255, 154, 46, .35)) drop-shadow(0 -1px 8px rgba(255, 186, 110, .25));
}
.stage-hug[data-hugframe="1"] .hug-f1,
.stage-hug[data-hugframe="2"] .hug-f2,
.stage-hug[data-hugframe="3"] .hug-f3 { opacity: 1; }
.rescue-stage.hugging .stage-hug {
  opacity: 1;
  animation: hug-pop .5s cubic-bezier(.3, 1.6, .5, 1) both;
}
@keyframes hug-pop {
  0% { opacity: 0; transform: scale(.5) translateY(12%); }
  55% { opacity: 1; transform: scale(1.07) translateY(-3%); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.rescue-stage.hugging .stage-hero .actor-img,
.rescue-stage.hugging .stage-rescuee .actor-img,
.rescue-stage.hugging .stage-hero .actor-ghost,
.rescue-stage.hugging .stage-rescuee .actor-ghost,
.rescue-stage.hugging .stage-hero .actor-shadow,
.rescue-stage.hugging .stage-rescuee .actor-shadow { opacity: 0 !important; }
.rescue-stage.failed .stage-scene { filter: saturate(.5) brightness(.75); }
.rescue-stage.failed .stage-hero .actor-img { animation: none; }
.rescue-stage.failed::after {
  content: ""; position: absolute; inset: 0; z-index: 8; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 10, 16, .35), rgba(10, 10, 16, .55));
}
/* 盛典终章：双人齐飞 */
.rescue-stage.duo-fly .stage-actor { animation: duo-rise 2.6s cubic-bezier(.4, .1, .6, 1) forwards; }
@keyframes duo-rise {
  0% { transform: translateY(0); }
  100% { transform: translateY(-140%) scale(.9); }
}
.rescue-stage.duo-fly .stage-actor .actor-img { animation: actor-bob 1s ease-in-out infinite; }

/* 棋盘飞向舞台的充能光点（红色系区别于飞分金色） */
.fly-spark.stagebound {
  background: radial-gradient(circle at 35% 30%, #fff, #ff5346 55%, rgba(229, 48, 43, 0) 78%);
  box-shadow: 0 0 10px rgba(229, 48, 43, .9);
}

/* 关卡卡片上的舞台标题行 */
.level-card .lv-stage-title { margin-top: 6px; font-size: .85rem; color: rgba(247, 242, 232, .65); line-height: 1.5; }

/* ---------- 窄屏适配 ---------- */
@media (max-width: 560px) {
  .menu-wrap { gap: 14px; padding: 16px; }
  .game-title { letter-spacing: .05em; }
  .game-hud { gap: 10px; padding: 10px 12px 2px; }
  .hud-level-name { font-size: 1rem; }
  .hud-place { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hud-stat { min-width: 58px; padding: 3px 8px 5px; }
  .hud-value { font-size: 1.1rem; }
  .dex-card.dex-hero { flex-direction: column; text-align: center; }
  :root {
    --stage-h: clamp(160px, 27vh, 260px);
    --board-size: max(200px, min(94vw, calc(100vh - var(--stage-h) - 246px)));
  }
  .board-outer::before { inset: -5px; border-radius: 19px; }
  .hud-strip { gap: 6px; padding: 2px 10px; min-height: 46px; }
  .hud-goals { gap: 6px; }
  .goal-chip { font-size: .78rem; padding: 3px 10px 4px 5px; border-radius: 12px; }
  .goal-chip img { width: 24px; height: 24px; }
  .goal-chip .goal-ico { width: 17px; height: 17px; }
  .goal-chip .goal-nums { font-size: .78rem; }
  .goal-track { width: 42px; height: 3.5px; }
  .stage-title { letter-spacing: .1em; }
  .sp-node { letter-spacing: .04em; }
  .rescue-stage { width: calc(100% - 16px); }
  .game-foot { padding: 4px 10px 10px; gap: 8px; }
  .skill-btn { width: 54px; height: 54px; }
  .skill-btn img { width: 36px; height: 36px; }
  .item-btn { width: 44px; height: 44px; }
  .narrator-bar { padding: 6px 10px; }
  .narrator-bar span { font-size: .78rem; }
}
@media (max-height: 640px) {
  .narrator-bar { display: none; }
  .game-foot { justify-content: center; padding-bottom: 8px; }
  :root {
    --stage-h: clamp(110px, 24vh, 180px);
    --board-size: max(180px, min(92vmin, calc(100vh - var(--stage-h) - 248px)));
  }
  .stage-head { padding: 5px 10px 0; }
  .sp-meta { display: none; }
  .hud-strip { min-height: 42px; }
}

/* ---------- 降低动态偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  .bg-glow, .bg-fog, .game-bg-img, .game-bg .fog, .menu-hero-img, .seal-badge, .narrator-bar img,
  .stage-bg, .stage-mist, .stage-hero .actor-img, .stage-rescuee .actor-img, .trap-field, .select-figure img,
  .actor-aura, .actor-shadow, .wing-trail, .skill-btn[data-skill-ready="1"], .rain-streak, .fog-band,
  .level-node.current .node-dot, .lv-current-tag, .tile.guide::after, .board.targeting::after,
  .board-sheen::before, .ambient-dust i, .node-line.filled, .level-node.current .node-dot::after,
  .game-title .metal, .loading-title .metal, .loading-fill::before, .sp-fill::before,
  .stage-scene::before, .stage-hero::before, .stage-rescuee::before, .select-figure::after,
  .tile.selected::after, .item-btn.armed, .rain-foil,
  .trap-chain, .trap-field::after, [data-trap="dock"] .stage-perch::after,
  .fog-band::before, .fog-band::after, .stage-hug,
  #overlay-result .dialog[data-result="win"]::before { animation: none !important; }
}

/* ---------- 流畅模式（html.lite）----------
   弱设备自动判定或主菜单闪电按钮手动开启；默认关闭，不影响其他设备的全效果。
   只削装饰：常驻氛围动效、大面积半透明漂移层、模糊/混合模式/滤镜逐帧动画；
   机制层（云雾带、灰瓦锁、流光雨）与玩法动画（交换/下落/消除/落地）全部保留。 */
.btn-lite:not(.muted) { color: var(--amber); border-color: rgba(255, 154, 46, .7); }
/* ① 常驻氛围动效停掉（清单与「降低动态偏好」一致） */
.lite .bg-glow, .lite .bg-fog, .lite .game-bg-img, .lite .game-bg .fog, .lite .menu-hero-img, .lite .seal-badge,
.lite .narrator-bar img, .lite .stage-bg, .lite .stage-mist, .lite .stage-hero .actor-img, .lite .stage-rescuee .actor-img,
.lite .trap-field, .lite .select-figure img, .lite .actor-aura, .lite .actor-shadow, .lite .wing-trail,
.lite .skill-btn[data-skill-ready="1"], .lite .level-node.current .node-dot, .lite .lv-current-tag,
.lite .tile.guide::after, .lite .board.targeting::after, .lite .board-sheen::before, .lite .ambient-dust i,
.lite .node-line.filled, .lite .level-node.current .node-dot::after, .lite .game-title .metal, .lite .loading-title .metal,
.lite .loading-fill::before, .lite .sp-fill::before, .lite .stage-scene::before, .lite .stage-hero::before,
.lite .stage-rescuee::before, .lite .select-figure::after, .lite .tile.selected::after, .lite .item-btn.armed,
.lite .trap-field::after, .lite [data-trap="dock"] .stage-perch::after,
.lite .tile.nbr-hint .tile-inner { animation: none !important; }
/* ② 大面积半透明漂移层与模糊光晕直接不画：手机 GPU 每帧叠画（overdraw）的大头 */
.lite .bg-glow, .lite .bg-fog, .lite .game-bg .fog, .lite .stage-mist, .lite .ambient-dust,
.lite .board-sheen, .lite .actor-aura, .lite .menu-hero::after { display: none !important; }
/* ③ 静态滤镜/模糊去掉：这些元素会随位移或淡入淡出反复重绘，带滤镜时每次重绘都贵 */
.lite .stage-bg, .lite .fog-band, .lite .fog-band::before, .lite .fog-band::after,
.lite .actor-img, .lite .actor-ghost, .lite .actor-shadow, .lite .stage-hug img,
.lite .tile.pressing .tile-inner { filter: none !important; }
/* ④ 棋子：去掉 64 格同时叠加的混合模式高光与多层阴影 */
.lite .tile-inner::after { mix-blend-mode: normal; opacity: .55; }
.lite .tile-inner { box-shadow: 0 4px 8px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .12); }
/* ⑤ 消除/生成/惊变/碎锁动画换成无滤镜版本（保留缩放节奏，只去 brightness 逐帧滤镜） */
.lite .tile.clearing .tile-inner { animation-name: tile-clear-lite; }
.lite .tile.spawning .tile-inner { animation-name: sp-condense-lite; }
.lite .tile.gong-jolt .tile-inner { animation-name: gong-jolt-spin-lite; }
.lite .tile.unlocking .lock-cover { animation-name: lock-shatter-lite; }
@keyframes tile-clear-lite {
  0% { transform: scale(1); }
  30% { transform: scale(.86); }
  62% { transform: scale(1.32); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}
@keyframes sp-condense-lite {
  0% { transform: scale(1.7) rotate(8deg); opacity: 0; }
  45% { transform: scale(.88) rotate(-3deg); opacity: 1; }
  75% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes gong-jolt-spin-lite {
  0% { transform: scale(1) rotate(0); }
  50% { transform: scale(1.14) rotate(9deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes lock-shatter-lite {
  0% { opacity: .96; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.28) rotate(6deg); }
}