/* ============================================================
   menu.css — 僅保留 Tailwind 無法直接處理的部分
   ============================================================ */

/* ── 背景 ── */
body {
  background: url('bg.png') no-repeat center center / cover fixed;
  font-family: sans-serif;
}

/* ── 玻璃擬態內框 ── */
.inner-wrapper {
  -webkit-backdrop-filter: blur(2px) saturate(120%);
  backdrop-filter: blur(2px) saturate(120%);
}
@media (prefers-reduced-transparency: reduce) {
  .inner-wrapper {
    background: rgba(255,255,255,.9) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ── 淡出過渡 ── */
#menuContainer.fade-out { opacity: 0; }

/* ── 手機版視口高度 ── */
@media (max-width: 600px) {
  body { overflow: hidden; }
  #menuContainer {
    max-width: none; width: 100%;
    height: calc(var(--vh,1vh)*100);
    padding: 2vh 2vw;
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start; gap: 1.5vh;
  }
  h1 { font-size: 7vh; margin: 0; line-height: 1; }
  .dish-grid {
    width: 100%; margin-top: 1vh; margin-bottom: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(40vw, 160px), 1fr));
    gap: 2vh 3vw;
    padding-bottom: env(safe-area-inset-bottom, 8px);
  }
  .dish-card { gap: .6vh; }
  .dish-card img {
    width: 100%; aspect-ratio: 1;
    border-width: 4px; border-radius: 14px;
    box-shadow: 2px 2px 6px rgba(0,0,0,.25);
  }
  .dish-card span { font-size: 3.2vh; white-space: nowrap; }
}