/* MatchUp top bar, shared by every page.
   Phones only (under 720px wide): the top bar stays pinned at the top of the
   screen, the menu button is a two-line icon, and the menu panel slides down
   from under the top bar and covers the rest of the screen.
   720px and wider: nothing here applies, so the top bar works as before.
   No font-family here: the header sets Inter itself, and build.js adds the
   Korean and Japanese fonts to the pages' own styles. */

@media (max-width: 719.98px) {
  /* Pinned top bar. It sits under the QR code popup (200) and above the page. */
  .site-header { position: sticky; top: 0; z-index: 150; }

  /* The two-line icon, centered in a tap area at least 44px square */
  #menu-btn { display: flex; align-items: center; justify-content: center; min-width: 44px; }

  /* The menu panel: from the bottom of the top bar to the bottom of the screen.
     The outer box stays still and hides anything above it, so the inner white
     panel looks like it slides out from under the top bar.
     site.js sets the exact height when the menu opens. */
  #mobile-menu { position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - 64px); height: calc(100dvh - 64px); overflow: hidden; }
  #mobile-menu > div { height: 100%; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; background: #FFFFFF; transform: translateY(-100%); transition: transform 150ms ease-in; }
  #mobile-menu.is-open > div { transform: translateY(0); transition: transform 200ms ease-out; }
}

/* With "reduce motion" on, the panel appears and disappears with no movement */
@media (max-width: 719.98px) and (prefers-reduced-motion: reduce) {
  #mobile-menu > div, #mobile-menu.is-open > div { transition: none; }
}