:root{
  --max-width:420px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
.wrap{width:100vw;height:100vh;padding:0;margin:0;overflow:hidden}

/* ── Global: disable text selection & long-press callout everywhere ── */
*, img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* page background */
body{margin:0;background:#f3f3f3;font-family:system-ui,Segoe UI,Roboto,'Microsoft Yahei';
  background: linear-gradient(to bottom, #f3f3f3 0 85vh, #e6f2ff 85vh 100%);
}

/* Fullscreen scene: fill viewport and use cover so images have no black bars */
.scene{
  position:fixed;
  /* size will be set by JS to match 茶园.jpg aspect ratio and fit the viewport */
  left:50%;
  /* shift up so bottom 15% shows, and cap height to 85vh */
  top: calc(50% - 7.5vh);
  transform: translate(-50%,-50%);
  max-height:85vh !important;
  overflow:hidden;
  border-radius:0;
  touch-action:manipulation;
  background:transparent;
  /* 流畅性：隔离重绘范围 */
  contain: layout style;
  will-change: transform;
}
.scene img.layer{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
.scene img.base{z-index:1}
.scene img.garden{z-index:2;transition:transform .18s ease,filter .18s ease,opacity .18s ease;transform-origin:center;will-change:transform,filter,opacity}
.scene img.garden.hidden{opacity:0;pointer-events:none;transform:scale(.95)}

/* hover effect: golden border with scale */
.scene img.garden.hover{transform:scale(1.05);filter:drop-shadow(0 0 8px rgba(255,215,0,0.8)) drop-shadow(0 0 4px rgba(255,215,0,1));z-index:50}

/* 茶园2特殊悬停效果 - 左下角为中心点 */
.scene img#g2.hover{transform-origin:left bottom;transform:scale(1.05)}

/* tea indicator small at bottom-right, scaled 70% (缩小30%) */
#teaIndicator{position:absolute;right:6%;bottom:5%;width:22%;height:auto;transform:scale(2);transform-origin:center;z-index:6;pointer-events:none}

/* dynamic hand element */
.hand{
  position:absolute;right:6%;bottom:5%;width:42%;height:auto;z-index:200;transition:transform .8s cubic-bezier(.22,.9,.2,1),left .8s linear,top .8s linear,opacity .3s linear}

/* helper debug overlay for hotspots (can toggle on during debugging) */
.hot-debug{position:absolute;border:1px dashed rgba(255,255,255,.5);pointer-events:none}

/* when game finished */
.scene.finished .garden{opacity:0}

/* next chapter button */
.next-chapter-btn{
  position:fixed !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  /* 放大图标：从 22vw 增加到 35vw */
  width:clamp(28vw, 35vw, 42vw) !important;
  height:clamp(28vw, 35vw, 42vw) !important;
  max-width:none !important;
  max-height:none !important;
  min-width:none !important;
  min-height:none !important;
  background-image:url('assets/result.png') !important;
  background-size:contain !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-color:transparent !important;
  border:none !important;
  outline:none !important;
  cursor:pointer !important;
  z-index:101 !important;
  transition:transform 0.3s ease !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  /* 文本大小也按视口宽度比例缩放 */
  font-size:clamp(3vw, 3.8vw, 4.5vw) !important;
  font-weight:bold !important;
  color:#8B4513 !important;
  text-shadow:1px 1px 2px rgba(255,255,255,0.8) !important;
  padding:0 !important;
  margin:0 !important;
  box-shadow:none !important;
  box-sizing:border-box !important;
  text-align:center !important;
  line-height:1.4 !important;
  flex-direction:column !important;
  border-radius:0 !important;
}
.next-chapter-btn:hover{
  transform:translate(-50%,-50%) scale(1.05) !important;
  text-shadow:2px 2px 4px rgba(255,255,255,0.9) !important;
}

/* 关卡完成时的背景遮罩 - 让图标更突出 */
.chapter-complete-overlay{
  position:fixed !important;
  inset:0 !important;
  background:rgba(0,0,0,0.6) !important;
  backdrop-filter:blur(4px) !important;
  -webkit-backdrop-filter:blur(4px) !important;
  z-index:100 !important;
  animation:fadeInOverlay 0.4s ease !important;
}
@keyframes fadeInOverlay{
  from{opacity:0;}
  to{opacity:1;}
}



/* 第二章蒸茶特定样式 */
.steam-scene {
  background: #f5f5f5;
  overflow: hidden;
  touch-action: manipulation;
}

/* 只有背景图使用100%尺寸 */
.steam-scene .layer.base {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
}

/* 茶叶和蒸笼 - CSS控制尺寸和位置 */
.steam-scene .tea-leaves,
.steam-scene .steamer {
  position: absolute;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: auto;
}

/* 茶叶定位 - 左侧位置 */
.steam-scene .tea-leaves.positioned {
  left: 25%;
  top: 70%;
  width: 30%;
  height: auto;
  transform: translate(-50%, -50%) scale(1.5);
  transform-origin: center;
  transition: transform 0.18s ease, filter 0.18s ease;
  cursor: pointer;
  pointer-events: auto;
}

/* 蒸笼定位 - 右侧位置 */
.steam-scene .steamer.positioned {
  left: 75%;
  top: 35%;
  width: 25%;
  height: auto;
  transform: translate(-50%, -50%) scale(1.8);
  transform-origin: center;
  transition: transform 0.18s ease, filter 0.18s ease;
  cursor: pointer;
  pointer-events: auto;
}

/* 悬停效果（参考app.js） */
.steam-scene .tea-leaves.hover {
  transform: translate(-50%, -50%) scale(1.65);
  filter: brightness(1.1);
}

.steam-scene .steamer.hover {
  transform: translate(-50%, -50%) scale(1.95);
  filter: brightness(1.1);
}

.steam-scene .tea-leaves {
  z-index: 2;
}

.steam-scene .steamer {
  z-index: 3;
}

/* 蒸笼盖子样式 - 完全按照蒸笼标准，只在左边 */
.steam-scene .steamer-lid.positioned {
  position: absolute;
  left: 25%;
  top: 35%;
  width: 25%;
  height: auto;
  transform: translate(-50%, -50%) scale(1.8);
  transform-origin: center;
  z-index: 4;
  pointer-events: auto;
}

/* 拖动的茶图片样式 */
.steam-scene .steamer-part {
  position: absolute;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

.steam-scene .steamer-part.positioned {
  left: 78%;
  top: 27%;
  width: 20%;
  height: auto;
  transform: translate(-50%, -50%) scale(2.5);
  transform-origin: center;
  z-index: 2;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.18s ease, filter 0.18s ease;
}

.steam-scene .steamer-part.hover {
  transform: translate(-50%, -50%) scale(2.7);
  filter: brightness(1.1);
}

.steam-scene .dragging-tea {
  position: absolute;
  width: 15%;
  height: auto;
  transform: translate(-50%, -50%) scale(0.4);
  transform-origin: center;
  z-index: 10;
  pointer-events: none;
  opacity: 0.8;
}

/* 蒸笼盖子悬停效果 */
.steam-scene .steamer-lid.hover {
  transform: translate(-50%, -50%) scale(1.95);
  filter: brightness(1.1);
}

/* 最终蒸笼悬停效果 - 增加放大比例使效果更明显 */
.steam-scene .final-steamer.hover {
  transform: translate(-50%, -50%) scale(2.3);
  filter: brightness(1.1);
}

/* 空碗样式 - 左侧位置 */
.steam-scene .bowl {
  position: absolute;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: auto;
}

.steam-scene .bowl.positioned {
  left: 20%;
  top: 40%;
  width: 18%;
  height: auto;
  transform: translate(-50%, -50%)  scale(1.5);
  transform-origin: center;
  transition: transform 0.18s ease, filter 0.18s ease;
  cursor: pointer;
  pointer-events: auto;
  z-index: 15;
}

/* 空碗悬停效果 */
.steam-scene .bowl.hover {
  transform: translate(-50%, -50%) scale(1.6);
  filter: brightness(1.1);
}

/* 锤子样式 - 右侧位置 */
.steam-scene .hammer {
  position: absolute;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: auto;
}

.steam-scene .hammer.positioned {
  left: 80%;
  top: 50%;
  width: 20%;
  height: auto;
  transform: translate(-50%, -50%)  scale(1.5);
  transform-origin: center;
  transition: transform 0.18s ease, filter 0.18s ease;
  cursor: pointer;
  pointer-events: auto;
  z-index: 15;
}

/* 锤子悬停效果 */
.steam-scene .hammer.hover {
  transform: translate(-50%, -50%) scale(1.6);
  filter: brightness(1.1);
}


/* 火折关悬停效果 - 使用CSS伪类，不依赖JavaScript */
.steam-scene .fire-closed.positioned:hover:not(.moving) {
  transform: translate(-50%, -50%) scale(0.35) !important;
  filter: brightness(1.1) !important;
  transition: transform 0.2s ease, filter 0.2s ease !important;
}

/* 火折关移动状态 - 禁用悬停效果 */
.steam-scene .fire-closed.moving {
  pointer-events: none !important;
  cursor: default !important;
}

.steam-scene .fire-closed.moving:hover {
  transform: none !important;
  filter: none !important;
}

/* 备用：JavaScript hover类效果 */
.steam-scene .fire-closed.hover {
  transform: translate(-50%, -50%) scale(0.5);
  filter: brightness(1.1);
}

/* 动画火折样式 - 与原始火折格式保持一致 */
.steam-scene .animated-fire {
  position: absolute;
  left: 15%;
  top: 75%;
  width: 20%;
  height: auto;
  transform: translate(-50%, -50%) scale(0.3);
  transform-origin: center;
  z-index: 100;
  pointer-events: none;
  cursor: default;
  transition: none;
}

/* 火折拖动元素样式 */
.steam-scene .fire-drag {
  position: absolute;
  width: 20%;
  height: auto;
  transform: translate(-50%, -50%) scale(0.3);
  transform-origin: center;
  z-index: 100;
  pointer-events: none;
  cursor: grabbing;
}

/* 烟元素样式 - 与其他模块保持一致的格式 */
.steam-scene #smoke {
  position: absolute;
  width: 15%;
  height: auto;
  top: 15%;
  left: 65%;
  transform: translate(-50%, -50%) scale(4);
  transform-origin: center;
  z-index: 5;
  pointer-events: none;
  object-fit: contain;
  opacity: 1;
  transition: opacity 0.5s ease;
}

/* 吹火扇子悬停效果 - 使用CSS伪类，不依赖JavaScript */
.steam-scene .fire-fan.positioned:hover {
  transform: translate(-50%, -50%) scale(2.1) !important;
  filter: brightness(1.1) !important;
  transition: transform 0.2s ease, filter 0.2s ease !important;
}

/* 备用：JavaScript hover类效果 */
.steam-scene .fire-fan.hover {
  transform: translate(-50%, -50%) scale(2.5);
  filter: brightness(1.1);
}

/* 吹火扇子旋转动画 */
@keyframes fanSwing {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  25% {
    transform: translate(-50%, -50%) rotate(60deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  75% {
    transform: translate(-50%, -50%) rotate(60deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

/* 最终蒸笼样式 - 置于中央 */
.steam-scene .final-steamer {
  position: absolute;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

.steam-scene .final-steamer.positioned {
  left: 50%;
  top: 55%;
  width: 25%;
  height: auto;
  transform: translate(-50%, -50%) scale(1.8);
  transform-origin: center;
  z-index: 5;
}

/* 火折关样式 - 左下角 */
.steam-scene .fire-closed {
  position: absolute;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: auto;
}

.steam-scene .fire-closed.positioned {
  position: absolute;
  left: 15%;
  top: 75%;
  width: 20%;
  height: auto;
  transform: translate(-50%, -50%) scale(0.3);
  transform-origin: center;
  z-index: 6;
  pointer-events: auto;
  cursor: pointer;
}

/* 吹火扇子样式 - 右下角 */
.steam-scene .fire-fan {
  position: absolute;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

.steam-scene .fire-fan.positioned {
  position: absolute;
  left: 80%;
  top: 75%;
  width: 20%;
  height: auto;
  transform: translate(-50%, -50%) scale(2);
  transform-origin: center;
  z-index: 6;
  pointer-events: auto;
  cursor: pointer;
}

/* 交互元素样式 */
.steam-scene .interactive {
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.steam-scene .interactive:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

/* 只禁用文本选择，保持交互功能（全局 * 规则已覆盖，此处仅保留 pointer-events 说明） */
.steam-scene img {
  pointer-events: none; /* default; JS overrides per element */
}

/* 禁用整个场景的文本选择，但保持交互 */
.steam-scene {
  touch-action: none;
}

/* 第一章场景 */
.scene img {
  pointer-events: none; /* default; hover targets override */
}

.scene {
  touch-action: manipulation;
}



/* 隐藏元素 */
.steam-scene .hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.95);
}

/* 吹火扇子旋转动画 */
@keyframes fanSwing {
  0% { transform: translate(-50%, -50%) scale(2) rotate(0deg); }
  25% { transform: translate(-50%, -50%) scale(2) rotate(60deg); }
  50% { transform: translate(-50%, -50%) scale(2) rotate(0deg); }
  75% { transform: translate(-50%, -50%) scale(2) rotate(60deg); }
  100% { transform: translate(-50%, -50%) scale(2) rotate(0deg); }
}

/* small responsive tweak */
@media (max-width:360px){
  :root{--max-width:360px}
}

/* 第三章拍茶特定样式 */
.pat-scene {
  background: #f8f8f8;
  overflow: hidden;
  touch-action: manipulation;
}

/* 只有背景图使用100%尺寸 */
.pat-scene .layer.base {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
}

/* 蒸笼部分 - 右上区域 */
.pat-scene .steamer-part {
  position: absolute;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

.pat-scene .steamer-part.positioned {
  left: 78%;
  top: 27%;
  width: 20%;
  height: auto;
  transform: translate(-50%, -50%) scale(1.5);
  transform-origin: center;
  z-index: 2;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.18s ease, filter 0.18s ease;
}

/* 磨具 - 中间位置 */
.pat-scene .mold {
  position: absolute;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

.pat-scene .mold.positioned {
  left: 35%;
  top: 40%;
  width: 25%;
  height: auto;
  transform: translate(-50%, -50%) scale(2);
  transform-origin: center;
  z-index: 3;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.18s ease, filter 0.18s ease;
}

/* 茶饼多 - 右下位置 */
.pat-scene .tea-cake-many {
  position: absolute;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

.pat-scene .tea-cake-many.positioned {
  left: 80%;
  top: 47%;
  width: 20%;
  height: auto;
  transform: translate(-50%, -50%) scale(1.5);
  transform-origin: center;
  z-index: 4;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.18s ease, filter 0.18s ease;
}

/* 蒸笼部分悬停效果 */
.pat-scene .steamer-part.hover {
  transform: translate(-50%, -50%) scale(1.6);
  filter: brightness(1.1);
}

/* 磨具悬停效果 */
.pat-scene .mold.hover {
  transform: translate(-50%, -50%) scale(2.15);
  filter: brightness(1.1);
}

/* 茶饼多悬停效果 */
.pat-scene .tea-cake-many.hover {
  transform: translate(-50%, -50%) scale(1.65);
  filter: brightness(1.1);
}

/* 茶饼样式 */
.pat-scene .tea-cake {
  position: absolute;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

.pat-scene .tea-cake.positioned {
  /* 位置和缩放由JavaScript中的TEA_CAKE_CONFIG控制 */
  height: auto;
  transform-origin: center;
  z-index: 4;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.18s ease, filter 0.18s ease;
}

/* 茶饼悬停效果 */
.pat-scene .tea-cake.hover {
  transform: translate(-50%, -50%) scale(2.15);
  filter: brightness(1.1);
}

/* 竹签悬停效果 - 磨具正下方 */
.pat-scene .bamboo-stick.positioned.hover {
  transform: translate(-50%, -50%) scale(2.7) ;
  filter: brightness(1.1);
}

/* 煮好的茶 - 拖动元素 */
.pat-scene .dragging-tea {
  position: absolute;
  width: 25%;
  height: auto;
  transform: translate(-50%, -50%) scale(0.15);
  transform-origin: center;
  z-index: 10;
  pointer-events: none;
  object-fit: contain;
}

/* 拍茶场景中的可交互元素 */
.pat-scene .layer.bamboo-stick {
  position: absolute;
  width: auto;
  height: auto;
  object-fit: contain;
}







/* 竹签  */
.pat-scene .bamboo-stick.positioned {
  left: 30%;
  top: 55%;
  width: 20%;
  height: auto;
  transform: translate(-50%, -50%) scale(2.5);
  transform-origin: center;
  z-index: 4;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.18s ease, filter 0.18s ease;
}





/* 手拍元素样式 */
.pat-scene .hand-pat {
  position: absolute;
  width: 10%; /* 缩小到原来的0.5倍 */
  height: auto;
  object-fit: contain;
  pointer-events: none;
  z-index: 100;
}

/* 拍茶动画 - 覆盖整个场景 */
.pat-scene .patting {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}



/* pat-scene 和 roasting-scene 的 user-select 已由全局 * 规则覆盖 */

/* 导航按钮样式 */
.nav-button {
  position: fixed;
  left: 50%;
  bottom: 10%;
  transform: translateX(-50%);
  padding: 12px 25px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 25px;
  cursor: pointer;
  z-index: 1000;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
  font-family: system-ui, Segoe UI, Roboto, 'Microsoft Yahei';
}

.nav-button:hover {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.nav-button:active {
  transform: translateX(-50%) translateY(0);
  box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
}

/* 第五章按钮特殊样式 */
.next-chapter-button {
  background: #4CAF50;
  box-shadow: 0 4px 15px rgba(76,175,80,0.3);
}

.next-chapter-button:hover {
  background: #45a049;
  transform: translateX(-50%) translateY(-2px) scale(1.05);
  box-shadow: 0 6px 20px rgba(76,175,80,0.4);
}

/* 返回按钮样式 */
.back-button {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3);
  top: 10%;
  bottom: auto;
}

.back-button:hover {
  background: linear-gradient(135deg, #3d8bfd 0%, #00d4e8 100%);
  box-shadow: 0 6px 20px rgba(79, 172, 254, 0.4);
}

/* 第五章焙茶场景样式 */
.roasting-scene {
  background: #fafafa;
  overflow: hidden;
  /* touch-action: none 确保安卓 WebView 不拦截 touch 事件判断滚动，
     使 300ms 长按 timer 能准时触发，不被 300ms 点击延迟打断 */
  touch-action: none;
  /* 防止安卓长按触发系统文本选择/保存图片菜单 */
  -webkit-user-select: none;
  user-select: none;
}

.roasting-scene .layer.base {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
}

.roasting-scene .layer {
  position: absolute;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

.roasting-scene .layer.positioned {
  pointer-events: auto;
}

/* 焙茶工具 - 中央位置 */
.roasting-scene .roasting-tool.positioned {
  left: 50%;
  top: 50%;
  width: 30%;
  transform: translate(-50%, -50%) scale(1.5);
  transform-origin: center;
  z-index: 3;
  cursor: pointer;
  transition: transform 0.18s ease, filter 0.18s ease;
}

/* 茶叶 - 工具上方 */
.roasting-scene .tea-leaves.positioned {
  left: 50%;
  top: 30%;
  width: 25%;
  transform: translate(-50%, -50%) scale(1.2);
  transform-origin: center;
  z-index: 2;
  cursor: pointer;
  transition: transform 0.18s ease, filter 0.18s ease;
}

/* 火焰 - 工具下方 */
.roasting-scene .flame.positioned {
  left: 50%;
  top: 70%;
  width: 20%;
  transform: translate(-50%, -50%) scale(1.8);
  transform-origin: center;
  z-index: 4;
  cursor: pointer;
  transition: transform 0.18s ease, filter 0.18s ease;
}

/* 焙茶场景悬停效果 */
.roasting-scene .roasting-tool.hover {
  transform: translate(-50%, -50%) scale(1.65);
  filter: brightness(1.1);
}

.roasting-scene .tea-leaves.hover {
  transform: translate(-50%, -50%) scale(1.35);
  filter: brightness(1.1);
}

.roasting-scene .flame.hover {
  transform: translate(-50%, -50%) scale(1.95);
  filter: brightness(1.1);
}

/* 纯烤架 - 水平中央，垂直略向下 */
.roasting-scene .roasting-rack {
  position: absolute;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

.roasting-scene .roasting-rack.positioned {
  left: 50%;
  top: 55%; /* 垂直略向下 */
  width: 30%;
  height: auto;
  transform: translate(-50%, -50%) scale(2.8);
  transform-origin: center;
  z-index: 2;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.18s ease, filter 0.18s ease;
}

/* 纯烤架悬停效果 */
.roasting-scene .roasting-rack.hover {
  transform: translate(-50%, -50%) scale(2.9);
  filter: brightness(1.1);
}

/* 圆盘有茶 - 右下角 */
.roasting-scene .plate-with-tea {
  position: absolute;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

.roasting-scene .plate-with-tea.positioned {
  left: 80%;
  top: 90%;
  width: 20%;
  height: auto;
  transform: translate(-50%, -50%) scale(3.5);
  transform-origin: center;
  z-index: 3;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.18s ease, filter 0.18s ease;
}

/* 圆盘有茶悬停效果 */
.roasting-scene .plate-with-tea.hover {
  transform: translate(-50%, -50%) scale(3.6);
  filter: brightness(1.1);
}

/* 确保所有圆盘元素都在同一层级 */
.roasting-scene .plate-with-tea.positioned {
  z-index: 20 !important;
}

/* 箱子关 - 场景切换后出现 */
.roasting-scene .box-closed {
  position: absolute;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

.roasting-scene .box-closed.positioned {
  left: 52%;
  top: 59.6%;
  width: 25%;
  height: auto;
  transform: translate(-50%, -50%) scale(3.8);
  transform-origin: center;
  z-index: 15;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.18s ease, filter 0.18s ease;
}

/* 箱子关悬停效果 */
.roasting-scene .box-closed.hover {
  transform: translate(-50%, -50%) scale(3.9);
  filter: brightness(1.1);
}

/* 箱子空 - 场景切换后出现 */
.roasting-scene .box-empty {
  position: absolute;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

.roasting-scene .box-empty.positioned {
  left: 52%;
  top: 59.6%;
  width: 25%;
  height: auto;
  transform: translate(-50%, -50%) scale(3.8);
  transform-origin: center;
  z-index: 15;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.18s ease, filter 0.18s ease;
}

/* 箱子空悬停效果 */
.roasting-scene .box-empty.hover {
  transform: translate(-50%, -50%) scale(3.9);
  filter: brightness(1.1);
}

/* 箱子有 - 场景切换后出现 */
.roasting-scene .box-with-tea {
  position: absolute;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

.roasting-scene .box-with-tea.positioned {
  left: 52%;
  top: 59.6%;
  width: 25%;
  height: auto;
  transform: translate(-50%, -50%) scale(3.8);
  transform-origin: center;
  z-index: 15;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.18s ease, filter 0.18s ease;
}

/* 箱子有悬停效果 */
.roasting-scene .box-with-tea.hover {
  transform: translate(-50%, -50%) scale(3.9);
  filter: brightness(1.1);
}



/* roasting-scene user-select 已由全局 * 规则覆盖 */

/* ── 右上角控制按钮组 ─────────────────────────────────────────── */
.top-controls {
  position: fixed;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 10px;
  z-index: 999999;
}

.control-btn {
  width: 44px; height: 44px;
  border: 1px solid rgba(120,90,40,0.2);
  border-radius: 50%;
  background: rgba(255,252,240,0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.22s cubic-bezier(0.16,1,0.3,1);
  z-index: 10001;
}
.control-btn:hover {
  background: rgba(255,252,240,0.95);
  border-color: rgba(120,90,40,0.38);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 14px rgba(0,0,0,0.16);
}
.control-btn:active { transform: scale(0.95); }

.music-icon, .menu-icon, .reset-icon {
  font-size: 20px;
  user-select: none;
}

/* 文字版重置按钮 */
.reset-btn-text {
  font-size: 12px;
  font-weight: bold;
  color: rgba(80,60,30,0.85);
  font-family: system-ui, 'Microsoft Yahei', sans-serif;
}
.music-btn.muted .music-icon { opacity: 0.32; }

@keyframes pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.music-btn.loading .music-icon { animation: pulse 1s infinite; }

/* ── 导航菜单 ─────────────────────────────────────────────────── */
.nav-menu {
  position: fixed;
  top: 68px;
  right: 16px;
  background: rgba(255,252,242,0.96);
  border: 1px solid rgba(120,90,40,0.16);
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.32s ease, opacity 0.25s ease;
  z-index: 10000;
  min-width: 180px;
  font-family: 'STKaiti','KaiTi','Microsoft Yahei',serif;
}
.nav-menu.open {
  max-height: 400px;
  opacity: 1;
}
.nav-header {
  padding: 13px 16px 9px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.2em;
  color: rgba(80,50,15,0.65);
  border-bottom: 1px solid rgba(120,90,40,0.1);
  background: transparent;
}
.nav-item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: transparent;
  text-align: left;
  font-size: 14px;
  letter-spacing: 0.05em;
  color: rgba(55,35,10,0.8);
  cursor: pointer;
  transition: all 0.18s ease;
  border-bottom: 1px solid rgba(120,90,40,0.06);
  font-family: inherit;
}
.nav-item:last-child { border-bottom: none; }
.nav-item:hover {
  background: rgba(100,150,40,0.08);
  color: #3a6010;
  padding-left: 22px;
}
.nav-item.active-chapter {
  color: #4a7a18;
  background: rgba(90,140,35,0.07);
  font-weight: bold;
}
.nav-item.active-chapter::before {
  content: '▶ ';
  font-size: 10px;
}

/* ── 响应式 ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .top-controls { top: 12px; right: 12px; gap: 8px; }
  .control-btn  { width: 40px; height: 40px; }
  .music-icon, .menu-icon, .reset-icon { font-size: 18px; }
  .nav-menu  { top: 60px; right: 12px; }
}
@media (max-width: 480px) {
  .top-controls { top: 10px; right: 10px; gap: 6px; }
  .control-btn  { width: 36px; height: 36px; }
  .music-icon, .menu-icon, .reset-icon { font-size: 16px; }
  .nav-menu { top: 54px; right: 10px; min-width: 160px; }
}

/* ═══════════════════════════════════════════════════════════════
   互动提示动画 (hint) — 纯光晕呼吸，不改变尺寸和位置
   用法：给目标元素加 .hint-pulse 类即可自动循环，
         移除 .hint-pulse 类即停止。
   ═══════════════════════════════════════════════════════════════ */

/* 通用脉冲：只做 filter 光晕变化，完全不修改 transform/scale
   避免影响元素原始比例和定位 */
@keyframes hintPulse {
  0%   { filter: var(--hint-base-filter, none); }
  40%  { filter: drop-shadow(0 0 8px rgba(255,210,0,0.95))
                 drop-shadow(0 0 16px rgba(255,160,0,0.65))
                 brightness(1.1); }
  100% { filter: var(--hint-base-filter, none); }
}

/* 针对第一章茶园区域（同样只用 filter，不动 transform） */
@keyframes hintPulseGarden {
  0%   { filter: none; }
  40%  { filter: drop-shadow(0 0 10px rgba(255,210,0,0.95))
                 drop-shadow(0 0 20px rgba(255,160,0,0.6))
                 brightness(1.1); }
  100% { filter: none; }
}

/* 通用 hint 类 */
.hint-pulse {
  animation: hintPulse 1.6s ease-in-out infinite !important;
  pointer-events: auto !important;
}

/* 第一章茶园专用 hint */
.hint-pulse-garden {
  animation: hintPulseGarden 1.6s ease-in-out infinite !important;
  pointer-events: auto !important;
}

/* 确保 hint 层级足够高，不被其他图层遮挡 */
.hint-pulse,
.hint-pulse-garden {
  z-index: 60 !important;
}