/* ============================================================
   湘菜大师 · 全局样式
   风格：俯视 Flat-lay，木质桌面 + 古典金边木牌
   主题色：木褐 #3a2517 / 金 #d4af37 / 米黄 #f2e4c4
   ============================================================ */

:root {
  --wood-dark: #2b1a0f;
  --wood: #4a2f1a;
  --wood-light: #6b4423;
  --gold: #d4af37;
  --gold-light: #f0d878;
  --cream: #f2e4c4;
  --ink: #2b1d12;
  --focus-glow: 0 0 0 4px rgba(212, 175, 55, 0.55), 0 0 28px rgba(240, 216, 120, 0.6);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: "STKaiti", "KaiTi", "Songti SC", "Microsoft YaHei", serif;
  background: #0d0805;
  user-select: none;
}

/* 视口包裹层：黑边居中 */
#viewport {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, #1a1008, #0d0805);
  overflow: hidden;
}

/* 固定 16:9 舞台，由 stage.js 计算 scale 注入 transform */
#game-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1280px;
  height: 720px;
  transform-origin: center center;
  transform: translate(-50%, -50%);
  overflow: hidden;
  box-shadow: 0 0 60px rgba(0,0,0,0.7);
}

/* ---------- 俯视木桌背景 ---------- */
.table-bg {
  position: absolute;
  inset: 0;
  background:
    /* 桌面光晕 */
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(255, 240, 200, 0.18), transparent 70%),
    /* 木纹横向条理 */
    repeating-linear-gradient(
      92deg,
      #3a2415 0px,
      #4a2f1a 6px,
      #3f2817 12px,
      #4d3320 20px,
      #3a2415 28px
    );
  background-blend-mode: overlay, normal;
}
/* 桌面边角暗角，强化俯视聚光感 */
.table-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 55%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}

#scene-root {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
}

/* ---------- 场景通用 + 入场动画 ---------- */
.scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.scene--enter {
  opacity: 0;
  transform: scale(0.96);
}

/* ---------- 操作提示条 ---------- */
#hint-bar {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  color: var(--cream);
  font-size: 15px;
  letter-spacing: 1px;
  background: rgba(20, 12, 6, 0.72);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 999px;
  padding: 8px 22px;
  backdrop-filter: blur(4px);
  white-space: nowrap;
}
.hint-item { display: inline-flex; align-items: center; }
.hint-key {
  display: inline-block;
  background: var(--gold);
  color: var(--ink);
  border-radius: 5px;
  padding: 1px 9px;
  font-weight: bold;
  margin: 0 6px 0 0;
}
.hint-sep { opacity: 0.5; margin: 0 10px; }

/* ============================================================
   开始界面 MenuScene
   ============================================================ */
/* ---------- 开始界面 MenuScene 背景图 ---------- */
.menu-scene {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* 暗化叠层：保证标题"湘菜大师"与按钮在任意背景图上都清晰可读 */
.menu-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.25), rgba(0,0,0,0.55) 100%);
  z-index: -1;
  pointer-events: none;
}
.menu-scene { gap: 48px; }

.menu-title {
  text-align: center;
  margin-bottom: 8px;
}
.menu-title__cn {
  display: block;
  font-size: 64px;
  font-weight: bold;
  color: var(--gold-light);
  letter-spacing: 12px;
  text-shadow: 0 3px 0 #6b4423, 0 6px 16px rgba(0,0,0,0.6);
}
.menu-title__en {
  display: block;
  font-size: 18px;
  letter-spacing: 8px;
  color: rgba(242, 228, 196, 0.7);
  margin-top: 8px;
}

/* ---------- 菜单 Logo（替代原\"湘菜大师\"文字标题） ---------- */
.menu-logo {
  text-align: center;
  margin-bottom: 8px;
}
.menu-logo__img {
  max-width: 546px;
  max-height: 234px;
  object-fit: contain;
  transform: translateY(10%);
  /* 多层金色光晕扩散 */
  filter: drop-shadow(0 0 6px rgba(212,175,55,0.9))
          drop-shadow(0 0 14px rgba(240,216,120,0.7))
          drop-shadow(0 0 28px rgba(212,175,55,0.45));
}

.menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* ---------- 木质金边古典按钮 ---------- */
.wood-btn {
  position: relative;
  width: 340px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  /* 木牌质感 */
  background:
    repeating-linear-gradient(88deg, #5b3a1f 0, #6b4423 4px, #5e3d20 8px, #714826 13px, #5b3a1f 18px);
  border-radius: 14px;
  /* 金色双重边框 */
  border: 3px solid var(--gold);
  box-shadow:
    inset 0 0 0 2px rgba(43, 26, 15, 0.6),
    inset 0 2px 10px rgba(255, 220, 150, 0.15),
    0 8px 18px rgba(0, 0, 0, 0.45);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
/* 金边描角小钉 */
.wood-btn::before,
.wood-btn::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, var(--gold-light), var(--gold) 60%, #8a6d1e);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 4px rgba(0,0,0,0.4);
}
.wood-btn::before { left: 14px; }
.wood-btn::after { right: 14px; }

.wood-btn__text {
  font-size: 32px;
  font-weight: bold;
  letter-spacing: 8px;
  color: var(--cream);
  text-shadow: 0 2px 3px rgba(0,0,0,0.6);
}

.wood-btn.is-focused {
  transform: scale(1.07);
  box-shadow:
    inset 0 0 0 2px rgba(43, 26, 15, 0.6),
    var(--focus-glow),
    0 10px 22px rgba(0, 0, 0, 0.5);
  filter: brightness(1.12);
}
.wood-btn.is-pressed {
  transform: scale(0.97);
  filter: brightness(0.9);
}

/* ============================================================
   关卡选择界面 LevelSelectScene
   ============================================================ */
.level-scene { gap: 18px; }

.level-header {
  font-size: 34px;
  font-weight: bold;
  color: var(--gold-light);
  letter-spacing: 10px;
  text-shadow: 0 2px 0 #6b4423, 0 4px 12px rgba(0,0,0,0.5);
  margin-bottom: 4px;
}

.carousel {
  position: relative;
  width: 720px;
  height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 背景模糊菜品 */
.carousel__bg {
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  filter: blur(7px) brightness(0.7);
  opacity: 0.55;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}
.carousel__bg--left { left: 20px; }
.carousel__bg--right { right: 20px; }

/* 中央菜品卡片 */
.dish-card {
  position: relative;
  z-index: 3;
  width: 360px;
  height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px 22px;
  background:
    linear-gradient(160deg, rgba(74,47,26,0.96), rgba(43,26,15,0.96));
  border: 3px solid var(--gold);
  border-radius: 20px;
  box-shadow:
    inset 0 0 0 2px rgba(43,26,15,0.5),
    0 14px 34px rgba(0,0,0,0.55);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.dish-card.is-focused {
  transform: scale(1.04);
  box-shadow:
    inset 0 0 0 2px rgba(43,26,15,0.5),
    var(--focus-glow),
    0 16px 40px rgba(0,0,0,0.6);
}

/* 陶瓷盘 */
.dish-card__plate {
  width: 248px;
  height: 248px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, #ffffff, #e8e8ea 55%, #c9c9cf 78%, #aeaeb6 100%);
  box-shadow:
    inset 0 0 0 10px rgba(255,255,255,0.55),
    inset 0 -6px 18px rgba(0,0,0,0.15),
    0 8px 16px rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.dish-card__img {
  width: 196px;
  height: 196px;
  border-radius: 50%;
}

.dish-card__name {
  font-size: 30px;
  font-weight: bold;
  color: var(--gold-light);
  letter-spacing: 4px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.dish-card__name-en {
  font-size: 13px;
  color: rgba(242,228,196,0.65);
  letter-spacing: 1px;
  margin-top: 4px;
  text-align: center;
}
.dish-card__meta { margin-top: 12px; }
.dish-card__difficulty {
  font-size: 15px;
  color: var(--gold);
  letter-spacing: 2px;
}

/* 卡片切换弹跳动画 */
@keyframes cardPop {
  0% { transform: scale(0.9); opacity: 0.3; }
  60% { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.dish-card--pop { animation: cardPop 0.32s ease; }
.dish-card--pop.is-focused { animation: cardPop 0.32s ease; }

/* 左右箭头按钮 */
.arrow-btn {
  position: absolute;
  z-index: 4;
  top: 50%;
  transform: translateY(-50%);
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(88deg, #5b3a1f 0, #6b4423 4px, #5e3d20 8px, #714826 13px, #5b3a1f 18px);
  border: 3px solid var(--gold);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 2px rgba(43,26,15,0.6),
    0 6px 14px rgba(0,0,0,0.45);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.arrow-btn--left { left: 0; }
.arrow-btn--right { right: 0; }
.arrow-btn__icon {
  font-size: 48px;
  line-height: 1;
  color: var(--gold-light);
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
  margin-top: -6px;
}
.arrow-btn.is-focused {
  transform: translateY(-50%) scale(1.12);
  box-shadow:
    inset 0 0 0 2px rgba(43,26,15,0.6),
    var(--focus-glow),
    0 8px 18px rgba(0,0,0,0.5);
  filter: brightness(1.12);
}
.arrow-btn.is-pressed {
  transform: translateY(-50%) scale(0.92);
  filter: brightness(0.9);
}

/* 指示点 */
.carousel__dots {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(242,228,196,0.3);
  border: 1px solid rgba(212,175,55,0.5);
  transition: all 0.2s ease;
}
.dot.is-active {
  background: var(--gold);
  transform: scale(1.3);
  box-shadow: 0 0 8px var(--gold-light);
}

/* 返回按钮 */
.back-btn {
  margin-top: 8px;
  padding: 10px 30px;
  font-size: 18px;
  letter-spacing: 4px;
  color: var(--cream);
  background: rgba(43,26,15,0.7);
  border: 2px solid rgba(212,175,55,0.6);
  border-radius: 10px;
  transition: all 0.18s ease;
}
.back-btn.is-focused {
  color: var(--ink);
  background: var(--gold);
  box-shadow: var(--focus-glow);
  transform: scale(1.05);
}

/* ============================================================
   图片占位通用样式
   ============================================================ */
.img-slot {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.img-slot--placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.img-slot__label {
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 2px;
  text-align: center;
  padding: 0 6px;
}
.img-slot__tag {
  font-size: 11px;
  opacity: 0.8;
  margin-top: 4px;
  letter-spacing: 1px;
}

/* ============================================================
   待开发占位场景 StubScene
   ============================================================ */
.stub-scene__panel {
  text-align: center;
  padding: 50px 70px;
  background: linear-gradient(160deg, rgba(74,47,26,0.95), rgba(43,26,15,0.95));
  border: 3px solid var(--gold);
  border-radius: 20px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.55);
}
.stub-scene__title {
  font-size: 40px;
  font-weight: bold;
  color: var(--gold-light);
  letter-spacing: 8px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.stub-scene__dish {
  margin-top: 18px;
  font-size: 20px;
  color: var(--cream);
  letter-spacing: 2px;
}
.stub-scene__tip {
  margin-top: 18px;
  font-size: 16px;
  color: rgba(242,228,196,0.65);
  letter-spacing: 2px;
}
.stub-scene__hint {
  margin-top: 26px;
  font-size: 15px;
  color: var(--cream);
}
.stub-scene__hint b {
  color: var(--gold-light);
}

/* 顶部状态横幅（开始界面，摄像头/模型进度趣味提示） */
.menu-status {
  position: absolute;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  font-size: 15px; letter-spacing: 1px;
  padding: 6px 20px;
  border-radius: 999px;
  background: rgba(20,12,6,0.7);
  border: 1px solid rgba(212,175,55,0.5);
  color: var(--cream);
  white-space: nowrap;
}
.menu-status.is-ok { border-color: rgba(123,209,127,0.7); color: #d6f5d8; }
.menu-status.is-loading { border-color: rgba(255,210,120,0.7); color: var(--gold-light); }

/* ============================================================
   游戏主界面 CookingScene（备菜区 + 烹饪区，横向滑动）
   ============================================================ */
/* ---------- 烹饪界面 CookingScene（无背景图，使用默认木桌） ---------- */
.cook-scene { display: block; }

/* 返回键（左上角，所有游戏内界面通用） */
.cook-back {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 22;
  font-size: 16px; letter-spacing: 2px;
  color: var(--cream);
  background: rgba(43,26,15,0.78);
  border: 2px solid rgba(212,175,55,0.55);
  border-radius: 8px;
  padding: 6px 16px;
}

/* 顶部雕花横匾 */
.cook-plaque {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  padding: 8px 54px;
  background: linear-gradient(180deg, #6b4423, #4a2f1a);
  border: 3px solid var(--gold);
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px rgba(43,26,15,0.6), 0 6px 14px rgba(0,0,0,0.5);
}
.cook-plaque::before, .cook-plaque::after {
  content: "❖"; color: var(--gold-light);
  position: absolute; top: 50%; transform: translateY(-50%); font-size: 16px;
}
.cook-plaque::before { left: 14px; }
.cook-plaque::after { right: 14px; }
.cook-plaque__text {
  font-size: 26px; font-weight: bold; letter-spacing: 8px;
  color: var(--gold-light); text-shadow: 0 2px 3px rgba(0,0,0,0.6);
}

/* 横向长卷视口（裁掉右侧任务栏宽度） */
.cook-world-wrap {
  position: absolute;
  top: 64px; left: 0;
  width: 1000px; height: 656px;
  overflow: hidden;
}
/* 长卷：所有工位渲染一份在世界坐标(宽1800)，整体滑动 */
.cook-world {
  position: absolute;
  top: 0; left: 0;
  width: 1800px; height: 656px;
  transition: transform 0.32s cubic-bezier(0.5, 0, 0.2, 1);
  background:
    radial-gradient(ellipse 26% 50% at 47% 55%, rgba(255,240,200,0.10), transparent 70%),
    radial-gradient(ellipse 26% 55% at 72% 52%, rgba(255,120,40,0.16), transparent 70%);
}

/* 工位通用 */
.station {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px; padding: 8px;
  background: linear-gradient(160deg, rgba(74,47,26,0.86), rgba(43,26,15,0.86));
  border: 2px solid rgba(212,175,55,0.5);
  border-radius: 14px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
}
.station__img { flex: 1; width: 100%; border-radius: 10px; min-height: 36px; }
.station__name { font-size: 15px; color: var(--cream); letter-spacing: 1px; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.station--big { border-width: 3px; }
.station--big .station__name { font-size: 20px; }
.station--empty { opacity: 0.4; border-style: dashed; }

/* ---- 原型形状：扇形食材盘 / 圆 / 椭圆 / 圆锅 / 出菜大圆盘 / 砧板 ---- */
/* 扇形食材盘：上窄下宽的梯形+圆角，贴近手绘扇形 */
.station.shape-fan {
  border-radius: 8px 8px 60% 60% / 8px 8px 36px 36px;
  clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%);
  padding-top: 6px;
}
.station.shape-fan .station__name { font-size: 14px; }
/* 圆形（擂钵） */
.station.shape-circle { border-radius: 50%; }
/* 椭圆（腌肉碗 / 料汁碗） */
.station.shape-oval { border-radius: 50%; }
.station.shape-oval .station__name,
.station.shape-circle .station__name { font-size: 13px; }
/* 砧板：浅木色大矩形 */
.station.shape-board {
  background: linear-gradient(160deg, #8a5a2e, #6b4423);
  border-radius: 16px;
}
/* 炒锅：深色圆锅 + 手柄 */
.station.shape-wok {
  border-radius: 50%;
  background: radial-gradient(circle at 42% 36%, #4a4a4a, #232323 70%, #111 100%);
  border: 4px solid #d4af37;
}
.station.shape-wok .station__name { font-size: 22px; color: #fff; }
.wok-handle {
  position: absolute;
  left: 50%; bottom: -54px;
  width: 26px; height: 70px;
  transform: translateX(-50%) rotate(8deg);
  background: linear-gradient(180deg, #5a3a18, #3a2410);
  border: 2px solid #d4af37;
  border-radius: 0 0 14px 14px;
  z-index: -1;
}
/* 出菜盘：陶瓷大圆盘 */
.station.shape-plate {
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #ffffff, #e8e8ea 55%, #c9c9cf 78%, #aeaeb6 100%);
  border: 3px solid #d4af37;
  box-shadow: inset 0 0 0 10px rgba(255,255,255,0.5), 0 8px 18px rgba(0,0,0,0.45);
}
.station.shape-plate .station__name { font-size: 24px; color: #5a3d18; font-weight: bold; }
/* 佐料/葱姜蒜排：横向条，无外框感更接近原型 */
.station.shape-rack {
  background: linear-gradient(160deg, rgba(74,47,26,0.55), rgba(43,26,15,0.55));
  border-color: rgba(212,175,55,0.3);
}
.station.shape-rack .station__name { display: none; }
/* 菜刀装饰：不可选中，半透明 */
.station--deco {
  background: linear-gradient(160deg, rgba(74,47,26,0.5), rgba(43,26,15,0.5));
  border-style: dashed; pointer-events: none;
}
.station--deco .station__img { display: none; }
.station--deco.station--img .station__img { display: block; }
.station--deco .station__name { font-size: 26px; font-weight: bold; }

/* 共享碗（备好的菜/腌肉/料汁）：空态 vs 已盛装 */
.station.is-bowl .station__img { transition: filter 0.3s ease, opacity 0.3s ease; }
.station.is-bowl.is-empty .station__img { opacity: 0.35; filter: grayscale(0.7); }
.station.is-bowl.is-empty .station__name::after { content: ' (空)'; color: rgba(242,228,196,0.5); font-size: 12px; }
.station.is-bowl.is-filled .station__img { opacity: 1; filter: none; }
.station.is-bowl.is-filled { border-color: rgba(123,209,127,0.7); }
/* 备好的菜·盘中食材层：切好的青椒/肉透明图叠在 dish 上，居中 + 落盘动画 */
.dish-food {
  position: absolute;
  inset: 0;
  z-index: 4;                  /* 盘(station__img) 之上 */
  background-repeat: no-repeat;
  pointer-events: none;
  transform: translateY(-6%);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.dish-food.is-drop { animation: dishFoodDrop 0.42s cubic-bezier(0.25,0.9,0.3,1.2); }
@keyframes dishFoodDrop {
  0%   { opacity: 0; transform: translateY(-34%) scale(0.7); }
  60%  { opacity: 1; transform: translateY(-2%) scale(1.06); }
  100% { opacity: 1; transform: translateY(-6%) scale(1); }
}
.station.bowl-pulse { animation: bowlPulse 0.5s ease; }
@keyframes bowlPulse {
  0% { transform: translate(-50%,-50%) scale(1); }
  45% { transform: translate(-50%,-50%) scale(1.14); }
  100% { transform: translate(-50%,-50%) scale(1); }
}
/* 通用「工位叠加食材层」：擂钵/炒锅等非共享碗工位上叠放的食材透明图。
   支持多 slot 共存(青椒+皮蛋)，落入动画 + green→toast 渐变过渡。
   transform 由 JS 写入(slot 偏移)，落入动画用独立的缩放/透明，避免冲突。 */
.station-food {
  position: absolute;
  inset: 0;
  z-index: 7;                  /* 锅/碗图之上、手部 emoji 之下 */
  background-repeat: no-repeat;
  pointer-events: none;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.45));
}
.station-food.is-drop { animation: stationFoodDrop 0.44s cubic-bezier(0.25,0.9,0.3,1.2); }
@keyframes stationFoodDrop {
  0%   { opacity: 0; }
  60%  { opacity: 1; }
  100% { opacity: 1; }
}
/* green→toast 渐变过渡层：交叉淡入(1s)后由 JS 把主层背景换成目标图再移除本层 */
.station-food--morph { opacity: 0; transition: opacity 1s ease; z-index: 8; }
.station-food--morph.is-shown { opacity: 1; }

/* 炒锅水效（金钱蛋开局）：锅内蓝色高透明"一汪水"，带轻微荡漾高光。
   挂在炒锅工位内、对准锅膛(与 fx-pan 同位 top:34%)，z 低于食材层。 */
.wok-water {
  position: absolute;
  left: 50%; top: 34%;
  width: 50%; aspect-ratio: 1 / 1; height: auto;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 30% 22% at 40% 34%, rgba(255,255,255,0.55), rgba(255,255,255,0) 70%),
    radial-gradient(circle at 50% 50%, rgba(120,200,255,0.55), rgba(70,150,230,0.42) 62%, rgba(40,110,200,0.30) 100%);
  box-shadow: inset 0 0 18px rgba(30,90,180,0.45);
  mix-blend-mode: screen;
  animation: wokWaterShimmer 2.8s ease-in-out infinite;
}
@keyframes wokWaterShimmer {
  0%,100% { transform: translate(-50%,-50%) scale(1); opacity: 0.9; }
  50%     { transform: translate(-49%,-51%) scale(1.03); opacity: 1; }
}
.wok-water.is-fadeout { animation: none; transition: opacity 0.6s ease; opacity: 0; }

/* 屏幕悬浮元素（金钱蛋"取生鸡蛋"后悬浮于屏幕中央，随视图切换始终可见）。
   挂在 .cook-scene 根上(固定屏幕坐标，不随世界长卷平移)。 */
.float-item {
  position: absolute;
  left: 50%; top: 40%;
  width: 110px; height: 110px;
  transform: translate(-50%, -50%);
  z-index: 26;
  background-repeat: no-repeat;
  pointer-events: none;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.5));
  animation: floatBob 2.2s ease-in-out infinite;
}
@keyframes floatBob {
  0%,100% { transform: translate(-50%, -50%) translateY(0); }
  50%     { transform: translate(-50%, -50%) translateY(-12px); }
}
.float-item.is-spawn { animation: floatSpawn 0.5s cubic-bezier(0.25,0.9,0.3,1.3), floatBob 2.2s ease-in-out 0.5s infinite; }
@keyframes floatSpawn {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
/* 悬浮蛋"飞入锅中"：飞向某目标(屏幕坐标，JS 设 --tx/--ty)后消失 */
.float-item.is-toWok { animation: floatToWok 0.7s cubic-bezier(0.4,0,0.3,1) forwards; }
@keyframes floatToWok {
  0%   { opacity: 1; }
  60%  { opacity: 1; transform: translate(-50%,-50%) translate(calc(var(--tx) * 0.6), calc(var(--ty) * 0.6 - 30px)) scale(0.85); }
  100% { opacity: 0; transform: translate(-50%,-50%) translate(var(--tx), var(--ty)) scale(0.5); }
}

/* 抓取飞行：食材从源工位飞到目标工位（挂在世界长卷里，跟随视图平移）。
   以工位中心为锚点(JS 设 left/top 为世界坐标 + translate(-50%,-50%))，
   --fdx/--fdy 为终点相对位移；抛物线由关键帧中段抬高 + 缩放营造。 */
.fly-food {
  position: absolute;
  z-index: 30;
  background-repeat: no-repeat;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.45));
}
.fly-food.is-fly { animation: flyFood cubic-bezier(0.4, 0, 0.3, 1) forwards; }
@keyframes flyFood {
  0%   { transform: translate(-50%, -50%) translate(0, 0) scale(0.6); opacity: 0; }
  15%  { opacity: 1; transform: translate(-50%, -50%) translate(calc(var(--fdx) * 0.15), calc(var(--fdy) * 0.15 - 40px)) scale(1.1); }
  60%  { opacity: 1; transform: translate(-50%, -50%) translate(calc(var(--fdx) * 0.6), calc(var(--fdy) * 0.6 - 30px)) scale(1); }
  100% { opacity: 1; transform: translate(-50%, -50%) translate(var(--fdx), var(--fdy)) scale(0.9); }
}
/* 智能佐料瓶子 */
.station__bottles { display: flex; gap: 8px; flex: 1; align-items: center; justify-content: center; }
.bottle {
  min-width: 30px; height: 46px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: bold; color: #fff;
  background: linear-gradient(180deg, #8a5a2a, #5a3a18);
  border: 2px solid var(--gold);
  border-radius: 6px;
  transition: transform 0.3s ease;
}
/* 葱姜蒜：圆形章 */
.bottle--round {
  width: 46px; height: 46px; min-width: 46px;
  border-radius: 50%;
  background: linear-gradient(180deg, #6b8e3a, #4a6b22);
  font-size: 16px;
}
.bottle--img {
  width: 44px; height: 54px; min-width: 44px; padding: 0;
  color: transparent; font-size: 0;
  background: none;
  border: none;
  border-radius: 0;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.28));
}
.bottle--round.bottle--img {
  width: 52px; height: 52px; min-width: 52px;
  border-radius: 0;
}
.bottle.is-fly { animation: bottleFly 0.9s ease; }
@keyframes bottleFly {
  0% { transform: translateY(0) rotate(0); }
  40% { transform: translateY(-40px) rotate(-25deg); }
  60% { transform: translateY(-40px) rotate(-110deg); }
  100% { transform: translateY(0) rotate(0); }
}

/* 蓝色指引光：当前步骤目标工位（区分度高于金色选中） */
.station.is-target {
  border-color: #4db6ff;
  animation: targetPulseBlue 1.1s ease-in-out infinite;
}
@keyframes targetPulseBlue {
  0%,100% { box-shadow: 0 6px 14px rgba(0,0,0,0.4), 0 0 0 0 rgba(77,182,255,0.0); }
  50% { box-shadow: 0 6px 14px rgba(0,0,0,0.4), 0 0 26px 5px rgba(77,182,255,0.75); }
}

/* 金色选中光 */
.station.is-focused {
  transform: translate(-50%, -50%) scale(1.07);
  border-color: var(--gold-light);
  box-shadow: var(--focus-glow), 0 8px 18px rgba(0,0,0,0.5);
  filter: brightness(1.12);
  z-index: 5;
}
/* 同时是目标+选中：内金外蓝 */
.station.is-focused.is-target {
  box-shadow: 0 0 0 4px rgba(240,216,120,0.7), 0 0 26px 6px rgba(77,182,255,0.7), 0 8px 18px rgba(0,0,0,0.5);
}
/* 正在执行动作 */
.station.is-acting { filter: brightness(1.3); }
.station.is-hit { animation: hitFlash 0.3s ease; }
.station.is-miss { animation: missShake 0.3s ease; }
@keyframes hitFlash { 0% { filter: brightness(2.2); } 100% { filter: brightness(1.1); } }
@keyframes missShake {
  0%,100% { transform: translate(-50%, -50%) scale(1.07); }
  25% { transform: translate(calc(-50% - 6px), -50%) scale(1.07); }
  75% { transform: translate(calc(-50% + 6px), -50%) scale(1.07); }
}

/* ============================================================
   透明 PNG 工位（图片模式）—— 物体本体即视觉，沿物体轮廓发光
   仅当图片成功加载、由 JS 加上 .station--img 时启用。
   ============================================================ */
.station--img {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  overflow: visible;          /* 让物体轮廓的 drop-shadow 可溢出盒子显示 */
}
/* 覆盖各形状自带的底色/边框绘制（砧板木纹、圆锅、陶瓷盘…） */
.station--img.shape-board,
.station--img.shape-wok,
.station--img.shape-plate,
.station--img.shape-circle,
.station--img.shape-oval,
.station--img.shape-fan,
.station--img.shape-rect {
  background: none;
  border: none;
  box-shadow: none;
}
.station--img .wok-handle { display: none; }   /* 若锅图自带手柄，隐藏 CSS 手柄 */

/* 图片层铺满整个占位框（= 工位 w×h）；background-* 由 imagefit.js 精准设置 */
.station--img .station__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0;
  flex: none;
  transition: filter 0.18s ease;
  /* 默认接地阴影：沿物体轮廓，增立体感 */
  filter: drop-shadow(0 4px 5px rgba(0,0,0,0.45));
}
/* 食材篮内的真实食材层：篮子打底，食材居中略偏上(篮口)叠放，带轮廓阴影更立体 */
.station__food {
  position: absolute;
  inset: 0;
  z-index: 3;                  /* 篮子(station__img) 之上 */
  background-repeat: no-repeat;
  pointer-events: none;
  /* 食材落在篮内偏上一点，更像盛在篮中而非压在篮底 */
  transform: translateY(-5%);
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.42));
}
/* 黑底素材(.jpg)去黑：滤色让黑背景透出下方篮子，只留食材本体 */
.station__food--deblack { mix-blend-mode: screen; filter: none; }
/* 名字浮到物体下方外侧，不挤压图片 */
.station--img .station__name {
  position: absolute;
  left: 50%;
  bottom: -22px;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 2;
}
.station--img.station--big .station__name { bottom: -26px; }

/* —— 目标工位：蓝色边缘光，沿物体轮廓脉冲（盒子本身不再发光/脉冲） —— */
.station--img.is-target {
  animation: none;
  border-color: transparent;
  box-shadow: none;
}
.station--img.is-target .station__img {
  animation: imgGlowBlue 1.1s ease-in-out infinite;
}
@keyframes imgGlowBlue {
  0%,100% {
    filter: drop-shadow(0 4px 5px rgba(0,0,0,0.45))
            drop-shadow(0 0 2px rgba(77,182,255,0.95));
  }
  50% {
    filter: drop-shadow(0 4px 5px rgba(0,0,0,0.45))
            drop-shadow(0 0 10px rgba(77,182,255,1));
  }
}

/* —— 选中工位：金色边缘光，沿物体轮廓 —— */
.station--img.is-focused {
  transform: translate(-50%, -50%) scale(1.07);
  border-color: transparent;
  box-shadow: none;
  filter: none;
}
.station--img.is-focused .station__img {
  animation: none;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.45))
          drop-shadow(0 0 3px rgba(240,216,120,0.95))
          drop-shadow(0 0 9px rgba(240,216,120,0.85));
}
/* 同时是目标+选中：父层不再画椭圆圈，只让物体本体发光 */
.station--img.is-focused.is-target {
  border-color: transparent;
  box-shadow: none;
  filter: none;
}
.station--img.is-focused.is-target .station__img {
  animation: none;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.45))
          drop-shadow(0 0 4px rgba(240,216,120,0.98))
          drop-shadow(0 0 10px rgba(240,216,120,0.9))
          drop-shadow(0 0 14px rgba(77,182,255,0.78));
}

/* —— 叠加食材层同步发光 ——
   图片工位上叠的食材（篮内食材 station__food / 碗里成品 dish-food /
   擂钵·锅里的 station-food）会盖住底层容器；若只让容器发光，被盖住时
   看起来就"没发黄光"。这里让这些叠层在工位选中(金)/目标(蓝)时也描边发光，
   保证"选中该区域 → 物品本体确实发黄光"。 */
.station--img.is-target .station__food,
.station--img.is-target .dish-food,
.station--img.is-target .station-food {
  animation: imgGlowBlue 1.1s ease-in-out infinite;
}
.station--img.is-focused .station__food,
.station--img.is-focused .dish-food,
.station--img.is-focused .station-food {
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.42))
          drop-shadow(0 0 3px rgba(240,216,120,0.98))
          drop-shadow(0 0 9px rgba(240,216,120,0.88)) !important;
}
.station--img.is-focused.is-target .station__food,
.station--img.is-focused.is-target .dish-food,
.station--img.is-focused.is-target .station-food {
  animation: none;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.42))
          drop-shadow(0 0 4px rgba(240,216,120,0.98))
          drop-shadow(0 0 10px rgba(240,216,120,0.9))
          drop-shadow(0 0 13px rgba(77,182,255,0.78)) !important;
}

/* 空碗灰显：图片模式下改用 opacity，避免 filter 覆盖掉发光的 drop-shadow。
   注意：空碗/盘要保持「不透明、看不见桌子」，因此 opacity 不能太低（之前 0.42 太透）。
   用接近不透明 + 轻微降亮做"空"的区分，蓝光(is-target)/金光(is-focused)依旧清晰。 */
.station--img.is-bowl.is-empty .station__img {
  opacity: 0.96;
  filter: drop-shadow(0 4px 5px rgba(0,0,0,0.4)) brightness(0.86);
}
.station--img.is-bowl.is-empty.is-target .station__img {
  opacity: 1;
  animation: imgGlowBlue 1.1s ease-in-out infinite;
}
.station--img.is-bowl.is-empty.is-focused .station__img {
  opacity: 1;
  animation: none;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.45))
          drop-shadow(0 0 3px rgba(240,216,120,0.95))
          drop-shadow(0 0 9px rgba(240,216,120,0.85));
}
.station--img.is-bowl.is-empty.is-focused.is-target .station__img {
  opacity: 1;
  animation: none;
  filter: drop-shadow(0 0 3px rgba(240,216,120,0.95))
          drop-shadow(0 0 11px rgba(77,182,255,0.85));
}
.station--img.is-bowl.is-filled .station__img { opacity: 1; }

