/* ══════════════════════════════════════════════════════════════════
   ANGRIFFE NACH WAFFENART

   Jede Karte trägt in cards.json ein Feld `waffe`. Daraus entsteht die
   Bewegung — nicht aus dem Kartennamen, denn Namen ändern sich, und
   eine Liste im Code liefe bei der nächsten neuen Karte auseinander.

   Alle Teile liegen in #geister und rechnen in Bühnenpunkten. Sie
   räumen sich selbst weg; keine bleibt liegen.

   Bewusst **kein `will-change`**: mehrere dieser Teile werden im Flug
   skaliert, und eine einmal gerasterte Textur zöge sich beim Wachsen
   sichtbar auf. Siehe „Was auf einer Karte nichts zu suchen hat".
   ══════════════════════════════════════════════════════════════════ */

/* ─── Der große Bolzen der Ballista ────────────────────────────────
   Erst wird gespannt, dann schießt er. Die Spannung ist das halbe
   Erlebnis: ohne sie ist es nur ein Strich, der über den Tisch fliegt. */
.bolzen{
  position:absolute;z-index:184;pointer-events:none;
  width:64px;height:10px;margin:-5px 0 0 -32px;
  transform-origin:50% 50%;
}
.bolzen::before{  /* Schaft */
  content:"";position:absolute;left:0;top:3px;width:48px;height:4px;
  background:linear-gradient(90deg,#6b4a24,#a87a3c);
  border:1px solid var(--ink);border-radius:2px;
}
.bolzen::after{   /* Spitze */
  content:"";position:absolute;right:0;top:0;width:0;height:0;
  border:5px solid transparent;border-left:16px solid #d8d2c4;
  filter:drop-shadow(-1px 0 0 var(--ink));
}
/* Der Schweif zieht hinter dem Bolzen her und verrät die Wucht. */
.bolzenspur{
  position:absolute;z-index:183;pointer-events:none;height:3px;
  transform-origin:0 50%;border-radius:2px;
  background:linear-gradient(90deg,rgba(255,240,200,0),rgba(255,240,200,.85));
  animation:spurVergeht .3s ease-out forwards;
}
@keyframes spurVergeht{from{opacity:.9}to{opacity:0}}

/* ─── Der kleine Pfeil der Bogenschützen ───────────────────────────
   Klein, mit gefiederten Enden und im hohen Bogen. Er soll leicht
   wirken, nicht bedrohlich — den Schaden macht die Zahl, nicht der
   Pfeil. */
.pfeilchen{
  position:absolute;z-index:184;pointer-events:none;
  width:26px;height:7px;margin:-3.5px 0 0 -13px;
  transform-origin:50% 50%;
}
.pfeilchen::before{
  content:"";position:absolute;left:0;top:2.5px;width:20px;height:2px;
  background:#8a6236;border-radius:1px;
  box-shadow:0 0 0 .5px var(--ink);
}
.pfeilchen::after{
  content:"";position:absolute;right:0;top:0;width:0;height:0;
  border:3.5px solid transparent;border-left:9px solid #e6e0d2;
  filter:drop-shadow(-.5px 0 0 var(--ink));
}
/* Die Federn am hinteren Ende */
.pfeilchen i{
  position:absolute;left:-1px;top:.5px;width:6px;height:6px;
  background:#c4382f;clip-path:polygon(0 0,100% 50%,0 100%);
}

/* ─── Mündungsblitz für Schusswaffen ───────────────────────────────
   Ein Schuss ist im Bild vorbei, bevor man ihn verfolgen kann. Statt
   eines Geschosses gibt es deshalb den Blitz an der Mündung und eine
   Bahn, die sofort wieder vergeht. */
.muendung{
  position:absolute;z-index:185;pointer-events:none;
  width:34px;height:34px;margin:-17px 0 0 -17px;
  background:radial-gradient(circle,#fff7cf 0%,#ffb43c 38%,rgba(255,120,20,0) 70%);
  animation:muendungAn .22s ease-out forwards;
}
@keyframes muendungAn{
  0%  {transform:scale(.2);opacity:1;}
  40% {transform:scale(1.25);opacity:1;}
  100%{transform:scale(1.5);opacity:0;}
}
.schussbahn{
  position:absolute;z-index:183;pointer-events:none;height:2px;
  transform-origin:0 50%;
  background:linear-gradient(90deg,rgba(255,240,190,.95),rgba(255,240,190,0));
  animation:spurVergeht .22s ease-out forwards;
}

/* ─── Steinregen ───────────────────────────────────────────────────
   Der Golem greift unmittelbar an, aber der Einschlag geschieht über
   dem Ziel: Brocken fallen aus dem Nichts darauf herab. Jeder Stein
   bekommt seinen eigenen Versatz und seine eigene Verzögerung, sonst
   fällt es wie ein Vorhang statt wie Geröll. */
.steinregen{position:absolute;z-index:184;pointer-events:none;
  width:0;height:0;}
.steinregen i{
  position:absolute;width:14px;height:12px;
  background:linear-gradient(150deg,#9a9186,#5d564d);
  border:1.5px solid var(--ink);
  border-radius:40% 55% 45% 60%;
  animation:steinFaellt .52s cubic-bezier(.55,0,.85,.6) forwards;
}
@keyframes steinFaellt{
  0%  {transform:translate(var(--sx,0),-90px) rotate(0deg);opacity:0;}
  15% {opacity:1;}
  100%{transform:translate(var(--sx,0),14px) rotate(var(--sd,180deg));opacity:1;}
}
/* Die Staubwolke am Boden macht aus fallenden Steinen einen Einschlag. */
.staub{
  position:absolute;z-index:183;pointer-events:none;
  width:76px;height:26px;margin:-6px 0 0 -38px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(160,150,135,.75),rgba(160,150,135,0) 70%);
  animation:staubAuf .5s ease-out .22s forwards;opacity:0;
}
@keyframes staubAuf{
  0%  {transform:scale(.3);opacity:0;}
  30% {opacity:.9;}
  100%{transform:scale(1.5);opacity:0;}
}

/* ─── Hiebe auf dem Ziel ───────────────────────────────────────────
   Alle Nahkampfarten zeichnen ihre Spur auf dem Getroffenen. Sie
   entstehen als Strich, der sich zieht — deshalb `clip-path` in den
   Bildpunkten und nicht bloß Deckkraft. */
.hieb{
  position:absolute;z-index:186;pointer-events:none;
  width:96px;height:96px;margin:-48px 0 0 -48px;
  /* `--kf` kommt aus der Stärke des Angreifers: eine Ratte reißt kleiner
     als ein Drache. Die Hülle skaliert, damit die Größe für alle Formen
     zugleich gilt und nirgends einzeln nachgepflegt werden muss. */
  transform:scale(var(--kf,1));
}
.hieb i{
  position:absolute;left:50%;top:50%;height:5px;width:104px;
  margin:-2.5px 0 0 -52px;border-radius:3px;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,#fff 18%,#fff 82%,rgba(255,255,255,0) 100%);
  filter:drop-shadow(0 0 5px rgba(255,255,255,.9));
  animation:hiebZieht .34s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes hiebZieht{
  0%  {clip-path:inset(0 100% 0 0);opacity:1;}
  55% {clip-path:inset(0 0 0 0);opacity:1;}
  100%{clip-path:inset(0 0 0 0);opacity:0;}
}
/* Ein Schnitt: schräg von oben links nach unten rechts. */
.hieb.schnitt i{transform:rotate(38deg);}
/* Eine Axt: breiter und etwas langsamer, sonst derselbe helle Strich. */
.hieb.axt i{height:9px;transform:rotate(24deg);animation-duration:.42s;}
/* ── Kratzen (Ratte, Gesindel) und Klauen (Drache, Dämonen) ──
   Drei kurze Striche, **parallel** und leicht schräg — eine Kratzspur,
   wie sie eine Kralle hinterlässt.

   Zwei Anläufe gingen daneben: erst waren es lange, dünne Striche, die
   man als einen dicken Schnitt las; dann fächerten sie auf und liefen
   nacheinander ein, was eher nach drei Hieben aussah als nach einem.

   Jetzt gilt: **gleichzeitig, kurz, parallel.** Alle drei erscheinen im
   selben Augenblick und verschwinden zusammen — so ist auf einen Blick
   zu sehen, dass es eine Kralle war und nicht drei Angriffe.

   Klaue ist dieselbe Spur, nur größer: derselbe Hieb von einem viel
   größeren Tier. */
.hieb.kratzen i,.hieb.klaue i{
  height:6px;width:64px;margin:-3px 0 0 -32px;
  border-radius:1px;
  /* Zu beiden Enden verjüngt: eine Kralle reißt, sie malt keinen Balken. */
  clip-path:polygon(0 50%,14% 0,86% 0,100% 50%,86% 100%,14% 100%);
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,#fff 24%,#fff 76%,rgba(255,255,255,0) 100%);
  /* Kein Versatz: alle drei zugleich. Kurz — 0,22 Sekunden. */
  animation:kratzAuf .22s ease-out forwards;
}
@keyframes kratzAuf{
  0%  {opacity:0;}
  25% {opacity:1;}
  70% {opacity:1;}
  100%{opacity:0;}
}
/* Drei Striche nebeneinander, leicht schräg und alle im selben Winkel.
   Kratzen und Klaue sind **dieselbe Form** — den Unterschied macht
   allein `--kf`, also die Stärke dessen, der zuschlägt. Eine Ratte und
   ein Drache kratzen gleich, nur nicht gleich groß. */
.hieb.kratzen i:nth-child(1),.hieb.klaue i:nth-child(1){
  transform:rotate(24deg) translate(0,-17px);}
.hieb.kratzen i:nth-child(2),.hieb.klaue i:nth-child(2){transform:rotate(24deg);}
.hieb.kratzen i:nth-child(3),.hieb.klaue i:nth-child(3){
  transform:rotate(24deg) translate(0,17px);}

/* ── Biss (Graf Vlad) ──
   Zwei große Eckzähne, die von oben herunterfahren, kurz einhaken und
   nachfedern.

   Zwei Anläufe vorher gingen daneben, und beide aus demselben Grund:
   sie waren zu klein und blitzten nur auf. Was den Biss macht, ist die
   **Bewegung**: herunterfahren, einhaken, nachfedern. */
.hieb.biss i{
  border-radius:0;
  background:linear-gradient(180deg,#fff 0%,#fff 66%,#e8e2d4 100%);
  animation:bissZu .28s cubic-bezier(.35,0,.25,1) forwards;
}
/* Oben: zwei große Eckzähne, Spitze nach unten */
.hieb.biss i:nth-child(1),.hieb.biss i:nth-child(2){
  height:26px;width:15px;margin:-31px 0 0 -7.5px;
  clip-path:polygon(0 0,100% 0,76% 44%,50% 100%,24% 44%);
}
.hieb.biss i:nth-child(1){--bx:-15px;}
.hieb.biss i:nth-child(2){--bx:15px;}
/* **Nur die oberen Zähne.** Vier waren als Gebiss gedacht, aber die
   unteren lagen halb hinter dem Getroffenen und wirkten wie ein zweites
   Paar Spitzen statt wie ein Kiefer. Zwei große Eckzähne, die
   herunterfahren, sagen dasselbe klarer. */
@keyframes bissZu{
  /* Weit offen, dann zuschnappen — mit einem kurzen Nachfedern. */
  0%  {opacity:0;transform:translate(var(--bx,0),calc(var(--br,1) * -22px));}
  25% {opacity:1;}
  55% {opacity:1;transform:translate(var(--bx,0),calc(var(--br,1) * 7px));}
  72% {transform:translate(var(--bx,0),calc(var(--br,1) * 4px));}
  100%{opacity:0;transform:translate(var(--bx,0),calc(var(--br,1) * 6px));}
}
/* **Kein Blut beim Angriff.** Der rote Auslauf stand hier zuerst und
   war zu viel: bei jedem Schlag eine Wunde, das erschlägt den Rest des
   Bretts. Es bleiben die Zähne — die sagen genug. */

/* ── Verführung (Sukkubus) und Finsterschlag (Schwarzer Fürst) ──
   Beide zeichnet die Teilchenschicht als **Schockwelle** — dieselbe
   Rechnung, nur andere Farben (lila und schwarzviolett). Hier bleibt ein
   kurzes Aufblühen an der Trefferstelle, damit der Schlag einen
   Mittelpunkt hat.

   Beim Sukkubus stand hier zuvor ein Herz, das entzweiriss: ein
   gezeichnetes Herz ist ein Piktogramm und wirkt neben lauter Bewegung
   wie aufgeklebt. */
.hieb.verfuehrung::after,.hieb.finsterschlag::after{
  content:"";position:absolute;left:50%;top:50%;
  width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;
  animation:hiebBlueht .36s cubic-bezier(.2,.75,.3,1) forwards;
}
.hieb.verfuehrung::after{
  background:radial-gradient(circle,
    rgba(245,232,255,.95) 0%,rgba(192,122,240,.55) 34%,rgba(122,62,192,0) 72%);
}
.hieb.finsterschlag::after{
  background:radial-gradient(circle,
    rgba(210,170,255,.85) 0%,rgba(58,21,80,.8) 32%,rgba(20,6,32,0) 74%);
}


/* ── Gebiss (Mimik, Eisenfalle) ──
   Das zuschnappende Gebiss: zwei große Zähne von oben, zwei kleinere von
   unten. Sie fahren aufeinander zu, treffen sich in der Mitte und federn
   nach.

   Bei Graf Vlad war das zu viel — die unteren Zähne lagen halb hinter
   dem Getroffenen. Hier passt es: eine Truhe, die zubeißt, und eine
   Falle, die zuschnappt, sind beide ein **Kiefer**. */
.hieb.gebiss i{
  border-radius:0;
  background:linear-gradient(180deg,#fff 0%,#fff 66%,#e8e2d4 100%);
  animation:gebissZu .3s cubic-bezier(.35,0,.25,1) forwards;
}
.hieb.gebiss i:nth-child(1),.hieb.gebiss i:nth-child(2){
  height:28px;width:16px;margin:-34px 0 0 -8px;
  clip-path:polygon(0 0,100% 0,76% 44%,50% 100%,24% 44%);
}
.hieb.gebiss i:nth-child(1){--bx:-16px;}
.hieb.gebiss i:nth-child(2){--bx:16px;}
.hieb.gebiss i:nth-child(3),.hieb.gebiss i:nth-child(4){
  height:20px;width:12px;margin:14px 0 0 -6px;
  clip-path:polygon(50% 0,76% 56%,100% 100%,0 100%,24% 56%);
  --br:-1;
}
.hieb.gebiss i:nth-child(3){--bx:-10px;}
.hieb.gebiss i:nth-child(4){--bx:10px;}
@keyframes gebissZu{
  0%  {opacity:0;transform:translate(var(--bx,0),calc(var(--br,1) * -24px));}
  22% {opacity:1;}
  56% {opacity:1;transform:translate(var(--bx,0),calc(var(--br,1) * 8px));}
  74% {transform:translate(var(--bx,0),calc(var(--br,1) * 5px));}
  100%{opacity:0;transform:translate(var(--bx,0),calc(var(--br,1) * 7px));}
}

/* ── Säure (Alchemist) und Funkenstab (Tüftler) ──
   Beide zeichnen ihre Wirkung auf der Teilchenschicht; hier bleibt nur
   ein kurzes Aufblühen wie beim Stab, damit der Schlag selbst sichtbar
   ist. */
.hieb.saeure::after,.hieb.funkenstab::after{
  content:"";position:absolute;left:50%;top:50%;
  width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;
  animation:hiebBlueht .34s cubic-bezier(.2,.75,.3,1) forwards;
}
.hieb.saeure::after{
  background:radial-gradient(circle,
    rgba(200,255,150,.9) 0%,rgba(120,220,60,.5) 38%,rgba(90,180,40,0) 72%);
}
.hieb.funkenstab::after{
  background:radial-gradient(circle,
    rgba(255,255,255,.95) 0%,rgba(190,215,255,.55) 38%,rgba(150,190,255,0) 72%);
}

/* ── Gabel (Teufelchen) ──
   Drei kurze Stiche nebeneinander, wie von einem Dreizack — und im
   Gegensatz zu allem anderen **rötlich**: ein Teufelchen sticht mit
   heißem Eisen, nicht mit einer Klinge. */
.hieb.gabel i{
  height:34px;width:9px;margin:-17px 0 0 -4.5px;border-radius:0;
  clip-path:polygon(50% 0,100% 26%,62% 26%,62% 100%,38% 100%,38% 26%,0 26%);
  background:linear-gradient(180deg,#fff 0%,#ffd9c2 40%,rgba(196,90,50,.25) 100%);
  animation:gabelStoss .2s cubic-bezier(.4,0,.35,1) forwards;
}
.hieb.gabel i:nth-child(1){--gx:-15px;}
.hieb.gabel i:nth-child(2){--gx:0px;animation-delay:.02s;}
.hieb.gabel i:nth-child(3){--gx:15px;animation-delay:.04s;}
@keyframes gabelStoss{
  0%  {opacity:0;transform:translate(var(--gx,0),26px) scaleY(.5);}
  35% {opacity:1;}
  80% {opacity:1;transform:translate(var(--gx,0),0) scaleY(1);}
  100%{opacity:0;transform:translate(var(--gx,0),0) scaleY(1);}
}

/* ── Fledermaus (Graf Vlad) ──
   Die Tiere zeichnet die Teilchenschicht; hier bleiben nur drei
   Krallenspuren, wie bei jedem anderen Krallenträger. */
.hieb.fledermaus i{height:6px;width:64px;margin:-3px 0 0 -32px;border-radius:1px;
  clip-path:polygon(0 50%,14% 0,86% 0,100% 50%,86% 100%,14% 100%);
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,#fff 24%,#fff 76%,rgba(255,255,255,0) 100%);
  animation:kratzAuf .22s ease-out forwards;}
.hieb.fledermaus i:nth-child(1){transform:rotate(24deg) translate(0,-17px);}
.hieb.fledermaus i:nth-child(2){transform:rotate(24deg);}
.hieb.fledermaus i:nth-child(3){transform:rotate(24deg) translate(0,17px);}

/* ── Glorie (Engel) ──
   Das Aufblühen des Stabes, nur golden statt weiß. Die Federn kommen
   von der Teilchenschicht. */
.hieb.glorie::after{
  content:"";position:absolute;left:50%;top:50%;
  width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,253,240,.95) 0%,rgba(244,217,138,.7) 34%,rgba(201,162,39,0) 72%);
  animation:hiebBlueht .42s cubic-bezier(.2,.75,.3,1) forwards;
}

/* ── Wirbel (Zerrnichter) ──
   Drei Schnitte kreuz und quer, in schneller Folge und in ganz
   verschiedenen Winkeln. Kein Muster, kein Fächer — es soll wild
   aussehen, nicht geordnet. */
.hieb.wirbel i{
  height:6px;width:124px;margin:-3px 0 0 -62px;border-radius:0;
  clip-path:polygon(0 50%,10% 0,90% 0,100% 50%,90% 100%,10% 100%);
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,#fff 22%,#fff 78%,rgba(255,255,255,0) 100%);
  animation-duration:.2s;
}
.hieb.wirbel i:nth-child(1){transform:rotate(-24deg) translate(-6px,-9px);}
.hieb.wirbel i:nth-child(2){transform:rotate(71deg) translate(4px,6px) scaleX(.9);
  animation-delay:.07s;}
.hieb.wirbel i:nth-child(3){transform:rotate(28deg) translate(-2px,8px) scaleX(1.05);
  animation-delay:.14s;}

/* Die Sense des Schnitters: ein lilanes Kreuz, beide Striche versetzt. */
/* Die Sense des Schnitters: **dünn** wie eine Klinge, dazu eine
   klaffende Wunde im Kreuzungspunkt.

   Dicke leuchtende Balken sähen nach Zauber aus, nicht nach Schnitt.
   Eine Sense ist ein schmales Blatt: 3 Punkte, dafür lang, und der
   Schein liegt außen statt im Balken selbst. Was den Schaden zeigt, ist
   nicht die Klinge, sondern das, was sie hinterlässt. */
.hieb.sense i{
  height:3px;width:126px;margin:-1.5px 0 0 -63px;border-radius:0;
  /* Zu beiden Enden auslaufend: ein Schnitt beginnt und endet nicht
     abrupt. */
  clip-path:polygon(0 50%,8% 0,92% 0,100% 50%,92% 100%,8% 100%);
  background:linear-gradient(90deg,
    rgba(168,85,247,0) 0%,#f3e8ff 18%,#fff 50%,#f3e8ff 82%,rgba(168,85,247,0) 100%);
  filter:drop-shadow(0 0 7px rgba(168,85,247,.95));
  animation-duration:.36s;
}
.hieb.sense i:nth-child(1){transform:rotate(40deg);}
.hieb.sense i:nth-child(2){transform:rotate(-40deg);animation-delay:.1s;}
/* Die Wunde: eine klaffende Spalte im Kreuzungspunkt, die kurz
   aufreißt und wieder zugeht. */
.hieb.sense::after{
  content:"";position:absolute;left:50%;top:50%;
  width:34px;height:44px;margin:-22px 0 0 -17px;
  transform:rotate(-40deg);
  background:radial-gradient(ellipse 42% 50% at 50% 50%,
    #2a0a3d 0 46%,rgba(102,32,148,.75) 72%,rgba(102,32,148,0) 100%);
  animation:sensenwunde .5s cubic-bezier(.2,.8,.3,1) .12s forwards;
  opacity:0;
}
@keyframes sensenwunde{
  0%  {opacity:0;transform:rotate(-40deg) scale(.2,.5);}
  34% {opacity:1;transform:rotate(-40deg) scale(1,1);}
  70% {opacity:.9;transform:rotate(-40deg) scale(.9,1.05);}
  100%{opacity:0;transform:rotate(-40deg) scale(.5,.9);}
}

/* ── Stich (Speer, Lanze) ──
   Ein Speer, der **aus der Richtung des Angreifers** hereinfährt — und
   dahinter sein Schemen.

   Zwei Dinge waren daran falsch. Er kam immer von unten, gleich wo der
   Angreifer stand; und er schoss über den Getroffenen hinaus. Jetzt
   dreht die Hülle sich um `--sw`, den Winkel der Verbindungslinie, und
   die Bewegung endet **bei null** — also in der Mitte des Ziels. Ein
   Stoß hört im Gegner auf, nicht dahinter.

   Zwei gleichwertige Pfeile sahen aus wie zwei Waffen. Der zweite ist
   deshalb kein Speer, sondern der Nachzieher: dieselbe Spitze, blasser,
   etwas zurück und gestreckt — das liest sich als Geschwindigkeit. */
/* θ = w + 90°, nachgerechnet: der Pfeil startet örtlich bei (0, +52),
   nach der Drehung liegt er global bei (−52·sinθ, +52·cosθ), und das
   soll 52·(−cos w, −sin w) sein — die Richtung zum Angreifer. */
.hieb.stich{transform:scale(var(--kf,1)) rotate(calc(var(--sw,-90deg) + 90deg));}
.hieb.stich i{
  height:58px;width:13px;margin:-29px 0 0 -6.5px;border-radius:0;
  clip-path:polygon(50% 0,100% 30%,66% 30%,66% 100%,34% 100%,34% 30%,0 30%);
  background:linear-gradient(180deg,#fff 0%,#fff 62%,rgba(255,255,255,.2) 100%);
  animation:stichHoch .16s cubic-bezier(.5,0,.35,1) forwards;
}
.hieb.stich i:nth-child(2){
  opacity:.42;
  animation:stichSchemen .22s cubic-bezier(.5,0,.35,1) forwards;
}
@keyframes stichHoch{
  0%  {opacity:0;transform:translateY(52px) scaleY(.6);}
  30% {opacity:1;}
  78% {opacity:1;transform:translateY(0) scaleY(1);}
  100%{opacity:0;transform:translateY(0) scaleY(1);}
}
@keyframes stichSchemen{
  0%  {opacity:0;transform:translateY(62px) scaleY(1.5);}
  25% {opacity:.42;}
  70% {opacity:.28;transform:translateY(14px) scaleY(1.9);}
  100%{opacity:0;transform:translateY(8px) scaleY(1.6);}
}

/* ── Hammer ──
   Ein Ring statt eines Strichs: ein Hammer schneidet nicht, er staucht.
   Hell wie alles andere. */
.hieb.hammer::after,.hieb.hammer2::after{
  content:"";position:absolute;left:50%;top:50%;
  width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  border:5px solid #fff;
  box-shadow:0 0 16px -1px rgba(255,255,255,.9);
  animation:hiebRing .36s cubic-bezier(.12,.7,.3,1) forwards;
}
@keyframes hiebRing{
  0%  {transform:scale(.3);opacity:0;border-width:6px;}
  22% {opacity:1;}
  100%{transform:scale(2.6);opacity:0;border-width:1px;}
}
/* ── Zauberstab ──
   Ein kurzes Aufblühen: ein Magier schlägt nicht zu, er entlädt. */
.hieb.stab::after{
  content:"";position:absolute;left:50%;top:50%;
  width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,255,255,.95) 0%,rgba(255,255,255,.55) 38%,rgba(255,255,255,0) 70%);
  animation:hiebBlueht .38s cubic-bezier(.2,.75,.3,1) forwards;
}
@keyframes hiebBlueht{
  0%  {transform:scale(.2);opacity:0;}
  25% {opacity:1;}
  100%{transform:scale(1.7);opacity:0;}
}

@media (prefers-reduced-motion:reduce){
  .bolzen,.bolzenspur,.pfeilchen,.muendung,.schussbahn,
  .steinregen i,.staub,.hieb i{animation:none;display:none;}
  .hieb.hammer::after,.hieb.stab::after{animation:none;display:none;}
}

/* ─── Weitere Waffenarten ──────────────────────────────────────────
   Vier hinzugekommen; alle folgen demselben Aufbau wie die übrigen:
   Teile in #geister, Rechnung in Bühnenpunkten, kein `will-change`.

   ── Kratzen ──
   Für Ratten, Bettler und Gesindel. Drei sehr kurze, dicht stehende
   Striche, deutlich kleiner als die Klauen eines Drachen — eine Ratte
   reißt keine Wunden, sie zwickt. Bewusst nicht rot, sondern hell:
   sonst sähe es nach mehr Schaden aus, als eine 1/1 anrichtet. */
.hieb.kratzen i{
  height:4px;width:66px;margin:-2px 0 0 -33px;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,#fff 25%,#ffe4c4 75%,rgba(255,228,196,0) 100%);
  filter:drop-shadow(0 0 3px rgba(255,255,255,.8));
  animation-duration:.26s;
}
.hieb.kratzen i:nth-child(1){transform:rotate(58deg) translate(-9px,0);}
.hieb.kratzen i:nth-child(2){transform:rotate(58deg);animation-delay:.05s;}
.hieb.kratzen i:nth-child(3){transform:rotate(58deg) translate(9px,0);animation-delay:.1s;}