/* ── CANVAS ── */
.canvas {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
#powered-by {
  font-family: 'Caveat', cursive;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--black);
  text-align: center;
  padding: 0 0 8px;
  user-select: none;
  display: none;
}
body.locked #powered-by {
  display: block;
}
#powered-by a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2.5px;
}
#powered-by a:hover {
  opacity: 0.45;
}

.img-area {
  flex: 1;
  min-height: 0;
  position: relative;
  background: var(--white);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#out-img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 6;
  cursor: zoom-in;
}
/* Annotation bar liegt über out-img (z-index:7 in CSS) */
#mimg-hover-area,
#center-ref-clear,
#mimg-num {
  display: none !important;
}
#mimg-lock {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  margin-left: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--leiste-grau);
  transition: color 0.12s;
  cursor: pointer;
}
#mimg-lock:hover {
  color: var(--black);
}
#mimg-lock.ki-locked {
  color: var(--black);
}
#mimg-lock svg {
  transition: stroke-width 0.12s;
}

/* Menüs fixieren — Quadrat bleibt hellgrau, nur die beiden Striche reagieren */
#panel-pin {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  margin-right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
/* Strichstärken auf denselben realen Wert wie beim Seed-Lock gebracht.
   Der zeichnet 1.0 bzw. 1.6 in einer 28er-Fläche auf 36 px = 1,29 / 2,06 px real.
   Hier sind es 48 px, also 28/48 davon: 0.75 bzw. 1.2. */
#panel-pin .pin-frame {
  stroke: var(--leiste-grau);
  stroke-width: 0.75;
}
/* Drei Zustände:
   Ruhe        — Rechteck plus zwei Dreiecke an den Seiten, beide hellgrau;
                 die Dreiecke zeigen nach innen wie die Randpfeile der Menüs
   Überfahren  — nur die Dreiecke werden schwarz, sonst bleibt alles gleich
   Aktiviert   — die Dreiecke verschwinden, stattdessen zwei eingerückte
                 dunkle Linien: die geöffneten Menüs */
#panel-pin .pin-tri {
  fill: var(--leiste-grau);
  stroke: none;
  transition:
    fill 0.12s,
    opacity 0.12s;
}
#panel-pin .pin-bar {
  stroke: var(--black);
  stroke-width: 1.4;
  opacity: 0;
  transform-box: view-box;
  transform-origin: 14px 14px;
  transition:
    transform 0.25s ease,
    opacity 0.12s;
}
#panel-pin .pin-bar-l {
  transform: translateX(-7.1px);
}
#panel-pin .pin-bar-r {
  transform: translateX(7.1px);
}
/* Überfahren: nur die Dreiecke werden dunkel, sonst ändert sich nichts */
#panel-pin:hover .pin-tri {
  fill: var(--black);
}
/* Aktiviert: die Dreiecke weichen den eingerückten Linien */
#panel-pin.pinned .pin-tri {
  opacity: 0;
}
#panel-pin.pinned .pin-bar {
  opacity: 1;
}
#panel-pin.pinned .pin-bar-l,
#panel-pin.pinned .pin-bar-r {
  transform: none;
}
#mimg-lock:hover svg,
#mimg-lock.ki-locked svg {
  stroke-width: 1.6;
}

.placeholder {
  display: none;
}

.loading {
  position: absolute;
  inset: 0;
  display: none;
}
.loading.on {
  display: none;
}
.ld-label,
.ld-bar,
.ld-fill,
.ld-step {
  display: none;
}

.dl-btn {
  display: none !important;
}
#ab-btn {
  flex-shrink: 0;
}
.ab-btn {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: none;
  border: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  user-select: none;
  transition: opacity 0.15s;
  box-shadow: none;
}
.ab-btn::before {
  content: '';
  position: absolute;
  inset: 8px;
  pointer-events: none;
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 0.5px),
    var(--leiste-grau) calc(50% - 0.5px),
    var(--leiste-grau) calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
}
.ab-a,
.ab-b {
  position: absolute;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--leiste-grau);
  line-height: 1;
  pointer-events: none;
}
.ab-a {
  top: 7px;
  left: 8px;
  font-weight: 700;
}
.ab-b {
  bottom: 7px;
  right: 8px;
  font-weight: 700;
}
.ab-btn:hover::before {
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 0.5px),
    var(--black) calc(50% - 0.5px),
    var(--black) calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
}
.ab-btn:hover .ab-a {
  color: var(--black);
}
.ab-btn.on:hover .ab-b {
  color: var(--black);
}
.hist-nav-btn {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--leiste-grau);
  transition: color 0.15s;
}
.hist-nav-btn:hover {
  color: var(--black);
}
/* gedrückt: B fett, A normal */
.ab-btn.on .ab-a {
  font-weight: 400;
  color: var(--mid);
}
.ab-btn.on .ab-b {
  font-weight: 700;
}

