/* Phone-first refinements for the Atlas. Desktop keeps the editorial layout. */
@media (max-width: 650px) {
  html { scroll-padding-top: 78px; }
  .hero-inner { padding-top: 42px; padding-bottom: 46px; }
  .hero h1 { font-size: clamp(42px, 13vw, 54px); }
  .hero p { font-size: 16px; }
  .stats { margin-top: 32px; justify-content:space-between; gap: 10px; }
  .stat { min-width: 0; }
  .stat strong { font-size: 27px; }
  .stat span { display: block; line-height: 1.25; }

  .intro, .fmjd, .explorer, .families, .geography { padding-top: 46px; padding-bottom: 46px; }
  .intro h2, .section-title { font-size: 32px; }
  .intro p { font-size: 16px; line-height: 1.55; }
  .fmjd-head { margin-bottom: 20px; }
  .card { min-height: 0; padding: 19px; }
  .card h3 { margin-top: 20px; }

  /* Give the playable media almost the whole phone width. */
  .explorer-top { margin-bottom: 24px; }
  .explorer-box, .explorer-box.has-applet { padding: 8px; gap: 18px; }
  .explorer-box.has-applet .board.applet {
    width: 100%;
    height: min(78svh, 650px);
    border-width: 4px;
  }
  .applet-nav { min-height: 44px; padding: 4px 7px; gap: 7px; }
  .applet-nav button { min-height: 34px; padding: 7px 12px; font-size: 12px; }
  .applet-nav span { margin-left: 2px; }
  .explorer-box.has-applet .details { padding: 16px 8px 8px; }
  .details h3 { font-size: 28px; }
  .rule { align-items: flex-start; padding: 11px 0; }
  .rule span { max-width: 58%; line-height: 1.35; }
  .gamebar { margin: 15px -8px 0; padding: 13px 8px; }
  .resources { margin: 14px -8px 0; padding: 14px 8px 0; }

  /* Filters should remain easy to scan without creating a tall block. */
  .filters { flex-wrap: nowrap; overflow-x: auto; margin: 20px -18px 22px; padding: 0 18px 6px; scrollbar-width: thin; }
  .filters button { flex: 0 0 auto; min-height: 36px; }
  .variant-card { padding: 16px; }
  .variant-card h3 { font-size: 20px; }
  .glossary { margin-top: 22px; }

  footer { padding: 32px 0; }
}

/* Dias stacks notation below the board on narrow screens. The iframe therefore
   needs room for both panels; otherwise the notation flex item squeezes the
   board down to a thin strip. */
@media (max-width: 700px) {
  .explorer-box.has-applet .board.applet {
    height: min(calc(100vw + 610px), 1160px);
    overflow: hidden;
  }
  .explorer-box.has-applet .board.applet iframe {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 100%;
  }
}