/* =====================================================================
   wiese.css — WER AUF DER WIESE LEBT, UND DIE SCHIESSBUDE (A.1.44.0)

   Seine Ansage vom 21.09. („viele kleine Spielereien"): Falter, die
   behutsam durchs Bild fliegen · Tiere, die sich unterscheiden und ab
   und an den Ort wechseln · Kaefer und Wuermer am Baum · ein
   Heissluftballon · Voegel ab und an · ein Busch vorne links · darin
   eine Flinte · Fadenkreuz-Modus · und alles ist abschiessbar wie bei
   einer Schiessbude.

   ⚠️⚠️⚠️ DIE REGEL DIESER DATEI: LAGE UND BEWEGUNG STEHEN NIE AUF
   DEMSELBEN ELEMENT. Fuenf Ebenen, jede mit genau einer Aufgabe
   (natur-wesen.js):
     .n-ort (Lage, Attribut) · .n-zug (Weg) · .n-kipp (Treffer) ·
     .n-eigen (Eigenbewegung) · .n-lebt (Blickrichtung)
   Bis A.1.43.2 trug EIN Element beides, und die Animation hat die Lage
   samt Groesse weggeworfen — gemessen sassen zwei von vier Hasen
   ausserhalb des Bildes in der linken oberen Ecke. Lautlos.

   ⚠️ `transform-box: view-box` ueberall dort, wo in viewBox-Einheiten
   verschoben wird: ohne das rechnet der Browser Prozente und `px` gegen
   den eigenen Kasten des Elements.
   ===================================================================== */

.n-ort { transform-box: view-box; }
.n-zug, .n-kipp, .n-eigen, .n-lebt { transform-box: view-box; }

/* ⚠️⚠️⚠️ DRAUSSEN KOMMT DIE WIESE NACH VORN. Sie liegt auf Ebene −2,
   damit sie beim Riss HINTER jedem Stueck aufsteigt, das gerade
   wegfliegt (die Lehre vom 21.09.: mit `z-index: 20` stand sie nach
   400 ms da, als waere die Werkstatt nie dagewesen). Auf −2 liegt sie
   aber auch hinter dem HINTERGRUND des `body` — und damit meldet
   `elementFromPoint` ueberall `BODY.halle`: zu sehen war die Flinte im
   Busch, anzufassen war sie nicht. Gemessen, nicht geraten.
   Sobald die Truemmer draussen sind (`ist-draussen`), gibt es nichts
   mehr, wovor sie liegen muesste. */
:root.ist-draussen .natur { z-index: 1; }

/* =====================================================================
   1. WAS DURCHS BILD ZIEHT
   ===================================================================== */

/* die Voegel ziehen einmal quer und fangen wieder an. ⚠️ Die lange
   WARTEZEIT ist die Ansage: „Ab und an fliegen Vögel am Himmel entlang"
   — ein Himmel, in dem dauernd einer unterwegs ist, ist ein Foerderband. */
.n-vogel .n-zug {
  animation: vogelflug var(--dauer, 50s) linear var(--warte, 0s) infinite;
}
@keyframes vogelflug {
  from { transform: translate(0, 0); }
  to   { transform: translate(1760px, -90px); }
}
/* ⚠️ ZWEI ZIEHEN VON RECHTS. Dafuer reicht es nicht, den Weg
   umzudrehen — der Vogel muss auch in seine Flugrichtung schauen, sonst
   fliegt er rueckwaerts. Der Spiegel sitzt auf `.n-lebt`, dort, wo die
   Blickrichtung hingehoert. */
.n-gegen .n-lebt { transform: scaleX(-1); }
.n-vogel.n-gegen .n-zug { animation-name: vogelflug-gegen; }
@keyframes vogelflug-gegen {
  from { transform: translate(0, 0); }
  to   { transform: translate(-1760px, -90px); }
}

.n-schwarm .n-zug {
  animation: schwarmzug var(--dauer, 64s) linear var(--warte, 0s) infinite;
}
@keyframes schwarmzug {
  from { transform: translate(0, 0); }
  to   { transform: translate(1980px, -130px); }
}
.n-schwarm.n-gegen .n-zug { animation-name: schwarmzug-gegen; }
@keyframes schwarmzug-gegen {
  from { transform: translate(0, 0); }
  to   { transform: translate(-1980px, -130px); }
}

/* DER FALTER: der lange Zug hier, die Acht eine Ebene tiefer.
   ⚠️⚠️ „BEHUTSAM" IST EINE ZEIT, KEINE KURVE: hundert bis hundertfuenfzig
   Sekunden fuer eine Bildbreite. Wer das schneller macht, bekommt einen
   Falter auf der Flucht. */