/* 手部动作 emoji */
.station__hand {
  position: absolute;
  top: -10px; right: -10px;
  font-size: 34px;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.station__hand.is-show { opacity: 1; }
.station__hand.act-grab { animation: handGrab 0.7s ease; }
.station__hand.act-chop { animation: handChop 0.7s ease; }
.station__hand.act-stir { animation: handStir 0.7s linear; }
.station__hand.act-pour { animation: handPour 0.7s ease; }
.station__hand.act-toss { animation: handToss 0.7s ease; }
.station__hand.act-tap  { animation: handTap 0.7s ease; }
@keyframes handGrab { 0%{transform:scale(1.3);}50%{transform:scale(0.8);}100%{transform:scale(1);} }
@keyframes handChop { 0%,100%{transform:translateY(-16px) rotate(-10deg);}50%{transform:translateY(6px) rotate(8deg);} }
@keyframes handStir { 0%{transform:rotate(0);}100%{transform:rotate(360deg);} }
@keyframes handPour { 0%{transform:rotate(0);}50%{transform:rotate(95deg);}100%{transform:rotate(0);} }
@keyframes handToss { 0%,100%{transform:translateY(0);}50%{transform:translateY(-22px) rotate(-18deg);} }
@keyframes handTap  { 0%,100%{transform:scale(1);}50%{transform:scale(0.7) translateY(8px);} }

/* 动作特效 */
.station__fx {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  opacity: 0; pointer-events: none;
}
.station__fx.is-burst { animation: fxBurst 0.6s ease; }
@keyframes fxBurst {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(0.4); }
  40% { opacity: 1; transform: translate(-50%,-50%) scale(1.4); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.8); }
}

