.atlas-mobile-menu{display:none}
.atlas-mobile-menu[hidden]{display:none!important}
@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
  }

  body {
    padding-right: max(10px, env(safe-area-inset-right));
    padding-bottom: calc(82px + env(safe-area-inset-bottom));
    padding-left: max(10px, env(safe-area-inset-left));
  }

  .site-header {
    z-index: 90;
    grid-template-columns: minmax(78px, 96px) minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 64px;
    padding-top: max(8px, env(safe-area-inset-top));
  }

  .logo-link {
    width: 96px;
  }

  .site-title {
    min-width: 0;
    font-size: clamp(.82rem, 3.8vw, 1rem);
    line-height: 1.12;
    overflow-wrap: anywhere;
  }

  .mobile-menu-toggle {
    min-width: 68px;
    min-height: 48px;
  }

  /* Phone navigation uses a compact text dropdown, independent of the desktop blocks. */
  body .site-toolbar { display: none !important; }
  .site-header { width: 100%; grid-template-columns: 76px minmax(0, 1fr) 44px; min-height: 58px; gap: 8px; }
  .logo-link { width: 76px; }
  .mobile-menu-toggle { width: 44px; min-width: 44px; min-height: 44px; padding: 10px; border: 0; background: transparent; }
  .mobile-menu-icon { display: grid; gap: 5px; width: 22px; }
  .mobile-menu-icon > span { display: block; height: 2px; background: currentColor; border-radius: 1px; }
  body.mobile-menu-open .mobile-menu-icon > span:first-child { transform: translateY(7px) rotate(45deg); }
  body.mobile-menu-open .mobile-menu-icon > span:nth-child(2) { opacity: 0; }
  body.mobile-menu-open .mobile-menu-icon > span:last-child { transform: translateY(-7px) rotate(-45deg); }
  body.mobile-menu-open .atlas-mobile-menu {
    position: fixed; top: var(--mobile-menu-top, 66px); right: max(10px, env(safe-area-inset-right));
    z-index: 100; display: block; width: min(360px, calc(100vw - 20px));
    max-height: min(72dvh, calc(100dvh - var(--mobile-menu-top, 66px) - 12px));
    padding: 6px 12px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    background: #0b252b; border: 1px solid #466264; border-radius: 8px; box-shadow: 0 12px 32px #0008;
  }
  .atlas-mobile-menu a, .atlas-mobile-menu summary, .atlas-mobile-menu button {
    box-sizing: border-box; display: flex; align-items: center; width: 100%; min-height: 44px;
    padding: 8px 4px; border: 0; border-radius: 0; background: transparent; color: #e8f7ef;
    font: 500 1rem/1.35 system-ui, sans-serif; text-align: left; text-decoration: none; overflow-wrap: anywhere;
  }
  .atlas-mobile-menu a:hover, .atlas-mobile-menu button:hover { color: #ffdf89; background: #17393c; }
  .atlas-mobile-menu a[aria-current="page"] { color: #ffdf89; font-weight: 750; }
  .atlas-mobile-menu summary { display: list-item; list-style-position: inside; cursor: pointer; }
  .atlas-mobile-menu details, .atlas-mobile-info, .atlas-mobile-history { border-top: 1px solid #315257; }
  .atlas-mobile-group-links { padding: 0 0 6px 16px; }
  .atlas-mobile-primary .mobile-games-link { color: #ffdf89; font-weight: 750; }
  .atlas-mobile-history { display: flex; gap: 8px; }
  .atlas-mobile-history button { justify-content: center; font-size: .875rem; }
  .atlas-mobile-history button:disabled { opacity: .4; }
  .mobile-menu-backdrop { z-index: 70; background: #020b0d55; }
  .atlas-mini-console { display: none !important; }
  .mobile-families { display: none !important; }
  body.atlas-home-page { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .atlas-home-stage { display: block; min-height: 0; padding: 10px 0 16px; }
  .atlas-home-stage .atlas-story { display: none; }
  .atlas-home-stage .atlas-stage-center { max-width: 560px; margin: 0 auto; }
  .atlas-home-stage .ring-navigation { width: min(100%, calc(100svh - 110px)); max-width: 560px; height: auto; aspect-ratio: 1; }
  .atlas-home-stage .family-ring { display: block; }
  .atlas-home-stage .ring-center { width: 39%; height: auto; aspect-ratio: 1; }
  .atlas-home-stage .ring-center > img { width: 98%; max-width: 98%; max-height: 82%; }
  .atlas-home-stage .island-query-stack { display: none; }

  main,
  main#main,
  .atlas-shell,
  .workspace,
  .content-grid,
  .species-list-wrap,
  .detail-panel {
    min-width: 0;
    max-width: 100%;
  }

  main#main {
    width: 100%;
  }



  .ring-navigation {
    width: 100%;
    height: clamp(320px, 96vw, 380px);
    max-width: 420px;
  }

  .ring-center > img {
    width: 98%;
    max-width: 98%;
    max-height: 70%;
  }

  .island-query-stack {
    width: min(92%, 370px);
    gap: 7px;
    transform: translateY(10%);
  }

  .ring-center .island-record-search,
  .ring-center .island-search {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    padding: 6px;
  }

  .ring-center .island-record-search input,
  .ring-center .island-record-search button,
  .ring-center .island-search input,
  .ring-center .island-search button {
    min-height: 44px;
    padding: 9px 8px;
    font-size: .88rem;
  }

  .island-beta-note {
    padding: 3px 3px 1px;
    font-size: .75rem;
    line-height: 1.35;
  }

  .mobile-families {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 24px;
  }

  .mobile-family,
  .mobile-context {
    min-height: 58px;
    padding: 9px 8px;
  }

  .mobile-family strong {
    font-size: .86rem;
    line-height: 1.2;
  }

  .ring-credits {
    margin-bottom: 18px;
    text-align: left;
  }

  .ring-credits summary {
    min-height: 44px;
    padding: 10px 4px;
  }

  .atlas-story {
    padding-left: 18px;
  }

  .atlas-story h2 {
    font-size: 1.85rem;
  }

  .atlas-story h3 {
    font-size: 1.25rem;
  }

  .atlas-story p,
  .atlas-story-lead {
    font-size: 1rem !important;
    line-height: 1.55;
  }

  .families-panel {
    top: var(--atlas-header-height, 64px);
    padding: 8px max(10px, env(safe-area-inset-left));
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
  }

  .families-panel .family-button {
    min-height: 48px;
    scroll-snap-align: start;
  }

  .workspace {
    padding: 10px 0 18px;
  }

  .hero-board,
  .species-list-wrap,
  .detail-panel {
    border-radius: 6px;
  }

  .species-grid,
  .plant-grid {
    grid-template-columns: 1fr !important;
  }

  .species-card,
  .plant,
  .content-grid > *,
  .hero-board > * {
    min-width: 0;
  }

  .species-card img,
  .plant img {
    width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 9;
  }

  .list-head {
    align-items: stretch;
    gap: 10px;
  }

  .list-head select {
    width: 100%;
    min-height: 44px;
  }

  .record-step-controls {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    width: 100%;
  }

  .record-step-button {
    min-height: 48px;
  }

  .filter-row {
    padding-bottom: 4px;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
  }

  .filter {
    min-height: 48px;
    scroll-snap-align: start;
  }

  .question-row input,
  .question-row button,
  .controls input,
  .controls select,
  .search-page-form input,
  .search-page-form button {
    min-height: 48px;
  }

  .detail-panel img,
  .detail-panel video,
  .detail-panel iframe {
    max-width: 100%;
  }

  .detail-panel table,
  .detail-panel pre {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  .atlas-mini-console {
    display: none !important;
  }

  .atlas-share-dialog,
  .intelligence-console {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    margin: auto;
    border-radius: 7px;
  }

  .intelligence-shell {
    padding: 16px;
  }

  .intelligence-head {
    gap: 10px;
  }

  .intelligence-head h2 {
    font-size: clamp(1.25rem, 6vw, 1.75rem);
    overflow-wrap: anywhere;
  }

  .intelligence-panel,
  .intelligence-answer {
    padding: 14px;
  }

  footer {
    align-items: flex-start;
    padding-bottom: 22px;
  }
}

@media (max-width: 480px) {
  .site-header {
    grid-template-columns: 76px minmax(0, 1fr) 44px;
  }

  .logo-link {
    width: 76px;
  }

  .mobile-menu-toggle {
    min-width: 44px;
    padding-inline: 10px;
  }

  body.mobile-menu-open .atlas-toolbar-utilities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ring-center .island-record-search,
  .ring-center .island-search {
    grid-template-columns: minmax(0, 1fr) 62px;
  }

  .ring-center .island-record-search input,
  .ring-center .island-search input {
    width: 100%;
  }

  .search-page-form > div {
    grid-template-columns: 1fr;
  }

  .search-page-form button {
    width: 100%;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .atlas-share-actions {
    grid-template-columns: 1fr;
  }
}

.record-list-end { margin: 0; padding: 18px 12px; text-align: center; color: #b0cec7; font-size: .9rem; }
.mobile-back-to-records { display: none; }
@media (max-width: 1050px) {
  body.atlas-record-browser .species-list-wrap { scroll-margin-top: calc(var(--atlas-header-height, 64px) + 12px); height: auto; min-height: 0; max-height: none; overflow: visible; }
  body.atlas-record-browser .detail-panel { display: none; scroll-margin-top: calc(var(--atlas-header-height, 64px) + 12px); }
  body.atlas-record-browser.atlas-mobile-record-open .species-list-wrap { display: none; }
  body.atlas-record-browser.atlas-mobile-record-open .detail-panel { display: block; height: auto; min-height: 0; max-height: none; overflow: visible; }
  body.atlas-record-browser .mobile-back-to-records { display: block; position: sticky; top: var(--atlas-header-height, 64px); z-index: 3; min-height: 44px; width: 100%; padding: 10px 14px; border: 0; border-bottom: 1px solid #315257; background: #0b252b; color: #ffdf89; text-align: left; font: 700 1rem/1.3 system-ui, sans-serif; cursor: pointer; }
}