.n-falter .n-zug {
  animation: falterzug var(--dauer, 110s) linear var(--warte, 0s) infinite;
}
@keyframes falterzug {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(880px, -60px); }
  100% { transform: translate(1760px, 10px); }
}
.n-falter.n-gegen .n-zug { animation-name: falterzug-gegen; }
@keyframes falterzug-gegen {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-880px, -60px); }
  100% { transform: translate(-1760px, 10px); }
}
.n-falter .n-eigen {
  animation: falterbahn var(--acht, 18s) ease-in-out infinite;
}

/* DER HEISSLUFTBALLON. ⚠️ Er steigt waehrend der Fahrt ein Stueck und
   sinkt wieder — ein Ballon auf einer Geraden ist ein Aufkleber auf
   einer Schiene. Und er ist SEHR langsam: „hin und wieder" heisst, dass
   meistens keiner da ist. */
.n-ballon .n-zug {
  animation: ballonzug var(--dauer, 190s) linear var(--warte, 0s) infinite;
}
@keyframes ballonzug {
  0%   { transform: translate(0, 0); }
  35%  { transform: translate(680px, -46px); }
  70%  { transform: translate(1320px, 16px); }
  100% { transform: translate(1900px, -30px); }
}
/* der Korb schwingt leise unter der Huelle */
.n-ballon .n-eigen {
  transform-origin: 50% 0%;
  animation: ballon-schwingt 9s ease-in-out infinite alternate;
}
@keyframes ballon-schwingt {
  from { transform: rotate(-1.6deg); }
  to   { transform: rotate(1.8deg); }
}

/* =====================================================================
   2. WAS KRABBELT (seine Ansage 3)
   ===================================================================== */

/* ⚠️⚠️ „HIN UND WIEDER" STECKT IN DER KURVE, NICHT IM ZUFALL: die ersten
   sechzig Prozent des Takts sitzt der Kaefer still, dann krabbelt er
   sein Stueck, dann sitzt er wieder. Eine Dauerbewegung an einem Stamm
   ist ein Foerderband mit Beinen. */
.n-kriecht .n-zug {
  animation: kriecht var(--dauer, 28s) ease-in-out var(--warte, 0s) infinite;
}
@keyframes kriecht {
  0%, 26%   { transform: translate(0, 0); }
  58%       { transform: translate(calc(var(--quer, 6px) * 0.4), calc(var(--weg, -60px) * 0.55)); }
  62%       { transform: translate(calc(var(--quer, 6px) * 0.4), calc(var(--weg, -60px) * 0.55)); }
  94%, 100% { transform: translate(var(--quer, 6px), var(--weg, -60px)); }
}
/* der Kaefer wackelt beim Krabbeln mit dem Koerper — das ist der
   Unterschied zwischen einem Kaefer und einem Punkt, der wandert */
.n-kaefer .n-eigen {
  animation: kaefer-wackelt 0.38s ease-in-out infinite alternate;
}
@keyframes kaefer-wackelt {
  from { transform: rotate(-5deg); }
  to   { transform: rotate(5deg); }
}

/* DIE RAUPE zieht sich zusammen und streckt sich wieder — und die Welle
   laeuft von hinten nach vorn durch die Glieder (`--glied`). ⚠️ Ohne den
   Versatz je Glied atmet sie nur; MIT ihm kriecht sie. */
.n-wurm-glied {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: wurm-welle 1.4s ease-in-out infinite;
  animation-delay: calc(var(--glied, 0) * -0.17s);
}
@keyframes wurm-welle {
  0%, 100% { transform: translateX(0) scale(1); }
  40%      { transform: translateX(-1.1px) scale(1.18, 0.86); }
  70%      { transform: translateX(1.1px) scale(0.88, 1.14); }
}

/* =====================================================================
   3. DIE TIERE GEHEN (seine Ansage 2)
   ===================================================================== */

/* Der Weg selbst steht in natur.js (ein Uebergang auf `.n-zug`, alle
   paar Sekunden neu gesetzt). Hier steht nur, wie es dabei AUSSIEHT.
   ⚠️ Der Hase HUEPFT (kurze, harte Boegen), das Reh WIEGT sich (lang und
   weich) — dieselbe Strecke, zwei Tiere. */
.n-hase.geht .n-eigen {
  animation: hase-huepft 0.42s cubic-bezier(.3, 0, .5, 1) infinite;
}
@keyframes hase-huepft {
  0%, 100% { transform: translateY(0) scaleY(1); }
  30%      { transform: translateY(-9px) scaleY(1.06); }
  60%      { transform: translateY(0) scaleY(0.94); }
}
.n-reh.geht .n-eigen {
  animation: reh-geht 0.62s ease-in-out infinite;
}
@keyframes reh-geht {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-2.4px) rotate(-1.1deg); }
}
/* ⚠️ Waehrend es geht, hoert es auf zu aesen: ein Reh, das mit dem Kopf
   im Gras durch die Wiese laeuft, ist ein Rasenmaeher. */