/* 右侧竹简任务清单 */
.scroll-panel {
  position: absolute;
  top: 56px; right: 16px;
  width: 248px; height: 600px;
  padding: 18px 18px 16px;
  background: repeating-linear-gradient(90deg, #d9c08a 0px, #e7d3a4 7px, #d4ba84 9px, #e7d3a4 11px);
  border: 3px solid #8a6a32;
  border-radius: 10px;
  box-shadow: inset 0 0 24px rgba(120,90,40,0.4), 0 8px 20px rgba(0,0,0,0.5);
  z-index: 11; display: flex; flex-direction: column;
}
.scroll-panel::before, .scroll-panel::after {
  content: ""; position: absolute; left: -8px; right: -8px; height: 16px;
  background: linear-gradient(180deg, #6b4423, #4a2f1a);
  border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.scroll-panel::before { top: -8px; }
.scroll-panel::after { bottom: -8px; }
.scroll-panel__title {
  text-align: center; font-size: 13px; font-weight: bold;
  color: #5a3d18; letter-spacing: 2px;
  border-bottom: 2px solid rgba(120,90,40,0.5); padding-bottom: 5px;
}
/* 面板内"目前执行的动作"框（拆成"需要做的动作 / 当前识别状态"两部分，整体上移、字号小于任务清单） */
.action-box {
  margin: 6px 0 6px;
  padding: 7px 10px;
  background: rgba(30,18,8,0.85);
  border: 2px solid rgba(212,175,55,0.55);
  border-radius: 10px;
  color: var(--cream);
}
.action-box__need { font-size: 12px; }
.action-box__need b { color: var(--gold-light); }
.action-box__cur { font-size: 11px; color: rgba(242,228,196,0.85); margin-top: 3px; }
.action-box__cur span { color: var(--gold); }
.action-box__idle {
  margin-top: 6px; font-size: 11px; color: #ffe08a;
  background: rgba(176,120,30,0.35); border-radius: 6px; padding: 4px 7px;
}
.scroll-panel__legend {
  display: flex; align-items: center; flex-wrap: wrap; gap: 3px 8px;
  font-size: 11px; color: #5a3d18; line-height: 1.35;
  padding: 0 2px 6px;
}
.scroll-panel__subtitle {
  text-align: center; font-size: 15px; font-weight: bold;
  color: #5a3d18; letter-spacing: 3px;
  border-top: 2px solid rgba(120,90,40,0.5);
  border-bottom: 1px solid rgba(120,90,40,0.4);
  padding: 6px 0 5px;
}
.scroll-panel__dish { text-align: center; font-size: 14px; color: #7a5424; margin: 6px 0; }
/* 任务清单：可滚动但隐藏灰色滚动条（保留滚动功能） */
.task-list {
  list-style: none; flex: 1; overflow-y: auto; padding-right: 4px;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* 旧版 Edge/IE */
}
.task-list::-webkit-scrollbar { width: 0; height: 0; display: none; }  /* Chrome/Safari */
.task-item {
  display: flex; align-items: flex-start; gap: 5px;
  font-size: 13px; line-height: 1.4; color: #5a3d18;
  padding: 5px 4px; border-bottom: 1px dashed rgba(120,90,40,0.35);
}
.task-item__check { width: 14px; flex-shrink: 0; font-weight: bold; }
.task-item__area { color: #9a6b2c; flex-shrink: 0; }
.task-item__text { flex: 1; }
.task-item__act { flex-shrink: 0; }
.task-item.is-current { background: rgba(77,182,255,0.3); border-radius: 6px; font-weight: bold; color: #1a4a6e; }
.task-item.is-done { opacity: 0.5; text-decoration: line-through; }
.task-item.is-done .task-item__check { color: #2e7d32; }

/* 区域切换标签 */
.area-tabs {
  position: absolute;
  left: 50%; top: 60px; transform: translateX(-50%);
  z-index: 12; display: flex; gap: 8px;
}
.area-tab {
  display: flex; align-items: center; gap: 6px;
  font-size: 15px; letter-spacing: 2px; color: var(--cream);
  background: rgba(43,26,15,0.7); border: 2px solid rgba(212,175,55,0.45);
  border-radius: 8px; padding: 5px 12px;
}
.area-tab.is-active { color: var(--ink); background: var(--gold); box-shadow: 0 0 16px rgba(240,216,120,0.5); }
.area-tab__key {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; background: var(--ink); color: var(--gold-light);
  border-radius: 5px; font-size: 13px; font-weight: bold;
}
.area-tab.is-active .area-tab__key { background: #fff; color: var(--ink); }

/* 动作进度条（面板内 action-box 使用） */
.gesture-hold {
  margin-top: 8px; width: 100%; height: 12px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(212,175,55,0.5);
  border-radius: 999px; overflow: hidden;
}
.gesture-hold__fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #4db6ff, #2e7d32);
  transition: width 0.08s linear;
}

/* 炒制阶段：锅上方颠锅音游提示 + 炒制倒计时 */
/* 关键：display:flex 会覆盖 [hidden]，必须显式让 hidden 生效，否则一直显示 */
.cook-phase[hidden], .toss-prompt[hidden] { display: none !important; }
.cook-phase {
  position: absolute;
  left: 500px; top: 120px;
  transform: translateX(-50%);
  z-index: 24;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  pointer-events: none;
}
.cook-phase__timer {
  font-size: 20px; letter-spacing: 2px; color: var(--cream);
  background: rgba(20,12,6,0.78); border: 2px solid var(--gold);
  border-radius: 999px; padding: 6px 22px;
}
.cook-phase__timer b { color: #ff9a3c; font-size: 24px; }
.toss-prompt {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 28px;
  background: rgba(176,60,20,0.92);
  border: 3px solid #ffcf6b;
  border-radius: 16px;
  box-shadow: 0 0 30px rgba(255,150,60,0.7);
  animation: tossPop 0.3s ease;
}
@keyframes tossPop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.toss-prompt__label { font-size: 24px; font-weight: bold; color: #fff; letter-spacing: 2px; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.toss-prompt__bar { width: 240px; height: 14px; background: rgba(0,0,0,0.4); border-radius: 999px; overflow: hidden; }
.toss-prompt__fill { height: 100%; width: 100%; background: linear-gradient(90deg, #ffd700, #ff5722); transition: width 0.1s linear; }

/* 居中 toast */
.cook-toast {
  position: absolute;
  left: 500px; top: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  z-index: 28;
  padding: 14px 32px;
  border-radius: 14px;
  font-size: 20px; font-weight: bold; letter-spacing: 1px;
  color: #fff; opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.cook-toast.is-show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cook-toast.is-good { background: rgba(46,125,50,0.95); border: 2px solid #7bd17f; }
.cook-toast.is-warn { background: rgba(176,80,30,0.95); border: 2px solid #ffb27a; }

/* 通用确认弹窗 */
.confirm-mask {
  position: absolute; inset: 0; z-index: 42;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,6,3,0.7); opacity: 0;
  transition: opacity 0.25s ease; backdrop-filter: blur(3px);
}
.confirm-mask.is-show { opacity: 1; }
.confirm-card {
  text-align: center; padding: 32px 48px;
  background: linear-gradient(160deg, rgba(74,47,26,0.97), rgba(43,26,15,0.97));
  border: 3px solid var(--gold); border-radius: 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.6);
}
.confirm-card__title { font-size: 28px; font-weight: bold; color: var(--gold-light); letter-spacing: 4px; }
.confirm-card__text { font-size: 16px; color: var(--cream); margin-top: 12px; }
.confirm-card__btns { display: flex; gap: 18px; justify-content: center; margin-top: 22px; }
.confirm-btn {
  padding: 10px 26px; font-size: 17px; letter-spacing: 2px;
  color: var(--cream); background: rgba(43,26,15,0.7);
  border: 2px solid rgba(212,175,55,0.5); border-radius: 10px;
}
.confirm-btn.is-focused { color: var(--ink); background: var(--gold); box-shadow: var(--focus-glow); transform: scale(1.05); }
.confirm-card__hint { margin-top: 18px; font-size: 13px; color: rgba(242,228,196,0.7); }

/* 完成遮罩 */
.finish-mask {
  position: absolute; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,6,3,0.7); opacity: 0;
  transition: opacity 0.4s ease; backdrop-filter: blur(3px);
}
.finish-mask.is-show { opacity: 1; }
.finish-card {
  text-align: center; padding: 36px 60px;
  background: linear-gradient(160deg, rgba(74,47,26,0.97), rgba(43,26,15,0.97));
  border: 3px solid var(--gold); border-radius: 22px;
  box-shadow: 0 16px 44px rgba(0,0,0,0.6);
  transform: scale(0.9); transition: transform 0.4s ease;
}
.finish-mask.is-show .finish-card { transform: scale(1); }
.finish-card__plate {
  width: 200px; height: 200px; margin: 0 auto 18px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff, #e8e8ea 55%, #c9c9cf 78%, #aeaeb6 100%);
  box-shadow: inset 0 0 0 9px rgba(255,255,255,0.55), 0 8px 16px rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
}
.finish-card__img { width: 158px; height: 158px; border-radius: 50%; }
.finish-card__title { font-size: 34px; font-weight: bold; color: var(--gold-light); letter-spacing: 6px; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.finish-card__dish { font-size: 20px; color: var(--cream); margin-top: 8px; letter-spacing: 2px; }
.finish-card__hint { margin-top: 22px; font-size: 15px; color: rgba(242,228,196,0.8); }
.finish-card__hint b { color: var(--gold-light); }

/* 手势 HUD 顶部图例：蓝光/金框含义 */
.gesture-hud__legend {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  font-size: 11px; color: rgba(242,228,196,0.85);
  padding-bottom: 7px; margin-bottom: 7px;
  border-bottom: 1px solid rgba(212,175,55,0.3);
  line-height: 1.4;
}
.legend-dot {
  display: inline-block; width: 11px; height: 11px; border-radius: 3px;
  margin-right: 3px; vertical-align: -1px;
}
.legend-dot--blue { background: #4db6ff; box-shadow: 0 0 6px rgba(77,182,255,0.9); }
.legend-dot--gold { background: transparent; border: 2px solid var(--gold-light); box-shadow: 0 0 6px rgba(240,216,120,0.8); }

/* 完成结算：三选项按钮 */
.finish-card__btns { display: flex; gap: 14px; justify-content: center; margin-top: 24px; }
.finish-btn {
  padding: 12px 22px; font-size: 17px; letter-spacing: 1px;
  color: var(--cream); background: rgba(43,26,15,0.7);
  border: 2px solid rgba(212,175,55,0.5); border-radius: 12px;
  white-space: nowrap; transition: all 0.15s ease;
}
.finish-btn.is-focused {
  color: var(--ink); background: var(--gold);
  box-shadow: var(--focus-glow); transform: scale(1.06);
}
.finish-btn.is-disabled { opacity: 0.4; border-style: dashed; filter: grayscale(0.6); }

/* 完成时菜品放大庆祝动画 */
.finish-mask.is-show .finish-card__plate { animation: dishCelebrate 0.7s ease; }
@keyframes dishCelebrate {
  0% { transform: scale(0.4) rotate(-12deg); opacity: 0; }
  55% { transform: scale(1.18) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ============================================================
   教程界面 TutorialScene
   ============================================================ */
.tutorial-scene { display: flex; align-items: center; justify-content: center; }
.tut2-card {
  width: 900px; max-width: 94%; padding: 22px 30px 26px;
  background: linear-gradient(160deg, rgba(74,47,26,0.95), rgba(43,26,15,0.96));
  border: 3px solid var(--gold); border-radius: 20px;
  box-shadow: 0 16px 44px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(240,216,120,0.15);
}
.tut2-head { text-align: center; display: flex; align-items: center; justify-content: center; gap: 14px; }
.tut2-head__deco { color: var(--gold); font-size: 16px; opacity: 0.75; }
.tut2-title { font-size: 28px; font-weight: bold; color: var(--gold-light); letter-spacing: 4px; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }

/* 顶部六手势进度条 */
.tut2-progress { display: flex; justify-content: center; gap: 10px; margin: 16px 0 18px; flex-wrap: wrap; }
.tut2-step {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 64px; padding: 6px 8px; border-radius: 10px;
  background: rgba(20,12,6,0.4); border: 1px solid rgba(212,175,55,0.25);
  opacity: 0.55; transition: all 0.2s ease;
}
.tut2-step i { font-size: 22px; font-style: normal; }
.tut2-step b { font-size: 12px; color: rgba(242,228,196,0.85); font-weight: normal; letter-spacing: 1px; }
.tut2-step.is-active {
  opacity: 1; border-color: var(--gold-light);
  background: linear-gradient(160deg, rgba(96,64,34,0.9), rgba(58,36,18,0.9));
  box-shadow: 0 0 14px rgba(240,216,120,0.5); transform: translateY(-2px) scale(1.05);
}
.tut2-step.is-done { opacity: 0.85; border-color: rgba(46,125,50,0.6); }
.tut2-step.is-done b { color: #c8f0ca; }

.tut2-body { min-height: 320px; }

/* 欢迎 / 完成页 */
.tut2-intro { text-align: center; padding: 14px 20px; }
.tut2-intro__icon { font-size: 60px; margin-bottom: 10px; }
.tut2-intro__lead { font-size: 20px; color: var(--gold-light); letter-spacing: 1px; margin-bottom: 14px; }
.tut2-intro__sub { font-size: 15px; color: var(--cream); line-height: 1.8; margin: 6px 0; }
.tut2-intro__sub b { color: var(--gold-light); }
.tut2-recap { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 18px 0; }
.tut2-recap__item { font-size: 15px; color: var(--cream); background: rgba(20,12,6,0.45);
  border: 1px solid rgba(212,175,55,0.3); border-radius: 999px; padding: 6px 16px; }
.tut2-bigbtn {
  display: inline-block; margin-top: 18px; cursor: pointer;
  font-size: 17px; font-weight: bold; color: var(--ink); letter-spacing: 2px;
  padding: 13px 34px; border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  box-shadow: 0 5px 14px rgba(0,0,0,0.4), 0 0 16px rgba(240,216,120,0.45);
  animation: audioBtnGlow 1.8s ease-in-out infinite;
}

/* 手势练习页：左 GIF 舞台 + 右说明 */
.tut2-practice { display: flex; gap: 26px; align-items: stretch; }
.tut2-stage {
  position: relative; flex-shrink: 0;
  width: 380px; height: 320px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 45%, rgba(40,26,14,0.5), rgba(20,12,6,0.5));
  border: 2px solid rgba(212,175,55,0.3); border-radius: 16px;
}
/* GIF 容器 */
.tut2-gifwrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 2; }
.tut2-gif {
  width: 220px; height: 220px; object-fit: contain;
  border-radius: 14px; background: rgba(255,255,240,0.12);
}
.tut2-facing { font-size: 13px; color: rgba(242,228,196,0.8); letter-spacing: 1px; }

/* 电脑/摄像头方位图片 */
.tut2-computer {
  position: absolute;
  object-fit: contain;
  pointer-events: none;
}

/* left 方位：电脑图片在舞台左侧，作为方位标记（GIF 旁边），向左偏移 20% */
.tut2-stage.is-left .tut2-computer {
  left: 6px; top: 50%; transform: translate(-20%, -50%);
  height: 72%; width: auto; z-index: 3;
}

/* bottom 方位：电脑图片在舞台底部，作为方位标记 */
.tut2-stage.is-bottom .tut2-computer {
  bottom: 6px; left: 50%; transform: translateX(-50%);
  width: 55%; height: auto; z-index: 3;
}

/* top 方位：电脑图片在手正前方，作为背景层放在 GIF 下方（放大 15%） */
.tut2-stage.is-top .tut2-computer {
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 98%; height: 94%; z-index: 1;   /* 低于 .tut2-gifwrap 的 z-index:2 */
}
/* 方位留白，给电脑图片腾出空间 */
.tut2-stage.is-left  .tut2-gifwrap { margin-left: 100px; }
.tut2-stage.is-top   .tut2-gifwrap { margin-top: 0; }
.tut2-stage.is-bottom .tut2-gifwrap { margin-bottom: 70px; }

/* top 方位 GIF 透明叠加在电脑图片上，让下层电脑可见 */
.tut2-stage.is-top .tut2-gif { background: transparent; box-shadow: none; }

/* 右侧说明栏 */
.tut2-side { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.tut2-distance {
  font-size: 15px; font-weight: bold;
  color: #ffcf6b; letter-spacing: 1px;
  text-align: center;
  background: rgba(255,150,60,0.18);
  border: 1.5px solid rgba(255,207,107,0.55);
  border-radius: 999px; padding: 8px 16px;
}
.tut2-desc { font-size: 16px; color: var(--cream); line-height: 1.75; }
.tut2-tip {
  font-size: 14px; color: #ffe6b0; line-height: 1.6;
  background: rgba(176,120,30,0.22); border-left: 4px solid var(--gold);
  border-radius: 6px; padding: 10px 14px;
}
.tut2-tip b { color: var(--gold-light); }
.tut2-status {
  font-size: 15px; color: var(--gold-light); letter-spacing: 1px; min-height: 22px;
  text-align: center;
}
.tut2-hold {
  width: 100%; height: 14px; background: rgba(0,0,0,0.5);
  border: 1px solid rgba(212,175,55,0.5); border-radius: 999px; overflow: hidden;
}
.tut2-hold__fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #4db6ff, #2e7d32);
  transition: width 0.12s linear;
}
.tut2-skip { font-size: 13px; color: rgba(242,228,196,0.6); text-align: center; cursor: pointer; }
.tut2-skip:hover { color: var(--gold-light); }

.tut2-foot { text-align: center; margin-top: 16px; }
.tut2-hint { font-size: 13px; color: rgba(242,228,196,0.7); letter-spacing: 1px; }

/* ============================================================
   查看菜谱 RecipeScene
   ============================================================ */
/* ============================================================
   菜谱界面 · 中式复古木质 / 暗金边 / 系统面板质感
   ============================================================ */
.recipe-scene {
  display: flex; flex-direction: column;
  align-items: stretch; justify-content: flex-start;
  padding: 16px 30px 12px;
  height: 100%;
  /* 深胡桃木纹背景：多层斜向木纹 + 暗角 */
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(90,60,32,0.35), rgba(0,0,0,0) 60%),
    repeating-linear-gradient(92deg, #2a1a0d 0px, #34210f 22px, #2c1c0e 44px, #38240f 66px),
    linear-gradient(180deg, #2a1a0d, #1d1208);
}
.recipe-header {
  text-align: center;
  font-size: 32px; font-weight: bold;
  color: var(--gold-light); letter-spacing: 12px;
  text-shadow: 0 2px 0 #6b4423, 0 4px 12px rgba(0,0,0,0.6);
  margin-bottom: 12px; flex-shrink: 0;
}
.recipe-header__deco { color: var(--gold); font-size: 22px; vertical-align: middle; opacity: 0.85; }
.recipe-body {
  display: flex;
  gap: 22px;
  flex: 1; min-height: 0;
}
.recipe-list {
  width: 268px; flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  overflow-y: auto;
  padding-right: 10px;
}
/* 古风滚动条：木褐凹槽 + 金边竹节滑块，替换出戏的灰色系统条。
   作用于菜谱列表与右侧详情滚动区域。 */
.recipe-list,
.recipe-detail__scroll {
  scrollbar-width: thin;                              /* Firefox */
  scrollbar-color: #b8893f rgba(43,26,15,0.45);
}
.recipe-list::-webkit-scrollbar,
.recipe-detail__scroll::-webkit-scrollbar { width: 10px; }
.recipe-list::-webkit-scrollbar-track,
.recipe-detail__scroll::-webkit-scrollbar-track {
  background: rgba(43,26,15,0.5);
  border-radius: 999px;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.5);
  margin: 4px 0;
}
.recipe-list::-webkit-scrollbar-thumb,
.recipe-detail__scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #e7c277, #c79a45 45%, #a87a30);
  border: 1px solid #8a6a32;
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(255,240,200,0.5), 0 0 4px rgba(0,0,0,0.4);
}
.recipe-list::-webkit-scrollbar-thumb:hover,
.recipe-detail__scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #f3d58a, #d8aa4f 45%, #b8893f);
}
.recipe-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(160deg, rgba(74,47,26,0.78), rgba(43,26,15,0.82));
  border: 1.5px solid rgba(212,175,55,0.32);
  border-radius: 12px;
  transition: all 0.15s ease;
  cursor: pointer;
}
.recipe-item__thumb {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 38% 32%, #fff, #e8e8ea 58%, #c4c4ca 100%);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.5), 0 2px 5px rgba(0,0,0,0.4);
}
.recipe-item__meta { flex: 1; }
.recipe-item__name { font-size: 18px; color: var(--cream); letter-spacing: 2px; }
.recipe-item__tag {
  display: inline-block; margin-top: 5px;
  font-size: 11px; padding: 1px 9px; border-radius: 5px; letter-spacing: 1px;
}
.recipe-item__tag.is-playable { background: rgba(46,125,50,0.55); color: #c8f0ca; }
.recipe-item__tag.is-info { background: rgba(120,90,40,0.55); color: #ffe6b0; }
.recipe-item--intro { justify-content: center; padding: 14px; }
.recipe-item--intro .recipe-item__name { font-size: 18px; color: var(--gold-light); letter-spacing: 3px; }
.recipe-item.is-focused {
  border-color: var(--gold-light);
  box-shadow: 0 0 0 2px rgba(212,175,55,0.6), 0 0 20px rgba(240,216,120,0.5);
  transform: translateX(4px);
  background: linear-gradient(160deg, rgba(96,64,34,0.92), rgba(58,36,18,0.92));
}

.recipe-detail {
  flex: 1; min-width: 0;
  padding: 0;
  background: linear-gradient(160deg, rgba(40,26,14,0.66), rgba(28,18,9,0.66));
  border: 2px solid rgba(212,175,55,0.45);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(240,216,120,0.12), 0 8px 22px rgba(0,0,0,0.45);
}
.recipe-detail__scroll { height: 100%; overflow-y: auto; padding: 22px 28px 26px; }
.recipe-detail.is-intro { display: flex; align-items: center; }
/* 菜谱总览 */
.recipe-intro { padding: 10px 30px; }
.recipe-intro__title { font-size: 28px; font-weight: bold; color: var(--gold-light); letter-spacing: 4px; text-align: center; }
.recipe-intro__rule { height: 2px; margin: 14px auto 0; width: 70%;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.7), transparent); }
.recipe-intro__text { font-size: 16px; color: var(--cream); line-height: 1.95; margin-top: 18px; text-indent: 2em; }
.recipe-intro__tip { font-size: 14px; color: rgba(242,228,196,0.65); margin-top: 22px; text-align: center; }

/* 详情：标题区 */
.recipe-detail__title {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-size: 28px; font-weight: bold; color: var(--gold-light); letter-spacing: 4px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(212,175,55,0.3);
}
.recipe-detail__deco { color: var(--gold); font-size: 16px; opacity: 0.7; }
.recipe-detail__name { white-space: nowrap; }
.recipe-detail__badge { font-size: 12px; padding: 3px 11px; border-radius: 6px; letter-spacing: 1px; font-weight: normal; }
.recipe-detail__badge.is-playable { background: rgba(46,125,50,0.6); color: #d6f5d8; }
.recipe-detail__badge.is-cleared { background: rgba(212,175,55,0.7); color: var(--ink); }
.recipe-detail__badge.is-info { background: rgba(120,90,40,0.6); color: #ffe6b0; }
.recipe-detail__en { text-align: center; font-size: 13px; color: rgba(242,228,196,0.6); letter-spacing: 1px; margin-top: 8px; }

/* 详情：图 + 介绍 顶部双栏 */
.recipe-detail__top { display: flex; gap: 22px; align-items: flex-start; margin-top: 18px; }
.recipe-detail__plate {
  width: 168px; height: 168px; flex-shrink: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff, #e8e8ea 55%, #c9c9cf 78%, #aeaeb6 100%);
  box-shadow: inset 0 0 0 9px rgba(255,255,255,0.55), inset 0 -5px 14px rgba(0,0,0,0.12), 0 6px 14px rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
}
.recipe-detail__img { width: 150px; height: 150px; border-radius: 50%; }
.recipe-detail__introbox { flex: 1; min-width: 0; }
.recipe-detail__intro { font-size: 15px; color: var(--cream); line-height: 1.7; margin-top: 8px; }

/* 详情：分区标题（食材 / 步骤等） */
.recipe-sec { margin-top: 20px; }
.recipe-sec__label {
  display: inline-block;
  font-size: 16px; color: var(--gold-light); letter-spacing: 3px; font-weight: bold;
  padding: 3px 14px 3px 12px;
  background: linear-gradient(90deg, rgba(212,175,55,0.22), rgba(212,175,55,0));
  border-left: 4px solid var(--gold);
  border-radius: 3px;
}
.recipe-detail__ing {
  font-size: 15px; color: var(--cream); line-height: 1.8; margin-top: 10px;
  padding: 12px 16px;
  background: rgba(20,12,6,0.4);
  border: 1px solid rgba(212,175,55,0.2);
  border-radius: 10px;
}

/* 详情：制作步骤（有序列表，行距舒适） */
.recipe-steps { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.rstep {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 15px; color: var(--cream); line-height: 1.6;
  padding: 11px 14px;
  background: rgba(20,12,6,0.38);
  border: 1px solid rgba(212,175,55,0.16);
  border-radius: 10px;
}
.rstep__no {
  width: 26px; height: 26px; flex-shrink: 0; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--gold-light), var(--gold)); color: var(--ink);
  border-radius: 50%; font-size: 14px; font-weight: bold;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.rstep__text { flex: 1; }

.recipe-detail__cta {
  margin-top: 22px; text-align: center; font-size: 16px; color: var(--ink); font-weight: bold;
  letter-spacing: 2px;
  padding: 12px; border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 16px rgba(240,216,120,0.4);
}
.recipe-detail__cta.is-soon {
  color: rgba(242,228,196,0.7); font-weight: normal; background: rgba(20,12,6,0.4);
  border: 1px dashed rgba(212,175,55,0.4); box-shadow: none;
}

/* 底部操作栏：快捷键提示 */
.recipe-footer {
  flex-shrink: 0; margin-top: 12px;
  display: flex; align-items: center; justify-content: center; gap: 26px;
  font-size: 13px; color: rgba(242,228,196,0.7); letter-spacing: 1px;
}
.recipe-key b {
  display: inline-block; margin-right: 5px;
  color: var(--gold-light); font-weight: bold;
  padding: 2px 9px; border-radius: 6px;
  background: rgba(20,12,6,0.7); border: 1px solid rgba(212,175,55,0.4);
}

/* 手势状态角标（菜单类界面右上角悬浮） */
#gesture-badge {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 25;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--cream);
  background: rgba(20,12,6,0.78);
  border: 1px solid rgba(212,175,55,0.5);
  border-radius: 999px;
  padding: 6px 14px;
  backdrop-filter: blur(4px);
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: none;
}
#gesture-badge.is-on { border-color: rgba(123,209,127,0.7); color: #d6f5d8; }
#gesture-badge.is-loading { border-color: rgba(255,210,120,0.7); color: var(--gold-light); }
#gesture-badge.is-off { border-color: rgba(255,140,90,0.6); color: #ffd0b0; }

/* ============================================================
   烹饪动画引擎 cookfx.js 对应样式
   ============================================================ */
/* 动画舞台：覆盖在 station 内，居中铺满 */
.fx-stage {
  position: absolute;
  inset: 6px;
  z-index: 8;
  pointer-events: none;
  overflow: visible;
}
.fx-stage.is-fadeout { animation: fxStageFade 0.4s ease forwards; }
@keyframes fxStageFade { to { opacity: 0; } }

/* ---------- 切菜（v2：横切 + 碎屑飞出堆叠） ---------- */
.fx-chop__food {
  position: absolute; inset: 0;
  background-size: contain; background-position: center; background-repeat: no-repeat;
}
/* fit 模式：舞台铺满整个工位(与落地食材同一盒子原点)，
   食材层尺寸/定位由 imagefit 的内联 background-* 接管，不再用 contain。 */
.fx-chop--fit { inset: 0; }
/* 原料外层：负责屏幕坐标系的右侧裁切（刀切到哪，右边裁到哪）。
   clip-path 的"右侧"始终是屏幕右侧，与刀的左右移动严格一致。 */
.fx-chop__raw {
  position: absolute; inset: 0; z-index: 2;
  --chop-shrink: 0%;
  transition: clip-path 0.16s ease;
  clip-path: inset(0 var(--chop-shrink) 0 0);
}
/* 原料内层：承载背景图，可旋转 90° 做"横切"摆放（旋转不影响外层裁切方向） */
.fx-chop__raw-inner {
  position: absolute; inset: 0;
  background-size: contain; background-position: center; background-repeat: no-repeat;
}
.fx-chop__raw-inner--rot { transform: rotate(90deg); transform-origin: center; }
.fx-chop__raw.is-chopped-out { opacity: 0; transition: opacity 0.3s ease; }
.fx-chop__done { z-index: 12; }
/* 白底素材(.jpg)去白：正片叠底让白背景透出下方砧板，只留菜本体 */
.fx-chop__food--dewhite { mix-blend-mode: multiply; }
/* 切好成品出现时轻微弹一下，强调"切完了" */
.fx-chop__cut--done { animation: chopDonePop 0.32s ease; }
@keyframes chopDonePop {
  0%   { transform: scale(0.86); opacity: 0.4; }
  60%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
/* 切一刀飞出的碎屑：从被切处抛物线飞向案板右侧并堆叠保留(切几次留几个)。尺寸放大至原尺寸的两倍(2x)。 */
.fx-chop__debris {
  position: absolute;
  top: 40%; width: 62.4%; height: 62.4%;
  transform: translate(-50%, -50%) scale(0.9);
  background-size: contain; background-position: center; background-repeat: no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
  opacity: 0;
  --dx: 0%; --dy: 0%;
}
.fx-chop__debris.is-fling { animation: chopDebris 0.42s cubic-bezier(0.3,0.7,0.4,1) forwards; }
@keyframes chopDebris {
  0%   { opacity: 0;   transform: translate(-50%,-50%) translate(0,0) scale(0.6); }
  30%  { opacity: 1;   transform: translate(-50%,-50%) translate(calc(var(--dx)*0.5), -36%) scale(1.05); }
  100% { opacity: 1;   transform: translate(-50%,-50%) translate(var(--dx), var(--dy)) scale(1); }
}
.fx-chop__knife {
  position: absolute; top: -22px; left: 80%;
  font-size: 46px; z-index: 5;
  transform: translateX(-50%) translateY(0) rotate(8deg);
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.5));
  transition: left 0.22s cubic-bezier(0.4,0,0.3,1);
}
/* 手持菜刀图片模式：放大 1 倍(150→300px)并向上偏移 30%，
   使刀与案板上的菜处在同一水平线上，看起来真的"在切菜"而非悬空。 */
.fx-chop__knife--img {
  top: 60px;
  width: 300px; height: 300px;
  background-size: contain; background-position: center bottom; background-repeat: no-repeat;
  transform-origin: 42% 38%;   /* 大致刀刃落点，绕此点起落更自然 */
}
.fx-chop__knife.is-chop { animation: knifeChop 0.34s cubic-bezier(0.4,0,0.6,1); }
@keyframes knifeChop {
  0%   { transform: translateX(-50%) translateY(-26px) rotate(-12deg); }
  55%  { transform: translateX(-50%) translateY(10px) rotate(10deg); }
  70%  { transform: translateX(-50%) translateY(2px) rotate(6deg); }
  100% { transform: translateX(-50%) translateY(0) rotate(8deg); }
}
/* 手持菜刀的切下：抬手→落刀，幅度更大更像剁 */
.fx-chop__knife--img.is-chop { animation: knifeChopImg 0.34s cubic-bezier(0.4,0,0.6,1); }
@keyframes knifeChopImg {
  0%   { transform: translateX(-50%) translateY(-34px) rotate(-20deg); }
  55%  { transform: translateX(-50%) translateY(8px) rotate(6deg); }
  70%  { transform: translateX(-50%) translateY(0) rotate(2deg); }
  100% { transform: translateX(-50%) translateY(0) rotate(4deg); }
}
.fx-chop__spark {
  position: absolute; top: 46%;
  transform: translate(-50%,-50%);
  color: #fff6c8; font-size: 22px; z-index: 6;
  animation: chopSpark 0.36s ease forwards;
  text-shadow: 0 0 6px rgba(255,220,120,0.9);
}
@keyframes chopSpark {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(0.4); }
  40% { opacity: 1; transform: translate(-50%,-60%) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%,-80%) scale(0.6); }
}

/* ---------- 搅拌 ---------- */
.fx-stir__food {
  position: absolute; inset: 8%;
  background-size: contain; background-position: center; background-repeat: no-repeat;
  z-index: 2;
}
.fx-stir__food.is-spin { animation: stirSpin 0.7s linear infinite; filter: blur(1.5px); }
@keyframes stirSpin {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.04); filter: blur(2.4px); }
  100% { transform: rotate(360deg) scale(1); }
}
.fx-stir__food.is-settle { animation: stirSettle 0.42s ease; filter: blur(0); }
@keyframes stirSettle { 0%{transform:rotate(-18deg) scale(1.06); filter:blur(2px);} 100%{transform:rotate(0) scale(1); filter:blur(0);} }
.fx-stir__spoon {
  position: absolute; top: 0; left: 50%;
  font-size: 46px; z-index: 4;
  transform-origin: 50% 90%;
  animation: spoonStir 0.7s linear infinite;
  transition: opacity 0.3s ease;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
}
@keyframes spoonStir {
  0%   { transform: translateX(-50%) rotate(-26deg); }
  50%  { transform: translateX(-50%) rotate(26deg); }
  100% { transform: translateX(-50%) rotate(-26deg); }
}

/* ---------- 擂(pound) ---------- */
/* 擂棒斜插擂钵，顺棒长方向(轴向)反复捣压。轴向约 -28°，运动沿该方向往返。
   擂棒放大 200%(尺寸 ×3)，右移 20%；并整体再上移(top 由 -56% 提到 -86%)，
   让擂棒头部不再戳到擂钵下方、更贴合"在钵口往下捣"的位置。 */
.fx-pound__stick {
  position: absolute;
  left: 72%; top: -86%;
  width: 90%; height: 360%;
  z-index: 6;
  background-size: contain; background-position: center; background-repeat: no-repeat;
  font-size: 126px; text-align: center;
  transform-origin: 50% 80%;
  transform: translate(-50%, 0) rotate(-26deg);
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.5));
  opacity: 0;
}
.fx-pound__stick--img { /* 图片擂棒：用 background 呈现 */ }
/* 捣压循环：沿棒轴向(约 -26°方向)上下往返，配合轻微缩放表现"压下去" */
.fx-pound__stick.is-pounding { animation: stickPound 0.46s ease-in-out infinite; opacity: 1; }
@keyframes stickPound {
  0%   { transform: translate(-50%, -14%) rotate(-26deg) scale(1); }
  50%  { transform: translate(-50%, 6%) rotate(-22deg) scale(0.98); }
  100% { transform: translate(-50%, -14%) rotate(-26deg) scale(1); }
}
.fx-pound__stick.is-lift { opacity: 0; transition: opacity 0.26s ease, transform 0.26s ease; transform: translate(-50%, -40%) rotate(-30deg); }

/* ---------- 倒调料 ---------- */
/* --pour-y：落点纵向位置(容器中心)，由 JS 按目标容器设置，默认 50% */
.fx-pour { --pour-y: 50%; }
/* 瓶子悬停在落点【正上方】(--pour-y 上方约 96px)，保证液线/颗粒从瓶口向下落进容器，
   不再固定贴着容器底部(之前 bottom:8% 导致锅这种落点偏上的容器里瓶子跑到落点下方)。 */
.fx-pour__bottle {
  position: absolute; left: 50%;
  top: calc(var(--pour-y) - 30px);
  font-size: 40px; z-index: 6;
  transform: translate(-50%, 40px) rotate(0deg);
  transition: transform 0.45s cubic-bezier(0.3,0,0.2,1);
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.5));
}
/* 真实调料瓶图片模式。
   关键：以【瓶口(图片顶部)】为旋转基准(transform-origin 顶部)，倾倒时绕瓶口翻转，
   瓶口位置基本不动、瓶身往上翻，使倒出的料汁/颗粒正好从"朝下的瓶口"落下，
   而不是从瓶底冒出。 */
.fx-pour__bottle--img {
  width: 58px; height: 58px; font-size: 0;
  background-size: contain; background-position: center; background-repeat: no-repeat;
  transform-origin: 50% 18%;   /* 瓶口在图片顶部附近，绕此点翻转 */
}
/* 升空到落点上方；倾斜到 ~150° 让瓶口明确朝下倒出 */
.fx-pour__bottle.is-up { transform: translate(-50%, -96px) rotate(0deg); }
.fx-pour__bottle.is-up.is-tilt { transform: translate(-50%, -96px) rotate(150deg); }
.fx-pour__bottle.is-shake { animation: bottleShake 0.42s ease 2; }
@keyframes bottleShake {
  0%,100% { transform: translate(-50%, -96px) rotate(150deg); }
  50%     { transform: translate(-50%, -100px) rotate(162deg); }
}
/* 碗倒料模式：碗(bowl.png)较大，碗内料汁(content 子层)随碗一起倾斜，表现"端碗倒料"。
   绕碗口(顶部 22%)翻转，倾斜到 ~125° 让料汁从碗口倒进容器。 */
.fx-pour__bowl {
  width: 96px; height: 96px;
  transform-origin: 50% 22%;
}
.fx-pour__bowl-content {
  position: absolute; inset: 0;
  background-size: contain; background-position: center; background-repeat: no-repeat;
}
.fx-pour__bowl.is-up { transform: translate(-50%, -86px) rotate(0deg); }
.fx-pour__bowl.is-up.is-tilt { transform: translate(-50%, -86px) rotate(125deg); }
.fx-pour__bowl.is-shake { animation: bowlPourShake 0.42s ease 2; }
@keyframes bowlPourShake {
  0%,100% { transform: translate(-50%, -86px) rotate(125deg); }
  50%     { transform: translate(-50%, -90px) rotate(135deg); }
}
/* 垂直液线：从【瓶口】落到容器中心(--pour-y)。瓶子升空到落点上方 ~96px，
   倾斜后瓶口约在落点上方 92px 处，故液线从此处起，一路落到容器中心。 */
.fx-pour__line {
  position: absolute; left: 50%;
  top: calc(var(--pour-y) - 92px);
  width: 5px; height: 0; transform: translateX(-50%);
  border-radius: 3px; z-index: 5;
  box-shadow: 0 0 6px rgba(255,230,150,0.6);
}
.fx-pour__line.is-fall { animation: pourLine 0.5s ease forwards; }
@keyframes pourLine {
  0%   { height: 0; opacity: 0.9; }
  60%  { height: 92px; opacity: 1; }
  100% { height: 92px; opacity: 0; }
}
/* 落点圆形：从小扩大 → 透明度渐降消失，圆心对准容器中心(--pour-y) */
.fx-pour__ripple {
  position: absolute; left: 50%; top: var(--pour-y);
  width: 14px; height: 14px; transform: translate(-50%,-50%) scale(0.3);
  border: 3px solid #fff; border-radius: 50%;
  z-index: 4; opacity: 0.9;
}
.fx-pour__ripple.is-spread { animation: pourRipple 0.85s ease-out forwards; }
@keyframes pourRipple {
  0%   { transform: translate(-50%,-50%) scale(0.3); opacity: 0.95; }
  70%  { opacity: 0.5; }
  100% { transform: translate(-50%,-50%) scale(3.6); opacity: 0; }
}
/* 固体颗粒：从【瓶口】(落点上方 ~90px)掉落到容器中心(--pour-y) 后淡出 */
.fx-pour__grain {
  position: absolute;
  top: calc(var(--pour-y) - 90px);
  width: 6px; height: 6px; border-radius: 50%;
  z-index: 5; opacity: 0;
  animation: pourGrain 0.8s ease-in forwards;
  box-shadow: 0 0 3px rgba(255,255,255,0.5);
}
@keyframes pourGrain {
  0%   { opacity: 0; transform: translateY(0) scale(0.8); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(90px) scale(1); }
}

/* ---------- 炒制三图层 ---------- */
/* 注意：wok.png 是「锅体在上、手柄在下」的俯视图，经 fitImageToBox 后
   物体撑满工位框，锅内圆心约落在框高 34% 处。故 fx-pan 上移对准锅内，
   否则食材会显示到锅口下沿/手柄上（"太低、不在锅里"）。 */
.fx-pan {
  position: absolute;
  left: 50%; top: 34%;
  width: 60%; height: 46%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  z-index: 4;
  pointer-events: none;
  overflow: visible;
}
.fx-layer {
  position: absolute; inset: 0;
  background-size: contain; background-position: center; background-repeat: no-repeat;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.45s ease, filter 0.5s ease;
  transform-origin: 50% 60%;
}
/* 下锅显示：用持久 opacity（普通规则，不占用 animation 属性，避免被 is-frying 覆盖） */
.fx-layer.is-in { opacity: 1; }
/* 下锅落入弹跳：一次性 transform 动画（与 is-frying 不同时存在，由 JS 切换） */
.fx-layer.is-drop { animation: layerDrop 0.5s ease forwards; }
@keyframes layerDrop {
  0%   { transform: translateY(-30px) scale(0.7); }
  60%  { transform: translateY(4px) scale(1.06); }
  100% { transform: translateY(0) scale(1); }
}
/* 持续翻炒：轻微摇摆/旋转，三层用不同节奏 */
.fx-layer--garlic.is-frying { animation: fry1 1.3s ease-in-out infinite; }
.fx-layer--meat.is-frying   { animation: fry2 1.6s ease-in-out infinite; }
.fx-layer--pepper.is-frying { animation: fry3 1.5s ease-in-out infinite; }
.fx-layer--egg.is-frying    { animation: fry2 1.5s ease-in-out infinite; }
/* 颠锅合并成品层(辣椒炒肉)：同样保留左右晃动的炒菜效果 */
.fx-layer--merged.is-frying { animation: fry2 1.5s ease-in-out infinite; }
@keyframes fry1 { 0%,100%{transform:rotate(-5deg) translateY(0);} 50%{transform:rotate(5deg) translateY(-4px);} }
@keyframes fry2 { 0%,100%{transform:rotate(4deg) translateX(0);} 50%{transform:rotate(-4deg) translateX(4px);} }
@keyframes fry3 { 0%,100%{transform:rotate(0) translateY(0);} 50%{transform:rotate(-6deg) translateY(3px);} }
/* 颠锅：各层上抛（--toss-h 由 JS 设定不同幅度） */
.fx-layer.is-toss { animation: layerToss 0.62s cubic-bezier(0.3,0,0.4,1); }
@keyframes layerToss {
  0%   { transform: translateY(0) rotate(0); }
  45%  { transform: translateY(var(--toss-h, -30px)) rotate(-13.2deg); }
  100% { transform: translateY(0) rotate(0); }
}
/* 油润光泽层：柔和斜向高光 + 几点反光，随炒熟程度由 JS 调 opacity */
.fx-gloss {
  position: absolute; inset: 0;
  z-index: 8;                 /* 食材之上、锅铲(z9)之下 */
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 26% 18% at 36% 32%, rgba(255,255,255,0.75), rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 16% 12% at 64% 52%, rgba(255,248,225,0.55), rgba(255,248,225,0) 72%),
    radial-gradient(circle at 50% 46%, rgba(255,236,180,0.18), rgba(255,236,180,0) 65%);
  mix-blend-mode: screen;     /* 只提亮高光、不压暗食材，做出油亮反光 */
  filter: blur(1px);
  transition: opacity 0.4s ease;
  animation: glossShine 2.6s ease-in-out infinite;
}
@keyframes glossShine {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(3px,-2px) scale(1.04); }
}

