/* =====================================================================
 * menu.css —— 主界面（PS5 级视觉，日式白基调）
 * 生成り纸感渐变 + 朱/藍低饱和光晕 + 衬线大标题 + 圆角卡片悬浮。
 * ===================================================================== */
.menu { position: fixed; inset: 0; z-index: 100; display: none; }
.menu.is-open { display: grid; place-items: center; }
.menu__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(1100px 560px at 72% -8%, rgba(181,73,47,0.10), transparent 60%),
    radial-gradient(900px 520px at 8% 112%, rgba(47,72,88,0.08), transparent 60%),
    linear-gradient(180deg, #FAF8F3 0%, #F2F0E9 100%);
}
.menu__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(43,42,39,0.18), transparent),
    radial-gradient(1px 1px at 80% 60%, rgba(43,42,39,0.12), transparent),
    radial-gradient(1px 1px at 50% 82%, rgba(43,42,39,0.10), transparent);
  background-size: 240px 240px, 300px 300px, 200px 200px; opacity: .6;
}

.menu__body { position: relative; width: min(720px, 92vw); padding: 36px; display: flex; flex-direction: column; gap: 24px; }
.menu__title { text-align: left; }
.menu__title h1 {
  margin: 0; font-size: clamp(36px, 6.5vw, 58px); font-weight: 800; letter-spacing: 2px; line-height: 1.04;
  font-family: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif;   /* 和風衬线 */
  color: var(--text-primary);
}
.menu__year { color: var(--primary-color); font-weight: 700; }
.menu__sub { margin: 10px 0 0; color: var(--text-secondary); font-size: var(--fs-body); letter-spacing: .3px; }
.menu__logo {
  width: 44px; height: 44px; color: var(--primary-color); margin-bottom: 12px;
  border: 1px solid var(--border-color); border-radius: 12px; padding: 8px;
  background: var(--surface-color); box-shadow: var(--shadow-soft);
}

.menu__cards { display: flex; flex-wrap: wrap; gap: 14px; }
.menu-card {
  display: flex; align-items: center; gap: 10px; min-height: 66px; min-width: 184px;
  padding: 0 22px; border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.62); border: 1px solid var(--border-color);
  color: var(--text-primary); font-size: var(--fs-title); font-weight: 600; cursor: pointer;
  backdrop-filter: blur(10px); transition: transform .14s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.menu-card:hover { transform: translateY(-3px); border-color: var(--border-strong); background: rgba(255,255,255,0.9); box-shadow: var(--shadow-card); }
.menu-card:active { transform: translateY(0) scale(.99); }
.menu-card .nm-icon { width: 24px; height: 24px; color: var(--primary-color); }
.menu-card--primary { border-color: var(--primary-color); background: var(--primary-soft); }
.menu-card--primary:hover { background: rgba(181,73,47,0.16); }
.menu-card--wide { min-width: 100%; align-items: stretch; flex-direction: column; gap: 10px; text-align: left; font-weight: 400; }

.menu__foot { color: var(--text-secondary); font-size: var(--fs-caption); text-align: center; margin-top: 4px; letter-spacing: .3px; }

@media (max-width: 820px) {
  .menu__body { padding: 22px; gap: 16px; }
  .menu-card { min-height: 56px; min-width: 46%; flex: 1 1 46%; padding: 0 18px; }
}