/* Shared mobile polish for the home page and every standalone destination. */
@media (max-width: 760px) {
  header nav,
  header > .bag,
  header > .nav-buy { display: none !important; }

  header .mobile-menu { display: block; min-width: 76px; min-height: 44px; }

  #mobile-nav {
    position: fixed;
    left: 3%;
    right: 3%;
    z-index: 20;
    max-height: calc(100dvh - 125px);
    overflow-y: auto;
    padding: 18px 22px;
    background: var(--cream);
    box-shadow: 0 15px 45px #412b2130;
  }

  #mobile-nav a,
  #mobile-nav button:not(.nav-lab) {
    display: flex;
    align-items: center;
    min-height: 48px;
    width: 100%;
    padding: 12px 8px;
    text-align: left;
  }

  #mobile-nav .nav-lab {
    min-height: 54px;
    margin: 5px 0;
  }

  #rott-lab .lab-body {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  #rott-lab .lab-universe { min-height: min(45svh, 420px); }
  #rott-lab .lab-info { border-left: 0; border-top: 1px solid #ffffff20; padding: 30px 6%; }

  #molecule-dialog { overflow-y: auto; }
  #molecule-dialog .molecule-layout { grid-template-columns: 1fr; height: auto; gap: 10px; }
  #molecule-dialog #molecule-stage { height: min(42svh, 340px); min-height: 250px; }
  #molecule-dialog .molecule-info { max-height: none; }
}

@media (max-width: 600px) {
  html,
  body { max-width: 100%; overflow-x: clip; }

  .button,
  .cause-game-controls button,
  .cause-route-buttons button,
  .viewer-controls button,
  .molecule-controls button,
  .component-catalogue button,
  .lab-components button,
  .explorer-controls button,
  .sound-dock button,
  .sound-dock input,
  .mobile-menu {
    min-height: 44px;
  }

  .component-pagination { align-items: flex-start; }
  .component-pagination a { max-width: 44%; overflow-wrap: anywhere; }

  .formula-page h1 { font-size: clamp(2.8rem, 12vw, 4rem); }
  .formula-page h2 { font-size: clamp(2.25rem, 10vw, 3.3rem); }
  .formula-page .formula-facts article { min-width: 0; }
  .formula-page .formula-facts span { letter-spacing: .1em; }
  .formula-page .formula-items a { min-width: 0; overflow-wrap: anywhere; }

  #label-viewer {
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    padding: 16px;
  }

  .label-viewer-head { align-items: flex-start; }
  .label-viewer-head h2 { font-size: 20px; line-height: 1.15; }
  .label-viewer-head button { flex: 0 0 auto; min-height: 44px; }
  .zoom-controls { flex-wrap: wrap; }
  .label-pan { height: calc(100% - 130px); }
}