:root {
  --ink-main: #4A3426;
  --ink-secondary: #75604E;
  --accent-red: #A94A3A;
  --accent-green: #617C69;
  --game-w: 1536;
  --game-h: 1024;
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #1a1510;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  color: var(--ink-main);
  /* 触屏：禁止页面级滚动/缩放手势与会话选择，避免拖拽被浏览器手势劫持 */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* ====== Game root: strict 1536x1024 landscape ====== */
#game-root {
  position: relative;
  width: min(100vw, calc(100vh * 3 / 2));
  height: min(100vh, calc(100vw * 2 / 3));
  aspect-ratio: 3 / 2;
  margin: auto;
  overflow: hidden;
  background: #000;
  /* 触屏：整个游戏区禁用滚动/缩放手势，保证拖拽与点击不被浏览器手势吞掉 */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

#master-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("../assets/master_bg_day.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  z-index: 0;
}

/* ====== HUD layer ====== */
#hud-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.hud-slot {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* 简单透明古风 Container（无白底矩形） */
  background: rgba(249, 245, 232, 0.82);
  border: 2px solid rgba(120, 84, 54, 0.55);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  padding: 0 6px;
}

.hud-text {
  position: relative;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  font-weight: 700;
  color: #4A3426;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  font-size: clamp(16px, calc(30 / 1536 * 100vw), 32px);
  line-height: 1.1;
}

/* HUD positions in 1536x1024 coordinate space
   box ~180x70, centered on given centerX / centerY=62 */
#hud-day {
  left: calc(145 / 1536 * 100%);
  top: calc(27 / 1024 * 100%);
  width: calc(180 / 1536 * 100%);
  height: calc(70 / 1024 * 100%);
}

#hud-time {
  left: calc(430 / 1536 * 100%);
  top: calc(27 / 1024 * 100%);
  width: calc(180 / 1536 * 100%);
  height: calc(70 / 1024 * 100%);
}

#hud-orders {
  left: calc(740 / 1536 * 100%);
  top: calc(27 / 1024 * 100%);
  width: calc(255 / 1536 * 100%);
  height: calc(70 / 1024 * 100%);
}

#hud-coins {
  left: calc(1070 / 1536 * 100%);
  top: calc(27 / 1024 * 100%);
  width: calc(200 / 1536 * 100%);
  height: calc(70 / 1024 * 100%);
}

/* ====== NPC layer: 3 fixed customer slots ====== */
#npc-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.npc-slot {
  position: absolute;
  width: calc(220 / 1536 * 100%);
  height: calc(300 / 1024 * 100%);
  top: calc(190 / 1024 * 100%);    /* bottomY 490 - h 300 */
  transition: opacity .35s ease, transform .35s ease;
}
/* 营业结束：冻结所有 NPC/食材的过渡与动画，原地定格（不影响结算面板） */
#game-root.business-ended .npc-slot,
#game-root.business-ended .npc-slot .npc-img,
#game-root.business-ended .slot-ui,
#game-root.business-ended .dialogue-bubble,
#game-root.business-ended .food-item {
  animation: none !important;
  transition: none !important;
}
.npc-slot.hidden { opacity: 0; pointer-events: none; }
.npc-slot.leaving {
  opacity: 0;
  transform: translateY(-28px) scale(0.94);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

#slot-left   { left: calc(400 / 1536 * 100%); } /* x=400..620, cx=510 */
#slot-center { left: calc(658 / 1536 * 100%); } /* x=658..878, cx=768 */
#slot-right  { left: calc(915 / 1536 * 100%); } /* x=915..1135, cx=1025 */

.npc-slot .npc-img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.15));
}