/* 锅铲（放大 30%、向下偏移 15%、向右偏移 15%，翻炒更有存在感）
   位置调整：基于原始位置向右平移50%(translateX)、向上平移10%(translateY负值) */
.fx-pan__spatula {
  position: absolute;
  right: 11%; top: 39%;
  width: 101%; height: 101%;
  z-index: 9;
  background-size: contain; background-position: center; background-repeat: no-repeat;
  font-size: 62px; text-align: center;
  transform-origin: 70% 86%;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
  /* 向右50% + 向上10%的位置微调 */
  transform: translateX(50%) translateY(-10%);
}
.fx-pan__spatula.is-flip { animation: spatulaFlip 0.6s ease; }
@keyframes spatulaFlip {
  0%   { transform: translateX(50%) translateY(-10%) rotate(0) translateY(0); }
  35%  { transform: translateX(50%) translateY(-10%) rotate(-32deg) translate(-14px,-10px); }
  70%  { transform: translateX(50%) translateY(-10%) rotate(18deg) translate(6px,4px); }
  100% { transform: translateX(50%) translateY(-10%) rotate(0) translateY(0); }
}
/* 炒制弹窗阶段：锅铲持续来回翻炒 */
.fx-pan__spatula.is-stirring { animation: spatulaStir 1.1s ease-in-out infinite; }
@keyframes spatulaStir {
  0%,100% { transform: translateX(50%) translateY(-10%) rotate(-14deg) translate(-10px,-2px); }
  50%     { transform: translateX(50%) translateY(-10%) rotate(16deg) translate(8px,6px); }
}
/* 颠锅时锅整体上下移动（在上一版基础上再放大 5%） */
.station.shape-wok.is-tossing { animation: wokToss 0.66s cubic-bezier(0.3,0,0.4,1); }
@keyframes wokToss {
  0%   { transform: translate(-50%,-50%); }
  40%  { transform: translate(-50%,calc(-50% - 26.5px)) rotate(-3.3deg); }
  70%  { transform: translate(-50%,calc(-50% + 6.6px)) rotate(2.2deg); }
  100% { transform: translate(-50%,-50%); }
}