.prompt-strip {
  display: none !important;
}
.ps-label {
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--light);
  margin-bottom: 2px;
}
.ps-text {
  font-size: 10px;
  color: var(--mid);
  line-height: 1.5;
  font-style: italic;
  max-height: 40px;
  overflow: hidden;
}

/* History — linke Ausrichtung wird per JS auf Bildkante gesetzt */
.history {
  display: flex;
  align-items: center;
  padding: 10px 0;
  gap: 5px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  transform: translateY(100%);
  transition: transform 0.28s ease;
  background: var(--schleier);
  z-index: 20;
}
body.lb-open .history {
  display: none !important;
}
.hist-btns {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding-left: 16px;
}
/* Der Wuerfel: als Linie, solange er ruht, als Flaeche, wenn er wuerfelt —
   beides die Vorlagen des Nutzers.                                   */
#shuffle-btn {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--leiste-grau);
  transition: color 0.15s;
}
#shuffle-btn:hover {
  color: var(--black);
}
#shuffle-btn.an {
  color: var(--black);
}
/* ── Hinweistexte ──────────────────────────────────
   Die Blase des Browsers lässt sich nicht gestalten, also steht hier
   eine eigene. Sie schreibt so klein und fett wie die Sprachwahl,
   11 px Urbanist. Der Grund wechselt bei jedem Auftritt und nimmt die
   drei Farbauszüge des Anmeldekreises auf; die Schrift steht jeweils
   in einer dunkleren Fassung derselben Farbe.                      */
#tipp {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100000;
  pointer-events: none;
  max-width: 172px;
  padding: 4px 9px 5px;
  font-family: var(--sans);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.35;
  text-align: center;
  white-space: pre-line;
  opacity: 0;
  transition: opacity 0.14s ease;
}
#tipp.an {
  opacity: 1;
}
/* Was der Wuerfel gesetzt hat, steht schwarz mit weisser Schrift — von Hand
   Gesetztes bleibt, wie es war.                                      */
.chip.wuerfel,
.tag.wuerfel {
  background: var(--black);
  color: #fff;
  padding-left: 5px;
  padding-right: 5px;
  -webkit-text-stroke: 0;
}
.chip.wuerfel:hover,
.tag.wuerfel:hover {
  color: #fff;
}
#annot-btn {
  color: var(--leiste-grau);
  transition: color 0.12s;
}

/* Ganz rechts am Ende der Leiste — nicht in der Knopfgruppe links,
   sondern hinter der Bildreihe, damit er wirklich aussen steht.
   Ein Klick dreht alle Bilder auf ihre rote Seite: dann laesst sich
   eines nach dem anderen wegnehmen. Alles auf einmal nimmt ein
   Doppelklick auf denselben Knopf.                                 */
#hist-alle-weg {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  /* Die Rolle ist 72 Punkte hoch, ihre Miniaturen aber nur 48 und sitzen
     mit ihrer Mitte bei 56 — der Fußabstand hebt den Knopf auf die Achse
     der Bilder (V3). */
  margin-right: 10px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--zeichen-ruhe);
  transition: color 0.12s;
}
#hist-alle-weg:hover {
  color: var(--black);
}
#hist-alle-weg svg {
  position: relative;
  z-index: 1;
}
/* Der Winkel ist als echte Eigenschaft angemeldet — nur dann laesst sich
   ein Wert im Farbverlauf ueberblenden, und nur dann laeuft die Fuellung
   in Kreisrichtung statt zu springen. Rueckwaerts geht sie von selbst,
   weil es ein Uebergang ist und keine Abspielung.                   */
@property --lw-fuell {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
/* Die Scheibe steht weiter als das Kreuz: dessen Spitzen liegen rund
   20 px von der Mitte, der Radius betraegt 26 px — so bleibt ringsum
   Luft. Gezeichnet wird ab 45 Grad, also auf der Achse des Kreuzes,
   und von dort im Uhrzeigersinn herum.                             */
#hist-alle-weg::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  z-index: 0;
  --lw-fuell: 0deg;
  background: conic-gradient(from 45deg, var(--red) var(--lw-fuell), transparent 0);
  transition: --lw-fuell 0.44s cubic-bezier(0.4, 0, 0.3, 1);
}
/* Aktiviert: die Scheibe faehrt ueber den Radius rundherum zu, und das
   Kreuz wird waehrenddessen weiss — gleiche Dauer, gleiche Kurve.  */