/* Dialogue Bubble + Hourglass layer (above counter, below HUD) */
#dialogue-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.slot-ui {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .3s ease;
}
.slot-ui.visible { opacity: 1; pointer-events: none; }
.slot-ui.leaving {
  opacity: 0;
  transform: translateY(-28px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.dialogue-bubble {
  position: absolute;
  top: calc(105 / 1024 * 100%);
  min-width: calc(64 / 1536 * 100%);
  max-width: calc(235 / 1536 * 100%);
  height: calc(64 / 1024 * 100%);
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(251, 246, 234, 0.96);
  border: 1.5px solid rgba(138, 106, 72, 0.65);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.dialogue-bubble.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.dialogue-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid rgba(138, 106, 72, 0.65);
}
.dialogue-bubble::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid rgba(251, 246, 234, 0.96);
  z-index: 1;
}
.db-food-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 100%;
}
.db-food-list img {
  width: clamp(32px, calc(46 / 1536 * 100vw), 46px);
  height: clamp(32px, calc(46 / 1024 * 100vh), 46px);
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.12));
}
.db-food-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* 已交付的食物：轻微淡化 + 绿色对勾 */
.db-food-item.delivered img {
  opacity: 0.55;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.12)) grayscale(0.3);
}
.db-check {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Noto Serif SC", "Ma Shan Zheng", serif;
  font-weight: 800;
  font-size: clamp(20px, calc(30 / 1536 * 100vw), 30px);
  line-height: 1;
  color: #2E7D32;
  text-shadow: 0 0 3px rgba(255,255,255,0.95), 0 1px 2px rgba(0,0,0,0.3);
  pointer-events: none;
}
.dialogue-bubble.hidden {
  opacity: 0;
  transform: translateY(6px) scale(0.96);
}

.hourglass {
  position: absolute;
  width: calc(72 / 1536 * 100%);
  height: calc(72 / 1024 * 100%);
  top: calc(244 / 1024 * 100%);
  border-radius: 50%;
  background: rgba(251, 246, 234, 0.92);
  border: 2px solid rgba(138, 106, 72, 0.8);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.hg-icon {
  width: clamp(18px, calc(30 / 1536 * 100vw), 30px);
  height: clamp(24px, calc(40 / 1024 * 100vh), 40px);
  display: block;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15));
}
.hg-icon svg { width: 100%; height: 100%; display: block; }
.hg-number {
  margin-top: 0;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  font-size: clamp(9px, calc(16 / 1536 * 100vw), 16px);
  font-weight: 700;
  color: #4A3426;
  line-height: 1;
}

/* Per-slot dialogue/hourglass positions
   Right bubble (left:980) sits ~72px right of the right NPC and looks right,
   so LEFT/CENTER use the same offset from their NPC centers for consistency. */
#slot-ui-left   .dialogue-bubble { left: calc(465 / 1536 * 100%); }
#slot-ui-center .dialogue-bubble { left: calc(723 / 1536 * 100%); }
#slot-ui-right  .dialogue-bubble { left: calc(980 / 1536 * 100%); }

/* Hourglass centers kept aligned with prior layout; RIGHT nudged right toward its NPC */
#slot-ui-left   .hourglass { left: calc(374 / 1536 * 100%); }
#slot-ui-center .hourglass { left: calc(657 / 1536 * 100%); }
#slot-ui-right  .hourglass { left: calc(902 / 1536 * 100%); }

/* Foreground counter extracted from the background so the NPC can sit behind it */
#table-fg {
  position: absolute;
  left: 0;
  top: calc(455 / 1024 * 100%);
  width: 100%;
  height: calc(569 / 1024 * 100%);
  z-index: 3;
  pointer-events: none;
}

/* ====== Food layer: ingredients / cooking / finished dishes ====== */
#food-layer {
  position: absolute;
  inset: 0;
  z-index: 5;  /* above counter (3) and dialogue (4), below HUD (10) */
  pointer-events: none;
}

.food-item {
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
  touch-action: none;
  transition: opacity .2s ease;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.18));
}
/* 放大隐形点击热区：移动端/平板上食物元素较小（约 33px），手指难以精准点中起点；
   用 ::before 向四周扩展约 16px，避免「点不中 → 拖不动 → 反复拖拽 → 烤糊」 */
.food-item::before {
  content: '';
  position: absolute;
  inset: -16px;
  pointer-events: auto;
}
.food-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}
/* 透明点击热区：向四周扩大约 18px（逻辑像素），移动端/平板更易抓取；
   不影响图像视觉尺寸与坐标定位，仅扩大可触发 pointerdown 的范围。 */
