/* Morph-App: was NUR diese App braucht.
   Alles Gemeinsame steht in /app/basis.css und wird davor geladen: Farbtokens,
   Raster, Kopfzeile, Knoepfe, Werbestreifen, Begruessung, Toast, Bewegung.

   Der Ablauf ist eine Bahn von oben nach unten (Bilder, Punkte, Vorschau,
   Speichern), die Buehne ist die einzige Flaeche, die scrollt.

   FARBEN: jede eigene Farbe PAARWEISE hell und dunkel. @media erhoeht die
   Spezifitaet nicht: wer nur den Hellwert setzt, hat den Dunkelmodus
   kaputtgemacht. AUSNAHME mit Absicht: die Marker auf dem Punkte-Editor
   werden im canvas gemalt (app.js) und folgen nicht dem Systemmodus, sie
   muessen sich nur vom FOTO abheben, nicht von der Oberflaeche. */

:root {
  --mo-blau:   #0091c8;   /* aktive Chips, wie die Bedienelemente der Basis */
  --mo-orange: #ff7d0f;   /* offene Paare und der gewaehlte Marker */
}

@media (prefers-color-scheme: dark) {
  :root {
    --mo-blau:   #35b4e0;
    --mo-orange: #ff9836;
  }
}

/* Kopf, Ladebalken, Buehne, Werbung: die Buehne nimmt den Rest. */
.app { grid-template-rows: auto auto minmax(0, 1fr) auto; }

/* Das Hinweiszeichen in der Kopfzeile, wie bei Collagen und Teste dich. */
.kopf-knopf {
  flex: none;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--linie);
  border-radius: 50%;
  background: var(--karte);
  color: var(--blau);
  font-family: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

/* ---------- Die Buehne ---------- */

.buehne {
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 2px 2px 6px;
}

/* Ein Abschnitt je Schritt, mit Luft dazwischen.
   :not(.hidden) ist Pflicht: die Basis kennt .hidden mit display:none, wird
   aber VOR dieser Datei geladen. Ein schlichtes display:grid haette bei
   gleicher Spezifitaet gewonnen, und Punkte-Editor und Speichern-Knoepfe
   stuenden schon da, bevor es Bilder gibt. Dieselbe Falle hat schon die
   Spiele-App erwischt. */
.abschnitt:not(.hidden) { display: grid; gap: 8px; margin-bottom: 14px; }

.mo-titel {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}
.mo-frei {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--leise);
}

/* Kleine Hinweiszeilen (Anleitung, iPhone-Speichern). */
.mo-hinweis {
  margin: 0;
  font-size: 12.5px;
  color: var(--gedimmt);
  text-align: center;
  line-height: 1.35;
}

/* ---------- Die beiden Bild-Slots ----------

   Vorher links, Nachher rechts, dazwischen der Tausch-Knopf. Beides sind
   LABELS um ein unsichtbares Dateifeld, wie in der Collagen-App: kein
   Skript-Klick, den ein Handy verschlucken kann. */

.mo-slots {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
}

.mo-slot {
  display: grid;
  gap: 5px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.mo-slot-bild {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  border: 2px dashed var(--linie);
  border-radius: 12px;
  background: var(--karte);
  overflow: hidden;
  transition: transform .08s ease;
}
.mo-slot:active .mo-slot-bild { transform: scale(.97); }
.mo-slot-bild img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.mo-slot-plus {
  font-size: 34px;
  font-weight: 700;
  color: var(--gedimmt);
}

.mo-slot-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--leise);
  text-align: center;
}

.mo-tausch {
  width: 40px; height: 40px;
  border: 2px solid var(--linie);
  border-radius: 50%;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.mo-tausch:active { transform: scale(.92); }

.mo-unsichtbar {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; overflow: hidden; pointer-events: none;
}

/* ---------- Chips (Umschalter und Einstellungen) ----------

   Dieselbe Handschrift wie Collagen und die Spiele-App: flache Pillen,
   die aktive gefuellt in Blau. */

.chipzeile {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.chip-name {
  flex: none;
  width: 74px;
  font-size: 13px;
  font-weight: 700;
  color: var(--leise);
}

.chip {
  min-height: 40px;
  padding: 0 14px;
  border: 2px solid var(--linie);
  border-radius: 12px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.chip:active { transform: scale(.96); }
.chip.an { background: var(--mo-blau); border-color: var(--mo-blau); color: #fff; }

/* ---------- Editoren und Vorschau ----------

   Alle canvas liegen auf Karten, wie die Leinwand der Collagen-App.
   Sie rechnen intern in voller Groesse und werden nur per CSS auf
   Bildschirmbreite gebracht.

   SEIT V2 sind BEIDE Bilder gleichzeitig zu sehen, jedes mit seinen zwei
   Markern: das Umschalten der V1 hat sich angefuehlt, als entstuenden
   staendig neue Punkte (Manni, 31.07.2026). Untereinander auf dem Handy,
   nebeneinander, wo Platz ist. */

.mo-editoren {
  display: grid;
  gap: 10px;
}
@media (min-width: 700px) {
  .mo-editoren { grid-template-columns: 1fr 1fr; }
}

.mo-editor { display: grid; gap: 5px; }
.mo-editor-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--leise);
  text-align: center;
}

.mo-karte {
  background: var(--karte);
  border-radius: 14px;
  padding: 8px;
}
.mo-karte canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  /* Feine Linie drumherum: ein helles Foto auf der hellen Karte
     waere sonst randlos unsichtbar. */
  box-shadow: 0 0 0 1px var(--linie);
}
/* Die Editoren fangen das Anfassen, das Scrollen gehoert der Buehne
   drumherum. touch-action setzt app.js zusaetzlich am Element. */
#editorA, #editorB { cursor: grab; }

.mo-reset { justify-self: center; }

/* ---------- Speichern-Zeile ---------- */

.mo-speichern {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.mo-speichern .knopf { font-size: 16px; }
.mo-teilen { grid-column: 1 / -1; }

/* ---------- Kleine Bildschirme ---------- */

@media (max-height: 640px) {
  .abschnitt { margin-bottom: 10px; }
  .chip { min-height: 36px; padding: 0 11px; font-size: 14px; }
}

/* Handy-Feinschliff wie bei Collagen: die Namenszeile der Chips wird zur
   eigenen kleinen Ueberschrift, die Chips darunter duerfen umbrechen. */
@media (max-width: 480px) {
  .chipzeile { row-gap: 5px; }
  .chip-name {
    flex-basis: 100%;
    width: auto;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
  }
  .chip { min-height: 34px; padding: 0 11px; font-size: 13px; border-radius: 10px; }
  .mo-speichern .knopf { font-size: 14.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .mo-slot-bild, .chip, .mo-tausch { transition: none; }
}