.n-reh.geht .n-reh-aest, .n-reh.geht .n-reh-sichert { animation-play-state: paused; }

/* =====================================================================
   4. DER BUSCH VORNE LINKS UND DIE FLINTE (seine Ansagen 6 + 7)
   ===================================================================== */

/* ⚠️ Der Busch wiegt sich im selben Wind wie das Gras, nur traeger — er
   ist schwerer. Ohne das steht vorne links ein Fels. */
.n-dickicht .n-eigen, .n-dickicht-vorn .n-eigen {
  transform-origin: 50% 100%;
  animation: busch-wiegt 7.2s ease-in-out infinite alternate;
}
.n-dickicht-vorn .n-eigen { animation-duration: 5.6s; animation-direction: alternate-reverse; }
@keyframes busch-wiegt {
  from { transform: rotate(-0.9deg); }
  to   { transform: rotate(1.1deg); }
}

/* DIE FLINTE liegt da und wird aufgedeckt, nicht eingeblendet.
   ⚠️⚠️ SIE SAGT MIT EINEM MASS, DASS SIE GEMEINT IST: solange niemand sie
   genommen hat, hebt sie sich ganz leise (kein Blinken, Regel 2) — wer
   sie einmal gesehen hat, sieht sie. Sobald sie in der Hand ist, ist sie
   weg aus dem Busch. */
.n-flinte { cursor: pointer; }
.n-flinte .n-eigen {
  animation: flinte-liegt 3.4s ease-in-out infinite alternate;
}
@keyframes flinte-liegt {
  from { transform: translateY(0) rotate(0deg); }
  to   { transform: translateY(-1.6px) rotate(0.5deg); }
}
/* ⚠️ Sie faengt Zeiger, bevor irgendetwas anderes es tut — sonst liegt
   sie in einem Busch, den man nicht anfassen kann (`.natur` faengt
   nichts). */
.n-flinte .n-trefferfeld { pointer-events: all; }
.n-flinte:hover .n-lebt { filter: drop-shadow(0 0 7px rgba(255, 226, 150, 0.85)); }
:root.flinte-genommen .n-flinte { display: none; }

/* =====================================================================
   5. DIE SCHIESSBUDE (seine Ansagen 8 + 9)
   ===================================================================== */

/* ⚠️⚠️ EIN SVG FAENGT ZEIGER NUR DORT, WO GEMALT IST — und `.natur`
   faengt gar nichts. Die Trefferfelder schalten sich erst ein, wenn die
   Flinte in der Hand ist: vorher ist die Wiese ein Bild, nachher ein
   Stand. */
:root.flinte-in-der-hand .n-ziel .n-trefferfeld { pointer-events: all; }
:root.flinte-in-der-hand .natur { cursor: none; }

/* ⚠️⚠️ ES GIBT NUR EIN FADENKREUZ auf dieser Seite (maschine.css,
   A.1.26.0), und zwei Waffen decken es auf: das Bolzenschussgeraet ueber
   `im-anschlag`, die Flinte ueber ihre eigene Klasse. Sie duerfen NICHT
   dieselbe Klasse schreiben — `bolzer.js` setzt `im-anschlag` bei jeder
   Mausbewegung neu und haette der Flinte ihr Kreuz jedes Mal wieder
   ausgeknipst (gemessen: `visibility: hidden` mit der Flinte in der
   Hand). Ein Zustand, zwei Schreiber, und der eine weiss nichts vom
   anderen — das ist immer ein Fehler. */
:root.flinte-in-der-hand .fadenkreuz { visibility: visible; }

/* DAS ZIEL UNTER DEM FADENKREUZ leuchtet — Regel aus A.1.18.0: ein
   Handgriff, den man nicht sieht, gibt es nicht. */
.n-ziel.im-ziel .n-lebt {
  filter: drop-shadow(0 0 6px rgba(255, 244, 190, 0.95))
          drop-shadow(0 0 16px rgba(255, 210, 90, 0.5));
}

/* ⚠️⚠️⚠️ GETROFFEN HEISST: ES KIPPT UM UND KOMMT WIEDER — „wie bei einer
   Schiessbude" (seine Ansage 9). Das ist die eine Entscheidung, die
   alles andere traegt: eine Figur, die endgueltig verschwindet, raeumt
   die Wiese leer, und am Ende steht der Spieler vor einer Landschaft,
   die er selbst kaputtgeschossen hat. Blech kippt, Blech steht wieder
   auf — und man kann weiterspielen, solange man Lust hat.
   ⚠️ Das Kippen sitzt auf `.n-kipp`, damit Lage, Weg und Eigenbewegung
   davon nichts mitbekommen: ein getroffener Vogel kippt, waehrend er
   weiterzieht — genau wie eine Blechente an ihrer Kette. */