.food-item::after {
  content: "";
  position: absolute;
  inset: -18px;
  pointer-events: auto;
}
.food-item.hidden { opacity: 0; pointer-events: none; }
.food-item.dragging {
  z-index: 30;
  transform: scale(1.06);
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.32));
  /* 提升为独立合成层：拖拽时仅做 GPU 平移，避免逐帧重新光栅化 drop-shadow 滤镜（移动端卡顿主因） */
  will-change: transform;
}
.food-item.food-shake { animation: foodShake .32s ease; }
.food-item.food-reject { animation: foodReject .35s ease; }

/* 胡饼（生/熟/糊，案板与锅中）统一压扁成椭圆，贴合桌面透视 */
.food-hubing img {
  transform: scaleY(0.78);
  transform-origin: center bottom;
  filter: drop-shadow(0 3px 2px rgba(0,0,0,0.18));
}
/* 生胡饼在案板上：使用用户提供的真实生面饼立绘（覆盖铺满），同样压扁 */
.food-hubing-raw img {
  object-fit: cover;
}
/* 煮锅里的馄饨（生/熟/糊）统一压扁成椭圆，贴合锅内透视；径向遮罩让边缘柔和融入圆形锅底，弱化直角感 */
.food-wonton-inpot img {
  transform: scaleY(0.78);
  transform-origin: center bottom;
  -webkit-mask-image: radial-gradient(ellipse 53% 47% at 50% 52%, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(ellipse 53% 47% at 50% 52%, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%);
}
@keyframes foodShake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
@keyframes foodReject {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-5px) rotate(-3deg); }
  40% { transform: translateX(5px) rotate(3deg); }
  60% { transform: translateX(-4px) rotate(-2deg); }
  80% { transform: translateX(4px) rotate(2deg); }
}

/* NPC 拒收抖动（糊饼 / 错误订单交付时，仅该 NPC 抖动） */
.npc-slot .npc-img.npc-shake { animation: npcShake .42s ease; }
@keyframes npcShake {
  0%,100% { transform: translateX(0) rotate(0); }
  15% { transform: translateX(-7px) rotate(-4deg); }
  30% { transform: translateX(7px) rotate(4deg); }
  45% { transform: translateX(-6px) rotate(-3deg); }
  60% { transform: translateX(6px) rotate(3deg); }
  75% { transform: translateX(-3px) rotate(-2deg); }
  90% { transform: translateX(3px) rotate(2deg); }
}

/* Raw ingredient prep zones (clickable) */
.prep-zone {
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
  border-radius: 12px;
  background: transparent;
  border: 2px dashed rgba(138, 106, 72, 0);
  transition: background .15s ease, border-color .15s ease;
  /* 触屏：轻点即触发 click，不被微小位移当成滑动手势吞掉 */
  touch-action: none;
}
.prep-zone:hover {
  background: rgba(251, 246, 234, 0.22);
  border-color: rgba(138, 106, 72, 0.35);
}
.prep-zone .pz-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  font-size: clamp(11px, calc(18 / 1536 * 100vw), 18px);
  font-weight: 700;
  color: rgba(74, 52, 38, 0.78);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
}
.prep-zone:hover .pz-label { opacity: 1; }

/* 馄饨两步点击区：肉馅、馄饨皮；胡饼案板 */
#prep-filling { left: calc(800 / 1536 * 100%); top: calc(465 / 1024 * 100%); width: calc(145 / 1536 * 100%); height: calc(115 / 1024 * 100%); }
#prep-wrapper { left: calc(955 / 1536 * 100%); top: calc(470 / 1024 * 100%); width: calc(125 / 1536 * 100%); height: calc(120 / 1024 * 100%); }
#prep-hubing  { left: calc(1091 / 1536 * 100%); top: calc(624 / 1024 * 100%); width: calc(130 / 1536 * 100%); height: calc(140 / 1024 * 100%); }

