/* ============================================================
   NO PIXELS - Sectorum auf schmalen Schirmen
   ------------------------------------------------------------
   Die Hex-Karte ist 700px breit. Auf einem 375px-Bildschirm ragt
   sie 325px heraus und wird schlicht abgeschnitten - man sieht die
   halbe Karte und kommt an den Rest nicht heran.

   Sie wird deshalb wischbar gemacht statt verkleinert: auf 375px
   waeren die Hexfelder sonst so klein, dass man nichts mehr
   erkennt. Ein Schatten am Rand zeigt, dass es weitergeht.

   Das Plugin bleibt unangetastet.
   ============================================================ */

@media (max-width: 860px) {

  /*
   * Der Kartenbereich scrollt in sich. overscroll-behavior-x
   * verhindert, dass die ganze Seite mitwandert, wenn man am Ende
   * der Karte weiterwischt.
   */
  .np-sec-stage,
  .np-sec-map,
  .np-sec-fmap {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    /* Der Balken stoert im Kartenbild - der Schatten am Rand sagt
       schon, dass es weitergeht. */
    scrollbar-width: none;
  }

  .np-sec-stage::-webkit-scrollbar,
  .np-sec-map::-webkit-scrollbar,
  .np-sec-fmap::-webkit-scrollbar {
    display: none;
  }

  /*
   * Ein Hinweis, dass die Karte breiter ist als der Schirm: rechts
   * laeuft sie in einen Schatten aus.
   */
  .np-sec-stage,
  .np-sec-map {
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, #000 90%, rgba(0, 0, 0, .55) 100%);
    mask-image: linear-gradient(90deg, #000 90%, rgba(0, 0, 0, .55) 100%);
  }

  /*
   * Deko-Elemente (Rauch, Schleier) laufen ueber den Rand hinaus und
   * erzeugen Querscrollen der ganzen Seite. Sie sind Schmuck - sie
   * duerfen beschnitten werden.
   */
  .np-sec-smoke,
  .np-sec-glow,
  .np-sec-fx {
    max-width: 100%;
    overflow: hidden;
  }
}

/*
 * Auf ganz schmalen Schirmen die Karte etwas herauszoomen, damit
 * wenigstens die halbe Front im Blick ist, ohne zu wischen.
 */
@media (max-width: 480px) {
  .np-sec-stage > svg,
  .np-sec-map > svg {
    transform-origin: left center;
  }
}