/* ============================================================
   开场"点击进入"遮罩 —— 浏览器禁止零交互自动播放，必须点一次开启声音
   ============================================================ */
#audio-start-overlay {
  position: absolute; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(40,24,14,0.86), rgba(20,12,6,0.96));
  backdrop-filter: blur(3px);
  cursor: pointer;
  animation: audioStartIn 0.4s ease;
}
#audio-start-overlay.is-hide { opacity: 0; transition: opacity 0.36s ease; pointer-events: none; }
@keyframes audioStartIn { from { opacity: 0; } to { opacity: 1; } }
.audio-start__card {
  text-align: center; color: var(--cream);
  max-width: 680px;
  padding: 40px 56px;
  border: 3px solid var(--gold);
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(74,47,26,0.94), rgba(43,26,15,0.94));
  box-shadow: 0 0 40px rgba(240,216,120,0.35), inset 0 0 0 1px rgba(240,216,120,0.25);
  animation: audioCardPop 0.5s cubic-bezier(0.2,0.9,0.3,1.2);
}
@keyframes audioCardPop { 0% { transform: scale(0.86); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.audio-start__icon { font-size: 50px; margin-bottom: 6px; animation: audioIconPulse 1.6s ease-in-out infinite; }
@keyframes audioIconPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.audio-start__title { font-size: 40px; font-weight: bold; color: var(--gold-light); letter-spacing: 10px; text-shadow: 0 2px 6px rgba(0,0,0,0.5); }
.audio-start__sub { font-size: 15px; color: rgba(242,228,196,0.72); letter-spacing: 3px; margin-top: 8px; }
.audio-start__intro {
  margin: 22px auto 26px; max-width: 560px;
  font-size: 16px; line-height: 1.9; color: var(--cream);
  text-align: center; letter-spacing: 0.5px;
}
.audio-start__intro b { color: var(--gold-light); font-weight: bold; }
.audio-start__btn {
  display: inline-block; font-size: 22px; font-weight: bold; letter-spacing: 3px;
  color: var(--ink); background: linear-gradient(180deg, var(--gold-light), var(--gold));
  padding: 14px 40px; border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.4), 0 0 18px rgba(240,216,120,0.6);
  animation: audioBtnGlow 1.8s ease-in-out infinite;
}
@keyframes audioBtnGlow {
  0%,100% { box-shadow: 0 6px 16px rgba(0,0,0,0.4), 0 0 18px rgba(240,216,120,0.5); }
  50% { box-shadow: 0 6px 16px rgba(0,0,0,0.4), 0 0 30px rgba(240,216,120,0.95); }
}