/* 准备步骤高亮 / 错误反馈 */
.prep-zone.selected {
  background: rgba(251, 246, 234, 0.42);
  border-color: rgba(46, 125, 50, 0.65);
}
.prep-zone.flash {
  animation: prepFlash 0.35s ease;
}
@keyframes prepFlash {
  0%,100% { background: transparent; }
  50% { background: rgba(169, 74, 58, 0.25); }
}

/* Cooking state positions (fit inside the background pot / griddle openings) */
#food-pot     { left: calc(120 / 1536 * 100%); top: calc(370 / 1024 * 100%); width: calc(240 / 1536 * 100%); height: calc(170 / 1024 * 100%); }
#food-griddle { left: calc(55 / 1536 * 100%);  top: calc(615 / 1024 * 100%); width: calc(260 / 1536 * 100%); height: calc(140 / 1024 * 100%); }

/* Finished dish positions */
#food-bowl    { left: calc(1235 / 1536 * 100%); top: calc(400 / 1024 * 100%); width: calc(135 / 1536 * 100%); height: calc(190 / 1024 * 100%); }
#food-basket  { left: calc(1375 / 1536 * 100%); top: calc(405 / 1024 * 100%); width: calc(150 / 1536 * 100%); height: calc(220 / 1024 * 100%); }

/* ====== Mission panel (CSS guofeng container) ====== */
#mission-panel {
  position: absolute;
  left: calc(458 / 1536 * 100%);   /* centerX 768 - 310 */
  top: calc(195 / 1024 * 100%);    /* centerY 520 - 325 */
  width: calc(620 / 1536 * 100%);
  height: calc(650 / 1024 * 100%);
  background: rgba(249, 245, 232, 0.94);
  border: 3px solid rgba(120, 84, 54, 0.7);
  border-radius: 18px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.28);
  z-index: 8;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  color: #4A3426;
  text-align: center;
  box-sizing: border-box;
  padding: 2% 4%;
}
#mission-panel.hidden { display: none; }
#mission-panel .mp-title {
  position: absolute; left: 50%; top: 12.6%;
  transform: translate(-50%, -50%);
  font-size: clamp(20px, calc(42 / 1536 * 100vw), 42px);
  font-weight: 700;
}
#mission-panel .mp-sub {
  position: absolute; left: 50%; top: 23.8%;
  transform: translate(-50%, -50%);
  font-size: clamp(15px, calc(30 / 1536 * 100vw), 30px);
  font-weight: 600; color: var(--ink-secondary);
}
#mission-panel .mp-line {
  position: absolute; left: 50%; transform: translate(-50%, -50%);
  width: 90%;
  margin: 0;
  font-size: clamp(13px, calc(25 / 1536 * 100vw), 25px);
  line-height: 1.6;
}
#mission-panel .mp-section { font-weight: 700; margin-top: 0; }
#mission-panel .mp-menu { font-weight: 700; letter-spacing: 6px; }
#mission-panel .mp-start {
  position: absolute; left: 50%; top: 88.3%;
  transform: translate(-50%, -50%);
  background: var(--accent-green); color: #FBF6EA;
  border: none; border-radius: 10px; cursor: pointer;
  padding: 8px 32px;
  font-family: inherit;
  font-size: clamp(13px, calc(26 / 1536 * 100vw), 26px);
  font-weight: 700;
  box-shadow: 0 2px 0 rgba(0,0,0,0.12);
}
#mission-panel .mp-start:active { transform: translate(-50%, -50%) scale(0.96); }

/* ====== NPC Library Test controls ====== */
#npc-test-controls {
  position: absolute;
  left: 50%;
  bottom: 3%;
  transform: translateX(-50%);
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
}
#npc-test-controls.hidden { display: none; }
.ntc-info {
  background: rgba(249, 245, 232, 0.9);
  border: 2px solid rgba(120, 84, 54, 0.55);
  border-radius: 10px;
  padding: 6px 18px;
  font-size: clamp(12px, calc(22 / 1536 * 100vw), 22px);
  color: #4A3426;
  font-weight: 700;
}
.ntc-buttons {
  display: flex;
  gap: 10px;
}
.ntc-buttons button, #dev-controls button {
  background: rgba(249, 245, 232, 0.9);
  border: 2px solid rgba(120, 84, 54, 0.55);
  border-radius: 8px;
  padding: 5px 14px;
  font-family: inherit;
  font-size: clamp(11px, calc(18 / 1536 * 100vw), 18px);
  color: #4A3426;
  cursor: pointer;
}
.ntc-buttons button:active, #dev-controls button:active { transform: scale(0.96); }

