:root {
  --ui-background: #E6EDF3;
  --ui-surface: #FAFAF8;
  --ui-surface-soft: #F2F5F7;
  --ui-text: #243B53;
  --ui-text-muted: #536A7B;
  --ui-primary: #27485F;
  --ui-primary-hover: #315E78;
  --ui-primary-text: #FAFBFC;
  --ui-secondary: #F0F4F7;
  --ui-border: #C8D5DF;
  --ui-accent: #B49A6B;
  --ui-focus: #805D2D;
  color-scheme: light;
  font-family: 'Hiragino Sans', 'Yu Gothic', Meiryo, sans-serif;
  color: var(--ui-text);
  background: var(--ui-background);
  line-height: 1.8;
}
* { box-sizing: border-box; }
body { margin: 0; padding: 40px 16px; min-height: 100svh; }
.main-menu {
  width: 100%; max-width: 640px; margin: 0 auto; padding: 36px 24px 28px;
  text-align: center; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 12px;
}
.eyebrow { margin: 0 0 14px; font-size: 13px; letter-spacing: .14em; }
h1 { margin: 0; font-family: 'Hiragino Mincho ProN', 'Yu Mincho', serif; font-size: clamp(26px, 5vw, 38px); font-weight: 600; }
h1 span { display: inline-block; }
.game-subtitle { margin: 10px 0 0; font: 14px 'Hiragino Sans', 'Yu Gothic', Meiryo, sans-serif; color: var(--ui-text-muted); }
.introduction { margin: 22px 0 0; font-size: 15px; line-height: 2; }
.portraits { display: grid; grid-template-columns: repeat(2, 112px); justify-content: center; margin: 26px 0; }
figure { margin: 0; width: 112px; }
figure img { display: block; width: 192px; height: 192px; margin-left: -40px; image-rendering: pixelated; transform: scaleX(-1); }
figcaption { margin-top: 8px; font-size: 13px; }
.menu-actions { max-width: 320px; margin: 0 auto; }
.menu-actions button {
  width: 100%; min-height: 52px; border: 1px solid var(--ui-border); border-radius: 6px;
  background: var(--ui-secondary); color: var(--ui-text-muted); font: inherit; font-weight: 600;
}
.menu-actions button:disabled { cursor: not-allowed; opacity: 1; }
.menu-actions button:enabled { background: var(--ui-primary); color: var(--ui-primary-text); cursor: pointer; }
.menu-actions button:enabled:hover { background: var(--ui-primary-hover); }
button:focus-visible, a:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 4px; }
.menu-actions p { margin: 8px 0 20px; font-size: 13px; color: var(--ui-text-muted); }
.production-note { padding-top: 18px; border-top: 1px solid var(--ui-border); font-size: 13px; color: var(--ui-text-muted); }
.production-note p { margin: 0; }
.production-note p:first-child { margin-bottom: 4px; font-weight: 600; letter-spacing: .12em; }
.error-page { margin-top: 12vh; }
.error-page h1 { font-size: 24px; }
.error-page a { color: var(--ui-primary); }

/* タイトル専用の背景画像。カードと告知の下に置く。 */
.main-menu-page {
  position: relative; isolation: isolate;
  background-color: var(--ui-background);
  background-image: url('../assets/ui/title_rain_memory_bg.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.main-menu-page > .main-menu, .main-menu-page > .game-notice { position: relative; z-index: 1; }
.main-menu-page > .main-menu { border-color: var(--ui-accent); }
.main-menu-page > .game-notice {
  width: fit-content; max-width: min(100%, 600px); margin-top: 18px;
  padding: 10px max(18px, env(safe-area-inset-right, 0px))
    calc(10px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
  border: 1px solid rgba(250,250,248,.5); border-radius: 12px;
  background: rgba(242,245,247,.78); color: var(--ui-text); line-height: 1.7;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.main-menu-page > .game-notice p + p { margin-top: 3px; }
.main-menu-page .menu-actions button:enabled { border-color: var(--ui-accent); }

/* 既存の余白と区切り線の位置に収める、二組だけの金色飾り。 */
.main-menu-page .eyebrow, .main-menu-page .production-note { position: relative; }
.main-menu-page .production-note { border-top-color: transparent; }
.main-menu-page .eyebrow::before, .main-menu-page .eyebrow::after,
.main-menu-page .production-note::before, .main-menu-page .production-note::after {
  content: ""; position: absolute; left: 50%; box-sizing: border-box; pointer-events: none; opacity: .8;
}
.main-menu-page .eyebrow::before, .main-menu-page .production-note::before {
  width: 80px; height: 1px; border-left: 32px solid var(--ui-accent);
  border-right: 32px solid var(--ui-accent); transform: translateX(-50%);
}
.main-menu-page .eyebrow::after, .main-menu-page .production-note::after {
  width: 5px; height: 5px; background: var(--ui-accent);
  transform: translate(-50%, -50%) rotate(45deg);
}
.main-menu-page .eyebrow::before, .main-menu-page .eyebrow::after { top: calc(100% + 7px); }
.main-menu-page .production-note::before, .main-menu-page .production-note::after { top: -1px; }
@media (max-width: 480px) {
  body { padding: 16px; }
  .main-menu { padding: 28px 12px 24px; }
  .introduction { font-size: 14px; }
}