/* ── 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-dl,
#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(--mid);
  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(--light);
  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(--light);
  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(--light) calc(50% - 0.5px),
    var(--light) 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(--mid);
  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(--light);
  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: rgba(255, 255, 255, 0.9);
  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(--mid);
  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(--light);
  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;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--light);
  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: #2e2e2e;
}
#annot-btn.on {
  color: var(--black);
}
.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(--light);
  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;
}
.hist-scroll {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 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. */
@keyframes glut-schrift {
  0% {
    color: #e8391c;
  }
  84% {
    color: #e8391c;
  }
  100% {
    color: var(--ruhe, var(--black));
  }
}
.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 Markierung: ein roter Punkt unten links. Mit gedrueckter Umschalttaste
   erscheint er beim Ueberfahren deckend als Vorschau; der Klick setzt ihn
   fest und laesst ihn kurz aufspringen — das ist die Rueckmeldung, nicht
   ein Wechsel der Deckung.                                              */
.hist-punkt {
  position: absolute;
  left: 3px;
  bottom: 3px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--red);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.12s;
  transform-origin: center;
}
/* Der Punkt sagt nur noch an: markiert wird in der grossen Historie. */
.hist-punkt.fest {
  opacity: 1;
}
@keyframes punkt-feder {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.75);
  }
  100% {
    transform: scale(1);
  }
}
.hist-punkt.feder {
  animation: punkt-feder 0.34s cubic-bezier(0.2, 1.4, 0.4, 1);
}
/* Die rote Fläche: 65 % beim Anfassen mit Umschalt, beim Klick ganz — dann
   zieht sie sich auf den Punkt unten links zusammen und wird zur Markierung.
   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;
}
/* Solange Umschalt gehalten wird, liegt die Flaeche schon beim Ueberfahren
   auf: das Bild sagt damit, dass es sich schieben laesst. Der Klick laesst
   sie voll aufblitzen und in den Punkt zusammenlaufen.               */
body.sortier .hist-item .hist-rot {
  opacity: 0.7;
}
body.sortier .hist-item:hover .hist-rot {
  opacity: 0.9;
}
body.sortier .hist-item .hist-rot.packt,
body.sortier .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;
}
.hist-kopie {
  position: absolute;
  bottom: 3px;
  left: 4px;
  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;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}