#dev-controls {
  position: absolute;
  left: 1%;
  bottom: 1.5%;
  z-index: 25;
  display: flex;
  gap: 8px;
}
#dev-controls.hidden { display: none; }

/* ====== Hitbox debug ====== */
#hitbox-layer { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
#hitbox-layer.hidden { display: none; }
.hitbox {
  position: absolute;
  border: 2px solid rgba(169, 74, 58, 0.9);
  background: rgba(169, 74, 58, 0.18);
  box-sizing: border-box;
}
.hitbox .hb-label {
  position: absolute; left: 4px; top: 2px;
  font-size: clamp(10px, calc(18 / 1536 * 100vw), 18px);
  color: #A94A3A; font-weight: 700;
  background: rgba(255,255,255,0.72); padding: 0 4px; border-radius: 3px;
  white-space: nowrap;
}
.slot-debug {
  position: absolute;
  border: 2px dashed rgba(120, 84, 180, 0.8);
  box-sizing: border-box;
}
.slot-debug .hb-label {
  position: absolute; left: 4px; top: 2px;
  font-size: clamp(10px, calc(16 / 1536 * 100vw), 16px);
  color: #6A4CB4; font-weight: 700; white-space: nowrap;
}

#debug-hint {
  position: absolute; right: 1%; bottom: 1.5%;
  font-size: clamp(10px, calc(16 / 1536 * 100vw), 16px);
  color: rgba(74,52,38,0.6); z-index: 21; pointer-events: none;
}

/* ====== Day complete overlay ====== */
#day-complete {
  position: absolute;
  left: calc(468 / 1536 * 100%);
  top: calc(237 / 1024 * 100%);
  width: calc(600 / 1536 * 100%);
  height: calc(550 / 1024 * 100%);
  background: rgba(249, 245, 232, 0.96);
  border: 3px solid rgba(120, 84, 54, 0.7);
  border-radius: 18px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.3);
  z-index: 15;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  color: #4A3426;
  text-align: center;
  box-sizing: border-box;
  padding: 4% 5%;
}
#day-complete.hidden { display: none; }
#day-complete .dc-title {
  position: absolute; left: 50%; top: 18%;
  transform: translate(-50%, -50%);
  font-size: clamp(22px, calc(44 / 1536 * 100vw), 44px);
  font-weight: 700;
}
#day-complete .dc-line {
  position: absolute; left: 50%; transform: translate(-50%, -50%);
  width: 90%;
  margin: 0;
  font-size: clamp(15px, calc(28 / 1536 * 100vw), 28px);
  line-height: 1.6;
}
#day-complete .dc-line:nth-of-type(1) { top: 44%; }
#day-complete .dc-line:nth-of-type(2) { top: 56%; }
#day-complete .dc-count, #day-complete .dc-coins {
  font-weight: 700; color: var(--accent-red);
}
#day-complete .dc-restart {
  position: absolute; left: 50%; top: 82%;
  transform: translate(-50%, -50%);
  background: var(--accent-green); color: #FBF6EA;
  border: none; border-radius: 10px; cursor: pointer;
  padding: 10px 36px;
  font-family: inherit;
  font-size: clamp(14px, calc(28 / 1536 * 100vw), 28px);
  font-weight: 700;
  box-shadow: 0 2px 0 rgba(0,0,0,0.12);
}
#day-complete .dc-restart:active { transform: translate(-50%, -50%) scale(0.96); }

/* ====== 触屏适配 ====== */
/* 无 hover 能力（触屏）设备：常显准备区文字，便于发现可点区域 */
@media (hover: none) {
  .prep-zone .pz-label { opacity: 1; }
  .prep-zone { border-color: rgba(138, 106, 72, 0.28); }
}

