/* ============================================================
   NIGHT ATLAS II — the pocket map
   On small screens the atlas panel scrolls away with its column.
   Here, the moment it leaves the viewport the SAME live map lifts
   into a fixed "pocket map" at the bottom-right — borders, capitals
   and event pulses keep updating because it is the same DOM node
   the scroll engine drives. Tap to expand into a centered overlay
   with the era header and full legend; tap the scrim, the close
   button, or press Escape to collapse. Desktop is untouched.
   ============================================================ */

@media (max-width: 980px) {
  /* placeholder: the aside keeps its height while the panel floats,
     so nothing below jumps and the engine's measurements hold */
  .ch-atlas.nx-hold { min-height: var(--nx-atlas-h, 240px); }

  .ch-atlas-sticky.nx-mini {
    position: fixed;
    top: auto;
    left: auto;
    right: calc(0.8rem + env(safe-area-inset-right, 0px));
    bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px));
    width: clamp(132px, 42vw, 210px);
    max-height: none;
    z-index: 34;
  }

  .ch-atlas-sticky.nx-mini .ch-atlas-head,
  .ch-atlas-sticky.nx-mini .ch-map figcaption,
  .ch-atlas-sticky.nx-mini .ch-map-tools { display: none; }

  .ch-atlas-sticky.nx-mini .ch-map {
    border-radius: 12px;
    border-color: rgba(233, 185, 73, 0.5);
    box-shadow:
      0 0 0 1px rgba(8, 17, 24, 0.9),
      0 0 0 4px rgba(233, 185, 73, 0.10),
      0 18px 44px rgba(0, 0, 0, 0.72);
  }

  /* declutter at pocket size: keep borders, dots and event pulses,
     drop everything typographic */
  .ch-atlas-sticky.nx-mini:not(.nx-open) .ch-map-sea-labels,
  .ch-atlas-sticky.nx-mini:not(.nx-open) .ch-map-place text,
  .ch-atlas-sticky.nx-mini:not(.nx-open) .ch-map-scale,
  .ch-atlas-sticky.nx-mini:not(.nx-open) .ch-modern-tag { display: none; }
  .ch-atlas-sticky.nx-mini:not(.nx-open) .ch-map-place { pointer-events: none; }
  .ch-atlas-sticky.nx-mini:not(.nx-open) .ch-map-gratline { opacity: 0.5; }

  /* the whole pocket map is one tap target (injected by JS) */
  .nx-mini-toggle {
    position: absolute;
    inset: 0;
    z-index: 5;
    border: 0;
    background: transparent;
    border-radius: 12px;
    cursor: pointer;
    padding: 0;
  }

  .nx-mini-toggle::after {
    content: "\2922"; /* expand */
    position: absolute;
    right: 7px;
    bottom: 4px;
    font-family: var(--font-mono);
    font-size: 0.95rem;
    line-height: 1;
    color: var(--gold);
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.95);
  }

  /* expanded: a centered chart-table over a dimmed page */
  .ch-atlas-sticky.nx-mini.nx-open {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: min(92vw, 540px);
    max-height: min(88vh, 700px);
    z-index: 47;
    background: var(--night-2);
    border: 1px solid rgba(62, 214, 195, 0.3);
    border-radius: 12px;
    padding: 0.85rem;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.8);
  }

  .ch-atlas-sticky.nx-mini.nx-open .ch-atlas-head { display: flex; }
  .ch-atlas-sticky.nx-mini.nx-open .ch-map figcaption { display: block; }

  .nx-mini-close {
    position: absolute;
    top: -0.6rem;
    right: -0.6rem;
    z-index: 6;
    width: 2.1rem;
    height: 2.1rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(233, 185, 73, 0.65);
    background: #0c161b;
    color: var(--gold);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
  }

  .nx-mini-close[hidden] { display: none; }

  .nx-scrim {
    position: fixed;
    inset: 0;
    z-index: 46;
    background: rgba(4, 9, 12, 0.66);
    backdrop-filter: blur(3px);
  }

  .nx-scrim[hidden] { display: none; }
}

@media (max-width: 980px) and (prefers-reduced-motion: no-preference) {
  .ch-atlas-sticky.nx-mini:not(.nx-open) { animation: nx-pop-corner 480ms var(--nx-ease); }
  .ch-atlas-sticky.nx-mini.nx-open { animation: nx-pop-center 380ms var(--nx-ease); }
  .nx-scrim:not([hidden]) { animation: nx-fade 260ms ease; }
}

@keyframes nx-pop-corner {
  from { opacity: 0; transform: translateY(14px) scale(0.9); }
  to { opacity: 1; transform: none; }
}

@keyframes nx-pop-center {
  from { opacity: 0; transform: translate(-50%, -47.5%) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}