.n-kipp { transform-origin: 50% 100%; }
.n-ziel.getroffen .n-kipp {
  animation: ziel-kippt 5.4s cubic-bezier(.3, .1, .3, 1) forwards;
}
@keyframes ziel-kippt {
  0%   { transform: rotate(0deg) translateY(0); }
  9%   { transform: rotate(-6deg) translateY(-4px); }
  30%  { transform: rotate(86deg) translateY(6px); }
  64%  { transform: rotate(86deg) translateY(6px); }
  86%  { transform: rotate(-4deg) translateY(0); }
  100% { transform: rotate(0deg) translateY(0); }
}
/* was getroffen ist, ist kein Ziel mehr — bis es wieder steht */
.n-ziel.getroffen .n-trefferfeld { pointer-events: none; }

/* Der PLING: ein heller Ring genau dort, wo es getroffen hat. ⚠️ Er ist
   kurz (400 ms) und geht nach aussen — ein Ring, der bleibt, ist ein
   Aufkleber. */
.n-pling {
  position: fixed;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  border: 2px solid rgba(255, 238, 170, 0.95);
  pointer-events: none;
  z-index: 11;
  animation: pling 420ms cubic-bezier(.2, .8, .3, 1) forwards;
}
@keyframes pling {
  from { transform: translate(var(--px), var(--py)) scale(0.3); opacity: 1; }
  to   { transform: translate(var(--px), var(--py)) scale(2.6); opacity: 0; }
}

/* DAS STAUBWOELKCHEN beim Daneben — ein Schuss ohne Antwort liest sich
   als kaputte Seite (dieselbe Regel wie die Sicherung am Geraet). */
.n-staub {
  position: fixed;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: rgba(214, 206, 176, 0.5);
  filter: blur(2px);
  pointer-events: none;
  z-index: 11;
  animation: staub 520ms ease-out forwards;
}
@keyframes staub {
  from { transform: translate(var(--px), var(--py)) scale(0.4); opacity: 0.9; }
  to   { transform: translate(calc(var(--px) + var(--dx, 0px)), calc(var(--py) - 22px)) scale(2.2); opacity: 0; }
}

/* ---- DIE ANZEIGE ----
   ⚠️ Sie gehoert zur Schiessbude, nicht zur Seite: sie ist nur da,
   solange die Flinte in der Hand ist. Ein Zaehler, der immer im Bild
   steht, nimmt der Wiese die Ruhe, um die es hier geht.
   ⚠️ Der Punktestand selbst ist derselbe wie ueberall (punkte.js, seine
   Ansage vom 20.09.: „Dieser Counter wird im weiteren Verlauf dann immer
   fortgeführt, aber nicht zwingend immer an dieser Position") — das hier
   ist nur ein weiterer LESER. */
.schiessbude {
  position: fixed;
  right: 22px;
  top: 18px;
  z-index: 12;
  display: none;
  gap: 14px;
  align-items: baseline;
  padding: 9px 16px 10px;
  border-radius: 10px;
  background: rgba(14, 22, 16, 0.62);
  border: 1px solid rgba(255, 238, 170, 0.28);
  backdrop-filter: blur(2px);
  font: 600 13px/1 system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(240, 236, 214, 0.85);
  pointer-events: none;
}
:root.flinte-in-der-hand .schiessbude { display: flex; }
.schiessbude b {
  font-size: 26px;
  letter-spacing: 0.04em;
  color: #ffeeaa;
  font-variant-numeric: tabular-nums;
}
.schiessbude.zaehlt b { animation: bude-zaehlt 260ms ease-out; }
@keyframes bude-zaehlt {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.28); color: #fff; }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .n-vogel .n-zug, .n-schwarm .n-zug, .n-falter .n-zug, .n-falter .n-eigen,
  .n-ballon .n-zug, .n-ballon .n-eigen, .n-kriecht .n-zug, .n-wurm-glied,
  .n-kaefer .n-eigen, .n-hase.geht .n-eigen, .n-reh.geht .n-eigen,
  .n-dickicht .n-eigen, .n-dickicht-vorn .n-eigen, .n-flinte .n-eigen,
  .n-pling, .n-staub, .schiessbude.zaehlt b { animation: none; }
  /* ⚠️ Das Wandern laeuft ueber einen UEBERGANG, nicht ueber eine
     Animation — `animation: none` erwischt es nicht. */
  .n-ort .n-zug { transition: none !important; }
  /* Das Kippen bleibt: es ist die ANTWORT auf den Schuss, und eine
     Antwort abzuschalten hiesse, den Schuss abzuschalten. Es wird nur
     kuerzer und ohne Schwung. */
  .n-ziel.getroffen .n-kipp { animation-duration: 3s; animation-timing-function: linear; }
}