/* 竖屏 + 触屏：提示横屏（游戏为 3:2 横屏，竖屏不可用） */
#rotate-hint {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: none; /* 默认隐藏，仅竖屏+触屏时由下方媒体查询显示 */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4%;
  background: rgba(26, 21, 16, 0.94);
  color: #FBF6EA;
  font-size: clamp(16px, calc(30 / 1536 * 100vw), 30px);
  text-align: center;
  line-height: 1.5;
}
#rotate-hint .rh-phone {
  width: clamp(48px, calc(90 / 1536 * 100vw), 90px);
  height: clamp(84px, calc(160 / 1536 * 100vw), 160px);
  border: 3px solid #FBF6EA;
  border-radius: 14px;
  position: relative;
  animation: rhRotate 1.8s ease-in-out infinite;
}
#rotate-hint .rh-arrow {
  position: absolute;
  right: -14px; top: 50%;
  width: 18px; height: 18px;
  border-top: 3px solid #FBF6EA;
  border-right: 3px solid #FBF6EA;
  transform: translateY(-50%) rotate(45deg);
}
@keyframes rhRotate {
  0%, 40% { transform: rotate(0deg); }
  60%, 100% { transform: rotate(-90deg); }
}
@media (orientation: portrait) and (hover: none) {
  #rotate-hint { display: flex; }
}
/* 一键进入横屏按钮 */
#rh-enter-landscape {
  margin-top: 4%;
  padding: clamp(10px, calc(20 / 1536 * 100vw), 20px) clamp(24px, calc(48 / 1536 * 100vw), 48px);
  font-family: "Noto Serif SC", "Ma Shan Zheng", serif;
  font-size: clamp(16px, calc(30 / 1536 * 100vw), 30px);
  font-weight: 700;
  color: #4A3426;
  background: linear-gradient(180deg, #F4E3BF, #E1C58E);
  border: 2px solid #B8915A;
  border-radius: 999px;
  box-shadow: 0 4px 0 #9C7536, 0 8px 18px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
#rh-enter-landscape:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #9C7536, 0 4px 10px rgba(0, 0, 0, 0.4);
}
#rotate-hint .rh-note {
  margin-top: 3%;
  max-width: 80%;
  font-size: clamp(11px, calc(20 / 1536 * 100vw), 20px);
  line-height: 1.4;
  color: #D9C39A;
  opacity: 0.85;
}

/* ====== 玩法说明层 ====== */
#tutorial-overlay {
  position: absolute;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  pointer-events: auto;
  touch-action: none;
}
#tutorial-overlay.hidden { display: none; }

#tutorial-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* 透明热点：仅识别点击，完全不影响原图视觉效果 */
/* 坐标依据原图中真正的「开始」牌匾：x=489-974 / y=888-1017（1536x1024 原图坐标），覆盖整块牌匾含左右花朵装饰 */
#tutorial-start-hitbox {
  position: absolute;
  left: calc(479 / 1536 * 100%);
  top: calc(878 / 1024 * 100%);
  width: calc(505 / 1536 * 100%);
  height: calc(149 / 1024 * 100%);
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
  z-index: 71;
}
#tutorial-start-hitbox::before,
#tutorial-start-hitbox::after {
  content: none;
}

/* ====== 章节选择层 ====== */
#chapter-select-overlay {
  position: absolute;
  inset: 0;
  z-index: 55;
  background: #1a1510;
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  container-type: inline-size;
}
#chapter-select-overlay.hidden { display: none; }

#chapter-select-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* 透明热点：覆盖整栋建筑，仅用于识别点击 */
.chapter-hotspot {
  position: absolute;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  pointer-events: auto;
  touch-action: none;
  cursor: pointer;
  z-index: 1;
}
.chapter-hotspot.locked {
  cursor: not-allowed;
}

/* 章节建筑位置（基于 1536x1024 原图百分比） */
#chapter-mama-stall  { left: 2%;  top: 27%; width: 20%; height: 42%; }
#chapter-noodle-shop { left: 23%; top: 26%; width: 22%; height: 43%; }
#chapter-wine-house  { left: 49%; top: 24%; width: 23%; height: 46%; }
#chapter-dock-eatery { left: 70%; top: 28%; width: 26%; height: 41%; }