body.loeschmodus #hist-alle-weg::before {
  --lw-fuell: 360deg;
}
body.loeschmodus #hist-alle-weg,
body.loeschmodus #hist-alle-weg:hover {
  color: var(--white);
  transition: color 0.44s cubic-bezier(0.4, 0, 0.3, 1);
}
body.loeschmodus #hist-alle-weg svg {
  stroke-width: 1.35;
}
#annot-btn:hover {
  color: var(--zeichen-hand);
}
#annot-btn.on {
  color: var(--black);
}
/* Geht eine Funktion gerade nicht, verschwindet ihr Knopf nicht — er ruht
   blass (--zeichen-gesperrt) und wird erst unter dem Zeiger rot; ein Klick
   lässt ihn rot aufglühen (ui/button-glow.js). Den Grund nennt die Zeile
   unter dem Generieren-Knopf. */
#ed-btn.gesperrt,
#annot-btn.gesperrt {
  color: var(--zeichen-gesperrt);
}
#ed-btn.gesperrt:hover,
#annot-btn.gesperrt:hover {
  color: var(--red);
}
@keyframes _knopf-gluehen {
  0%,
  100% {
    filter: none;
  }
  35% {
    filter: var(--glut-rot);
  }
}
#ed-btn.gluehen,
#annot-btn.gluehen {
  animation: _knopf-gluehen 0.85s ease-in-out 2;
}
.batch-btn {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 1.5px;
  background: none;
  border: none;
  padding: 2px;
  cursor: default;
}
.batch-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0;
  color: var(--leiste-grau);
  cursor: pointer;
  transition: color 0.1s;
  line-height: 1;
  border-radius: 1px;
}
.batch-cell:hover {
  color: #2e2e2e;
  font-weight: 700;
}
.batch-cell.on {
  color: var(--black);
  font-weight: 700;
}
#batch-counter {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  font-style: italic;
  color: var(--black);
  opacity: 0;
  line-height: 1;
  margin-bottom: 6px;
  min-height: 1em;
  transition: opacity 0.15s;
  pointer-events: none;
}
#batch-counter.on {
  opacity: 1;
}
/* Links derselbe Abstand wie bei der Knopfgruppe der unteren Leiste
   (.hist-btns hat 16 px); rechts hält ihn der Knopf am Ende der Leiste
   mit seinem Rand (V3). */
.hist-scroll {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
  --hist-einzug: 16px;
  --hist-polster: 4px;
  margin-left: var(--hist-einzug);
  overflow-x: auto;
  overflow-y: hidden;
  padding: var(--hist-polster) 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hist-scroll::-webkit-scrollbar {
  display: none;
}
/* ── ÜBERNOMMEN: das rote Aufglühen ──────────────────────
   Wer ein Bild aus der Historie wieder aufnimmt, bekommt dessen Einstel-
   lungen zurück. Damit man sieht, WAS zurückkam, glüht jeder übernommene
   Wert steht in dem satten Rot, das die App auch sonst benutzt, hält es
   gut dreieinhalb Sekunden und kühlt dann in die Ruhefarbe ab. Kein
   Leuchten, kein Schein — das wirkte kitschig; die Farbe allein sagt es.
   Die Ruhefarbe steht in --ruhe: jedes Stück kehrt in SEINE zurück, ein
   stiller Chip also in sein Grau. Wo nichts gesetzt ist, gilt Schwarz. */
/* Ohne Schritt bei 100 %: jedes Stück kühlt in seine eigene Farbe ab. Der
   Schluss auf var(--ruhe) — gesetzt hat sie niemand — ließ jede Glut schwarz
   enden, und ein grauer Chip sprang danach auf sein Grau (V3). */
@keyframes glut-schrift {
  0% {
    color: var(--red);
  }
  84% {
    color: var(--red);
  }
}
.chip.glut,
.tag.glut,
#uprompt.glut {
  animation: glut-schrift 4.5s linear both;
}
/* Zeichen nehmen dieselbe Farbe an — ihre Linien sind auf currentColor
   gesetzt, es braucht also nichts weiter.                             */
