/* 此间 · T6 菜单板面板：像素风手写黑板（深绿板面+粉笔字+木框），与店内墙面菜单板呼应 */
/* T23.5：三段结构——.menu-header（固定头）/ .menu-content（唯一滚动区）/ .menu-actions（固定尾）；
   落座态 .is-seated = 底部靠停的局部操作面板。 */

/* 全屏背板：淡入，点击关闭 */
#menu-overlay {
  position: fixed; inset: 0;
  background: rgba(8, 6, 3, .45);
  display: flex; align-items: center; justify-content: center;
  z-index: 120;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s;
  touch-action: manipulation;
}
#menu-overlay.show { opacity: 1; visibility: visible; }

/* 落座态：面板靠底部，遮罩变淡（视觉占用变小，仍是覆盖层——背板照旧只关菜单） */
#menu-overlay.is-seated {
  align-items: flex-end;
  background: rgba(8, 6, 3, .20);
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

/* 黑板面板：木框+深绿板面，粉笔字；纵向 flex，头尾固定、中段内滚 */
#menu-panel {
  position: relative;
  display: flex; flex-direction: column;
  width: min(88vw, 600px);
  max-height: min(82vh, 760px);
  overflow: hidden;
  background: #354437;
  border: 6px solid #b99e86;
  outline: 2px solid #4a3620;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .55), inset 0 0 0 2px rgba(0, 0, 0, .25), inset 0 0 46px rgba(0, 0, 0, .28);
  color: #d0be9c;
  transform: scale(.92) translateY(10px);
  transition: transform .25s ease;
}
#menu-overlay.show #menu-panel { transform: scale(1) translateY(0); }
/* 落座态：局部操作面板，不超过 60% 视口高（vh 先写，dvh 覆盖——不支持 dvh 的浏览器退 vh） */
#menu-overlay.is-seated #menu-panel {
  width: min(92vw, 480px);
  max-height: min(60vh, 560px);
  max-height: min(60dvh, 560px);
}

/* 固定头：关闭按钮 + 标题 + 副标题 */
.menu-header {
  position: relative;
  flex: none;
  padding: 18px 26px 0;
}

/* 关闭按钮：粉笔 ×，命中区 ≥44pt */
.menu-close {
  position: absolute; top: 6px; right: 6px;
  width: 44px; height: 44px;
  background: none; border: none;
  color: #d0be9c;
  font-size: 26px; line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.menu-close:active { opacity: .6; }

.menu-title {
  font-size: 26px; letter-spacing: 6px; text-align: center;
  margin-bottom: 4px;
  text-shadow: 0 0 6px rgba(236, 232, 216, .35);
}
.menu-sub {
  text-align: center; font-size: 12px; color: #b99e86;
  border-bottom: 1px dashed rgba(236, 232, 216, .3);
  padding-bottom: 10px;
  letter-spacing: 1px;
}

/* 唯一滚动区：min-height:0 让 flex 子项真的能缩到内容以下 */
.menu-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 26px 4px;
}
.menu-content > .menu-cat:last-child { padding-bottom: 8px; }

.menu-cat { margin-top: 10px; }
.menu-cat-name {
  font-size: 16px; letter-spacing: 4px; color: #e0b870;
  margin-bottom: 6px;
  text-shadow: 0 0 5px rgba(255, 215, 122, .3);
}
.menu-cat-name::before { content: "· "; }
.menu-cat-name::after { content: " ·"; }

/* M10-c 时令一节：名字微暖绿（当季新到的读感），其余同常驻节 */
.menu-cat-seasonal .menu-cat-name { color: #b8cf8e; text-shadow: 0 0 5px rgba(184, 207, 142, .25); }
.menu-cat-seasonal .menu-item-price { color: #b8cf8e; }

/* 菜品行：可点，命中 ≥44pt（无备注的短行也补齐） */
.menu-item {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 44px;
  padding: 6px 2px 4px;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.menu-item-line {
  display: flex; align-items: baseline; justify-content: space-between;
}
.menu-item-name { font-size: 15px; letter-spacing: 1px; }
.menu-item-price { font-size: 14px; color: #e0b870; }
.menu-item-note { font-size: 12px; color: #b99e86; margin-top: 2px; line-height: 1.5; }

/* 固定尾：起身行（未落座整段隐藏，不留空白） */
.menu-actions {
  flex: none;
  padding: 10px 26px 16px;
  border-top: 1px dashed rgba(236, 232, 216, .3);
}
#menu-overlay:not(.is-seated) .menu-actions { display: none; }

/* M10-a 起身行：木底暖字按钮；命中 ≥44pt */
.menu-stand {
  display: block;
  width: 100%;
  min-height: 44px;
  background: #2b1f12;
  border: 1px solid #b99e86;
  border-radius: 8px;
  color: #e0b870;
  font-family: "Herein Pixel", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  letter-spacing: 4px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.menu-stand:active { transform: translateY(1px); opacity: .85; }