/* 锁定章节：柔和变暗遮罩（中心略暗、边缘羽化融入，避免硬边割裂） */
.chapter-dim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 78% 84% at 50% 56%,
              rgba(0, 0, 0, 0.30) 0%,
              rgba(0, 0, 0, 0.22) 52%,
              rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
  z-index: 1;
}

/* 锁定图标：居中，古代铜锁，精致但可见 */
.chapter-lock {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  width: clamp(40px, 5.8cqi, 76px);
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.55)) drop-shadow(0 0 4px rgba(245,210,140,0.45));
}
.chapter-lock svg {
  width: 100%;
  height: auto;
  display: block;
}
/* 面馆锁定图标：相对本建筑中心再向右偏移一点（仅水平，大小仍与其它锁一致） */
#chapter-noodle-shop .chapter-lock {
  left: 60%;
}
/* 锁符号定义容器（不可见，仅供 <use> 引用） */
.lock-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* 锁定章节点击反馈：锁轻微晃动 */
.chapter-hotspot.locked.shake .chapter-lock {
  animation: lockShake 0.35s ease;
}
@keyframes lockShake {
  0%, 100% { transform: translate(-50%, -50%) rotate(0); }
  25% { transform: translate(-50%, -50%) rotate(-8deg); }
  75% { transform: translate(-50%, -50%) rotate(8deg); }
}

/* ====== 封面页（游戏第一步） ====== */
#cover-overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  background: #1a1510;
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
#cover-overlay.hidden { display: none; }

#cover-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* 透明点击区：严格贴合原图“开始游戏”文字范围，不覆盖装饰框/花朵/空白 */
#cover-start-hitbox {
  position: absolute;
  left: 64.5%;
  top: 77%;
  width: 22%;
  height: 8%;
  background: transparent;
  border: none;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  z-index: 2;
}

/* ====== 取名页（首次进入） ====== */
#naming-overlay {
  position: absolute;
  inset: 0;
  z-index: 90;
  background: #1a1510;
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
#naming-overlay.hidden { display: none; }

#naming-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* 真实输入框：仅覆盖原图输入框内的文字行区域，
   左边缘与框内竖杠对齐，输入时只在这一行出现白底，不破坏外框装饰。 */
#naming-input {
  position: absolute;
  left: 54.5%;
  top: 46%;
  width: 30%;
  height: 11%;
  padding: 0 2% 0 1%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  color: #4A3426;
  font-family: 'Noto Serif SC', 'Songti SC', serif;
  font-size: clamp(20px, 4.2vh, 44px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: left;
  caret-color: #4A3426;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-user-select: text;
  user-select: text;
  z-index: 2;
  transition: background 0.15s ease;
}
#naming-input::placeholder {
  color: transparent;
}
#naming-input:focus::placeholder {
  color: transparent;
}
/* 输入名字时只在小文字行区域覆盖原图“请输入你的名字”，
   底色取框内纸张平均色以自然融入，保留外框与爪印可见。 */
#naming-input:not(:placeholder-shown) {
  background: rgba(230, 199, 155, 0.96);
}

/* 透明确认按钮：严格覆盖原图「确认」按钮（含边框与文字） */
#naming-confirm {
  position: absolute;
  left: 58.0%;
  top: 68.5%;
  width: 24.0%;
  height: 9.0%;
  background: transparent;
  border: none;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  z-index: 3;
}
#naming-confirm:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
#naming-confirm:active:not(:disabled) {
  transform: scale(0.98);
}

/* 轻量错误提示 */
#naming-error {
  position: absolute;
  left: 54.5%;
  top: 58%;
  width: 30%;
  text-align: left;
  color: #b94a38;
  font-family: 'Noto Serif SC', serif;
  font-size: clamp(12px, 1.6cqw, 18px);
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(255,255,255,0.6);
  pointer-events: none;
  z-index: 3;
}
#naming-error.hidden { display: none; }