.glut-zeichen {
  animation: glut-schrift 4.5s linear both;
}
/* Flaechen — Materialplaetze und das Maskenfeld — bekommen dasselbe Rot
   als Tuch darueber, nicht als Kontur: bei einem Materialbild saehe man
   die Kante ohnehin kaum. Es blendet kurz auf, steht und geht mit der
   Schrift zusammen wieder weg.                                       */
.glut-tuch {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  background: #e8391c;
  opacity: 0;
  animation: glut-tuch 4.5s linear both;
}
@keyframes glut-tuch {
  0% {
    opacity: 0;
  }
  4% {
    opacity: 0.62;
  }
  84% {
    opacity: 0.62;
  }
  100% {
    opacity: 0;
  }
}

.hist-item {
  height: 48px;
  width: 64px;
  flex-shrink: 0;
  cursor: pointer;
  perspective: 160px;
  opacity: 0.45;
  transition: opacity 0.15s;
}
.hist-item:hover,
.hist-item.on {
  opacity: 1;
}
/* Derselbe Takt und dieselbe Kurve wie das Zulaufen des roten Kreises am
   Ende der Leiste: im Loeschmodus laufen beide zusammen los.       */
.hist-card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.44s cubic-bezier(0.4, 0, 0.3, 1);
}
/* Gewendet wird senkrecht — um die waagerechte Achse, wie ein Blatt,
   das man nach hinten klappt.                                      */
.hist-item.flipped .hist-card {
  transform: rotateX(180deg);
}
.hist-front,
.hist-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.hist-front img {
  height: 100%;
  width: auto;
  display: block;
}
/* Die rote Fläche: sie liegt auf, solange die Miniatur in der Hand ist
   (langer Druck); beim Klick blitzt sie auf und zieht sich auf den Punkt
   unten links zusammen. Beim Wegnehmen einer Markierung blendet sie nur
   weg. */
.hist-item {
  position: relative;
  user-select: none;
}
.hist-rot {
  position: absolute;
  inset: 0;
  background: var(--red);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  transform-origin: 8.5px calc(100% - 8.5px);
  transition: opacity 0.12s;
}
/* Die Flaeche liegt auf, sobald die Hand zugreift — vorher nicht. So sagt
   sie: DIESE Miniatur ist jetzt in der Hand (Prototyp V3). */
.hist-item.zieht .hist-rot,
.hist-rot.packt {
  opacity: 1;
}
.hist-item.zieht {
  opacity: 1;
}
@keyframes hist-blitz {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(0);
  }
}
.hist-rot.blitz {
  animation: hist-blitz 0.46s cubic-bezier(0.5, 0, 0.2, 1) forwards;
  transition: none;
}
@keyframes hist-blitzweg {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.hist-rot.blitzweg {
  animation: hist-blitzweg 0.4s ease-out forwards;
  transition: none;
}
.hist-back {
  background: #e8391c;
  transform: rotateX(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ── EIN STRICH FUER ALLE RUECKSEITEN ───────────────────────────
   Die Zeichen auf den Rueckseiten — an den Miniaturen, an den Karten der
   grossen Historie, am Materialplatz und am Maskenkeil — tragen ueberall
   denselben Strich: 1,3 Punkte in Ruhe, 2,1 beim Ueberfahren. Weil die
   Zeichen verschieden gross gezeichnet und verschieden gross gezeigt
   werden, steht in jeder Regel eine andere Zahl; auf dem Schirm kommt
   ueberall dasselbe heraus. Vorher lagen sie zwischen 0,86 und 1,2, beim
   Ueberfahren zwischen 1,5 und 2,3 — daher das Durcheinander.       */
.hist-del {
  position: absolute;
  top: 3px;
  right: 3px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: #fff;
  line-height: 0;
}
/* Oben, neben dem Eimer (V3) — darauf rechnet auch der Fokusrahmen
   (focus.css .hist-kopie::before). */
.hist-kopie {
  position: absolute;
  top: 3px;
  right: 21px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: #fff;
  line-height: 0;
}
.hist-del svg,
.hist-kopie svg {
  display: block;
}
.hist-del svg *,
.hist-kopie svg * {
  stroke-width: 2.23;
  transition: stroke-width 0.13s;
}
.hist-del:hover svg *,
.hist-kopie:hover svg * {
  stroke-width: 3.6;
}
.hist-empty {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--light);
  width: 100%;
  text-align: center;
}

#annot-btn {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}