/* ══════════════════════════════════════════════════════════════════
   tisch.css — Der Spieltisch.

   Eine einzige Anordnung für alle Geräte: eine feste Bühne von
   1000 × 490 Punkten, die per transform:scale auf den Bildschirm
   gebracht wird. Am Rechner wird sie größer, auf dem Handy kleiner —
   die Verhältnisse bleiben gleich, und es gibt nur einen Satz Maße
   zu pflegen.

   Die Hand ragt bewusst nur etwa zur Hälfte ins Bild. Beim Berühren
   wächst eine Karte ohnehin auf das Doppelte und rückt vollständig in
   den Blick; der so gewonnene Platz kommt dem Spielfeld zugute.
   ══════════════════════════════════════════════════════════════════ */

/* Vergrößert wird per zoom, nicht per transform:scale. transform rastert
   die Inhalte einmal in Layoutgröße und zieht die Textur anschließend auf —
   die Karten wirken dadurch am großen Bildschirm unscharf. zoom erzwingt ein
   echtes Layout in Zielgröße, Bilder und Schrift bleiben scharf.

   Kurzzeitig stand hier transform, weil zoom im Verdacht stand, Zeiger- und
   Kastenmaße durcheinanderzubringen. Der Verdacht war falsch: der Fehler saß
   in der Trefferprüfung selbst. transform kostete dafür sofort sichtbar
   Schärfe — genau das, wovor dieser Kommentar seit jeher warnt. */
.buehne{
  position:relative;width:1000px;height:490px;
  zoom:var(--s,1);
}
/* Rückfall für Browser ohne zoom */
@supports not (zoom:1.5){
  .buehne{position:fixed;left:50%;top:50%;zoom:normal;
    transform:translate(-50%,-50%) scale(var(--s,1));transform-origin:50% 50%;}
}

/* Tischplatte */
.tisch{
  position:absolute;inset:0;border-radius:16px;overflow:hidden;
  background:
    radial-gradient(72% 62% at 50% 44%,#5d4832 0%,#3b2e20 58%,#241b12 100%),
    #241b12;
  box-shadow:0 0 0 4px #1b150e,0 0 0 8px #5b4428,0 24px 60px -18px rgba(0,0,0,.85);
}
.tisch::after{ /* Maserung */
  content:"";position:absolute;inset:0;opacity:.35;pointer-events:none;z-index:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
}

/* Eingabesperre während laufender Animationen */
.buehne.gesperrt .hand,
.buehne.gesperrt .reihe,
.buehne.gesperrt .zugtaste{pointer-events:none;}
/* Gegner am Zug: eigene Hand und Reihe treten zurück */
.buehne.wartet .hand.eigen{filter:brightness(.72) saturate(.8);}

/* ─── Kampfreihen ──────────────────────────────────────────────── */
.reihe{
  position:absolute;left:104px;right:104px;height:100px;
  display:flex;align-items:center;justify-content:center;gap:12px;
  background:rgba(0,0,0,.26);border-radius:13px;
  box-shadow:inset 0 0 0 2px rgba(199,162,118,.26),inset 0 3px 12px rgba(0,0,0,.5);
  z-index:2;
}
/* Während eines Angriffs wird die Reihe angehoben: sonst schöbe sich der
   zustoßende Diener unter die Einfassung der gegenüberliegenden Reihe. */
.reihe.kampf{z-index:40;}
.reihe.gegner{top:84px;}
.reihe.eigen {top:208px;}
.reihe.eigen.aktiv{
  background:radial-gradient(60% 100% at 50% 50%,rgba(224,179,82,.24),rgba(0,0,0,.26) 72%);
  box-shadow:inset 0 0 0 3px rgba(224,179,82,.7);
}
.reihe .luecke{width:16px;height:84px;flex:0 0 auto;border-radius:8px;
  background:linear-gradient(rgba(224,179,82,.55),rgba(224,179,82,.14));}
.reihe:empty::after{
  content:attr(data-leer);position:absolute;inset:0;display:grid;place-items:center;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tan);opacity:.32;
}

.mittellinie{
  position:absolute;left:50%;transform:translateX(-50%);width:240px;
  /* Liegt auf der Tischplatte, unter Dienern, Karten und Zeigerpfeil —
     sonst schöben sich alle Animationen darunter hindurch. */
  top:190px;height:15px;z-index:1;
  color:#b8452f;opacity:.9;pointer-events:none;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.8));
}
.mittellinie svg{width:100%;height:100%;}

/* ─── Diener ───────────────────────────────────────────────────── */
.diener{
  position:relative;width:92px;height:92px;flex:0 0 auto;
  perspective:520px;cursor:grab;
  transition:transform .16s ease-out,filter .16s;
}
.diener .scheibe{
  position:absolute;left:5px;top:0;width:82px;height:82px;border-radius:50%;
  overflow:hidden;background:#fff;border:3px solid var(--ink);
  box-shadow:0 0 0 2px var(--tan),0 8px 14px -6px #000;
  transform:translateZ(6px);
}
.diener .scheibe img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;
  transform:scale(1.22);display:block;}
.diener .stein{position:absolute;width:31px;height:34px;bottom:0;
  display:grid;place-items:center;transform:translateZ(14px);}
.diener .stein svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  stroke:var(--ink);stroke-width:3;stroke-linejoin:round;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.6));}
.diener .stein span{position:relative;z-index:2;transform:translateY(-6%);
  font-family:var(--display);font-size:17px;line-height:1;padding-top:.12em;
  color:#fff;text-shadow:0 1.5px 0 rgba(0,0,0,.6);white-space:nowrap;}
/* Der Höchstwert steht kleiner daneben, damit der aktuelle Wert führt */
.diener .stein span em{font-style:normal;font-size:.62em;opacity:.85;}
.diener .leben:has(em){width:38px;}
.diener .leben:has(em) span{font-size:15px;}
.diener .angriff{left:-5px;} .diener .leben{right:-5px;}
.diener .angriff svg path{fill:url(#goldVerlauf);}
.diener .leben   svg path{fill:url(#blutVerlauf);}
.diener .angriff.hoch svg path{fill:url(#gruenVerlauf);}
.diener .leben.wund span{color:#ffe4e0;}

.diener.bereit .scheibe{box-shadow:0 0 0 3px var(--gold-hi),0 0 20px -2px var(--gold),
  0 8px 14px -6px #000;}
.diener.ruht{filter:grayscale(.55) brightness(.78);cursor:default;}
/* Spott: ein schlichter Wappenschild hinter dem Diener. Bewusst ohne
   Beiwerk — die Form allein muss die Aussage tragen, sonst konkurriert
   sie mit dem Artwork davor. Feine Tuschekontur wie auf den Karten. */
.diener.spott::before{
  content:"";position:absolute;left:-20px;top:-17px;
  width:calc(100% + 40px);height:calc(100% + 48px);
  /* Der Schild ist höher als der Diener; wohin der Überstand fällt,
     entscheidet die Seite — siehe unten. */
  transform:translateZ(2px);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 122'%3E%3Cdefs%3E%3ClinearGradient id='h' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23e8d4a6'/%3E%3Cstop offset='.5' stop-color='%23c7a276'/%3E%3Cstop offset='1' stop-color='%237a5f3a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M8 8h84v54c0 29-20 46-42 54C28 108 8 91 8 62Z' fill='url(%23h)' stroke='%2314100b' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M16 16h68v45c0 24-16 38-34 45-18-7-34-21-34-45Z' fill='none' stroke='%23e0b352' stroke-width='2.5'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.5));
}

/* **Nicht verschieben — nach vorn holen.**

   Der Schild ist ein Wappen mit **Spitze unten**; die 48 Punkte
   Mehrhöhe verteilen sich als 17 oben und 31 unten, damit die Spitze
   Platz hat. Ich hatte das einmal auf 31/17 gedreht, um ihn vom
   Bildnis wegzuhalten — dadurch wurde die Spitze gestaucht und
   schnitt in den Diener. Der Schild sah verbogen aus.

   Das eigentliche Problem war ein anderes: meine Reihe liegt auf
   Schicht 2, das Bildnis auf 5. Die Schildspitze reicht bis 335, das
   Bildnis beginnt bei 322 — dreizehn Punkte lagen also **dahinter**
   und fehlten.

   Also bleibt die Form, wie sie gedacht ist, und die Reihe kommt nach
   vorn. Für die gegnerische Reihe ändert sich nichts: dort zeigt die
   Spitze vom Bildnis weg. */
.reihe.eigen{z-index:6;}

/* Gift: ein grüner Tropfen am Diener. Das Schlüsselwort steht sonst nur
   auf der Karte in der Hand — auf dem Feld sah man einem Diener nicht an,
   dass jede seiner Berührungen tödlich ist. */
.diener .giftmarke{
  position:absolute;left:-6px;top:-4px;width:24px;height:24px;
  transform:translateZ(20px);pointer-events:none;display:none;z-index:12;
}
.diener.gift .giftmarke{display:block;}
.diener .giftmarke svg{width:100%;height:100%;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.7));}

/* Fernkampf: derselbe Gedanke wie bei der Giftmarke, nur rechts oben.
   Ein Fernkämpfer bekommt keinen Gegenschlag ab — das ändert jede
   Angriffsrechnung, war auf dem Feld aber nicht zu sehen. Die andere
   Ecke, damit sich Gift und Bogen nicht überdecken. */
.diener .fernmarke{
  position:absolute;right:-6px;top:-4px;width:24px;height:24px;
  transform:translateZ(20px);pointer-events:none;display:none;z-index:12;
}
.diener.fern .fernmarke{display:block;}
.diener .fernmarke img{width:100%;height:100%;display:block;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.7));}

/* Todesröcheln: ein Totenkopf unten in der Mitte, zwischen den beiden
   Wertsteinen. Dieselbe Größe und derselbe Schatten wie Gift und Bogen. */
.diener .roechelmarke{
  position:absolute;left:50%;bottom:-7px;width:24px;height:24px;margin-left:-12px;
  transform:translateZ(20px);pointer-events:none;display:none;z-index:12;
}
.diener.roechelt .roechelmarke{display:block;}
.diener .roechelmarke svg{width:100%;height:100%;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.7));}

/* Göttlicher Schild: eine goldene Blase über dem Diener.

   Größe und Versatz gehören zusammen: die Scheibe sitzt bei left:5/top:0
   und misst 82 — ihre Mitte liegt also bei (46, 41). Damit die Blase
   mittig darüber liegt und den Rand um 3px überragt, muss sie 88 messen;
   left:2/top:-3 sind genau dafür gerechnet. Sie stand aber auf 78, und
   damit saß ihre Mitte bei (41, 36): fünf Pixel nach links oben
   verschoben, oben links über den Diener hinausragend und unten rechts
   mit einer Lücke. */
.diener.schild .scheibe{box-shadow:0 0 0 3px var(--gold-hi),0 8px 14px -6px #000;}
.diener.schild::marker{content:"";}
.diener .blase-schild{
  position:absolute;left:2px;top:-3px;width:88px;height:88px;border-radius:50%;
  transform:translateZ(18px);pointer-events:none;display:none;
  background:radial-gradient(circle at 34% 28%,
    rgba(255,246,205,.85) 0%,rgba(247,216,120,.42) 34%,
    rgba(224,179,82,.16) 62%,rgba(224,179,82,.34) 88%,rgba(255,246,205,.75) 100%);
  box-shadow:inset 0 0 14px rgba(255,246,205,.9),0 0 16px -2px rgba(247,216,120,.9);
  animation:blaseSchimmer 2.4s ease-in-out infinite;
}
.diener.schild .blase-schild{display:block;}

/* Damit es nach Seifenblase aussieht und nicht nach gelbem Ring, braucht
   es einen **Glanzpunkt** oben links. Er allein macht aus einer Fläche
   eine Wölbung; das Auge liest daraus sofort „rund und glasig".

   Er steht **still**, und das ist Absicht. Kurzzeitig liefen hier drei
   Dauerschleifen zugleich, zwei davon auf `filter` — und ein
   Filterwechsel je Bild bedeutet, dass der Browser die Blase samt
   Untergrund in jedem Bild neu zeichnet. Bei mehreren beschildeten
   Dienern lief das dauerhaft mit und kostete spürbar Leistung, ohne
   dass jemand den Unterschied gesehen hätte.

   Geblieben ist **eine** Schleife, und sie rührt nur die Deckkraft an —
   die kann der Browser auf der fertigen Ebene verrechnen, ohne neu zu
   zeichnen. */
.diener .blase-schild::before{
  content:"";position:absolute;pointer-events:none;
  left:19%;top:14%;width:26%;height:20%;border-radius:50%;
  background:radial-gradient(ellipse at 40% 40%,
    rgba(255,255,255,.95) 0%,rgba(255,252,235,.55) 45%,rgba(255,252,235,0) 72%);
}
/* Das Lichtband zieht schräg über die Blase und **dreht sich** — daher
   der Eindruck von Glas statt einer bemalten Scheibe.

   Es war beim Aufräumen der Leistungsbremsen mit herausgefallen, und das
   zu Unrecht: teuer waren die beiden Schleifen auf `filter`, weil ein
   Filterwechsel je Bild das Element samt Untergrund neu zeichnen lässt.
   Eine Drehung ist etwas anderes — `transform` verrechnet der Browser
   auf der fertigen Ebene, ohne neu zu zeichnen. Sie kostet so gut wie
   nichts.

   Langsamer als der Schimmer darunter (3,7 s gegen 2,4 s): so decken
   sich die beiden Bewegungen nie ganz, und es wirkt lebendig statt
   getaktet. */
.diener .blase-schild::after{
  content:"";position:absolute;pointer-events:none;
  inset:6%;border-radius:50%;
  background:linear-gradient(112deg,
    rgba(255,255,255,0) 34%,rgba(255,255,255,.5) 46%,
    rgba(255,255,255,.14) 52%,rgba(255,255,255,0) 62%);
  animation:blaseBand 3.7s linear infinite;
}
@keyframes blaseBand{
  from{transform:rotate(0deg);}
  to  {transform:rotate(360deg);}
}
@keyframes blaseSchimmer{
  0%,100%{opacity:.82}
  50%    {opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .diener .blase-schild,.diener .blase-schild::after{animation:none;}
}

/* Rot heißt: hier passiert etwas Schlechtes. Grün: etwas Gutes.
   Welche Farbe gilt, leitet zielArt() aus dem Effekt der wartenden Karte
   ab — siehe tisch.js. */
.diener.zielbar .scheibe{box-shadow:0 0 0 3px var(--red-hi),0 0 22px -2px var(--red-hi);}
.diener.zielbar{animation:pochen 1s infinite;}
.diener.zielbar.zielGut .scheibe{
  box-shadow:0 0 0 3px var(--gruen-hi),0 0 22px -2px var(--gruen-hi);}

@keyframes pochen{0%,100%{filter:none}50%{filter:brightness(1.25)}}

/* Karte wartet auf ihr Kampfschrei-Ziel */
.diener.wartend{opacity:.75;}
.diener.wartend .scheibe{
  box-shadow:0 0 0 3px var(--gold-hi),0 0 22px -2px var(--gold);
  animation:warten 1s infinite;
}
@keyframes warten{0%,100%{filter:brightness(1)}50%{filter:brightness(1.25)}}

.diener.erscheint{animation:erscheinen .34s cubic-bezier(.2,.9,.3,1.3);}
@keyframes erscheinen{from{transform:translateY(26px) scale(.55);opacity:0}}
.diener.stirbt{animation:vergehen .34s ease forwards;pointer-events:none;}
@keyframes vergehen{to{transform:translateY(10px) scale(.35) rotate(-16deg);opacity:0}}
.diener.trifft{animation:zustossen .3s ease;}
@keyframes zustossen{50%{transform:translateY(-18px) scale(1.14);}}
.diener.getroffen{animation:beben .3s ease;}
@keyframes beben{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}
  75%{transform:translateX(-3px)}}

/* ─── Helden ───────────────────────────────────────────────────── */
.held{
  position:absolute;left:50%;width:74px;height:74px;margin-left:-37px;
  perspective:520px;z-index:5;
}
.held.gegner{top:4px;}
.held.eigen {top:322px;}
.held .portrait{
  position:absolute;inset:0;border-radius:50%;overflow:hidden;background:#fff;
  border:3.5px solid var(--ink);
  box-shadow:0 0 0 3px var(--fc,var(--tan)),0 10px 20px -8px #000;
  transform:translateZ(8px);
}
.held .portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 26%;
  transform:scale(1.3);display:block;}
.held[data-f="licht"]{--fc:var(--f-licht)}
.held[data-f="orden"]{--fc:var(--f-orden)}
.held[data-f="schatten"]{--fc:var(--f-schatten)}
/* **Ein Drittel kleiner.** Das Herz nahm bei 40x44 ein Viertel des
   Bildnisses ein und deckte das Gesicht zu. Jetzt 28x31 — und die Zahl
   bleibt groß: sie **darf** über das Herz hinausragen, denn sie ist die
   Auskunft, nicht das Symbol.

   Der Umriss der Ziffer wird dafür kräftiger: über dem Rand des Herzens
   steht sie sonst teils auf dem Bildnis, teils auf Rot. */
.held .lebensstein{
  position:absolute;right:-8px;bottom:-3px;width:28px;height:31px;
  display:grid;place-items:center;transform:translateZ(16px);
  overflow:visible;
}
.held .lebensstein svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  stroke:var(--ink);stroke-width:3.6;stroke-linejoin:round;fill:url(#blutVerlauf);
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.65));}
.held .lebensstein span{position:relative;z-index:2;transform:translateY(-4%);
  font-family:var(--display);font-size:17px;line-height:1;padding-top:.12em;
  color:#fff;
  text-shadow:0 0 3px rgba(0,0,0,.85),
              -1.5px 0 0 var(--ink), 1.5px 0 0 var(--ink),
              0 -1.5px 0 var(--ink), 0 1.5px 0 var(--ink),
              0 2px 0 rgba(0,0,0,.6);}
.held .lebensstein.knapp{animation:pochen 1s infinite;}
/* Die Heldennamen entfallen: oben ragen sie über den Tischrand hinaus,
   unten deckt die Hand sie zu. Der farbige Ring zeigt die Fraktion. */
.held .name{display:none;}
.held.zielbar .portrait{box-shadow:0 0 0 4px var(--red-hi),0 0 26px -2px var(--red-hi);}
.held.zielbar{animation:pochen 1s infinite;cursor:pointer;}
.held.zielbar.zielGut .portrait{
  box-shadow:0 0 0 4px var(--gruen-hi),0 0 26px -2px var(--gruen-hi);}
.held.getroffen{animation:beben .3s ease;}

/* ─── Manakristalle ────────────────────────────────────────────── */
.manaleiste{
  position:absolute;display:flex;gap:2px;align-items:center;height:22px;z-index:4;
}
.manaleiste.gegner{top:32px;left:556px;}
/* Rechts neben dem eigenen Helden. */
.manaleiste.eigen {top:350px;left:556px;}
/* Die Manakugel ist eine freigestellte Grafik; leere Kristalle sind
   dieselbe Kugel, nur entsättigt und abgedunkelt. */
.manaleiste i{width:19px;height:19px;
  background:url('../assets/mana.webp?v=213') center/contain no-repeat;
  filter:grayscale(1) brightness(.42);}
.manaleiste i.voll{filter:none;
  filter:drop-shadow(0 0 5px rgba(63,169,221,.85));}
.manaleiste .zahl{font-family:var(--display);font-size:15px;padding:.2em 0 0 6px;
  color:var(--mana-hi);text-shadow:0 1px 2px #000;}

/* Angetippt: die Kugel **wabert**. Hell, zurück, wieder hell — dem
   Geräusch nach, nicht nach Gefühl.

   Die Hüllkurve von spentOrb_08.mp3 wurde dafür ausgemessen: das
   Geräusch schwillt in Stößen an, mit hellen Stellen bei 0,24 / 0,44 /
   0,60 / 0,76 Sekunden, dazwischen jedes Mal ein Rückgang, und der
   lauteste Punkt liegt bei 0,76 s. Die Bildpunkte unten sind genau
   diese Zeiten, geteilt durch die Gesamtlänge von 1,56 s. Deshalb
   pulsiert das Licht im Takt des Klangs, statt bloß daneben zu blinken.

   **Keine Größenänderung.** Jede würde sich als Zustandswechsel lesen,
   als wäre ein Kristall dazugekommen. Es ist allein der Schein.

   Die ersten fünf Prozent bleiben dunkel: das Geräusch braucht diesen
   Moment, um zu tragen. Erst passiert kurz nichts, dann kommen Bild und
   Ton zusammen. */
/* Nur volle Kristalle laden zum Antippen ein. */
.manaleiste i{cursor:default;}
.manaleiste i.voll{cursor:pointer;}
.manaleiste i.getippt{animation:kugelWabert 1.56s linear;}
@keyframes kugelWabert{
  0%    {filter:drop-shadow(0 0 5px rgba(63,169,221,.85));}
  5%    {filter:brightness(1.05) drop-shadow(0 0 6px rgba(63,169,221,.9));}
  15.4% {filter:brightness(1.42) drop-shadow(0 0 15px var(--mana-hi));}
  21.2% {filter:brightness(1.12) drop-shadow(0 0  8px var(--mana-hi));}
  28.2% {filter:brightness(1.46) drop-shadow(0 0 16px var(--mana-hi));}
  33.3% {filter:brightness(1.15) drop-shadow(0 0  9px var(--mana-hi));}
  38.5% {filter:brightness(1.52) drop-shadow(0 0 18px var(--mana-hi));}
  43.6% {filter:brightness(1.14) drop-shadow(0 0  9px var(--mana-hi));}
  48.7% {filter:brightness(1.6)  drop-shadow(0 0 21px var(--mana-hi));}
  56.4% {filter:brightness(1.12) drop-shadow(0 0  8px var(--mana-hi));}
  61.5% {filter:brightness(1.3)  drop-shadow(0 0 12px var(--mana-hi));}
  74.4% {filter:brightness(1.1)  drop-shadow(0 0  7px var(--mana-hi));}
  100%  {filter:drop-shadow(0 0 5px rgba(63,169,221,.85));}
}
/* Die frühere Leer-Variante der Animation ist entfallen: leere
   Kristalle reagieren gar nicht mehr, also braucht es auch kein
   gedämpftes Wabern für sie. */
@media (prefers-reduced-motion:reduce){
  .manaleiste i.getippt{animation:none;}
}

/* ─── Deckstapel ───────────────────────────────────────────────── */
/* ─── Nachziehstapel ──────────────────────────────────────────────
   Der Stapel trägt dasselbe Motiv wie jeder verdeckte Kartenrücken —
   vorher war er ein schlichter roter Farbverlauf und sah aus wie ein
   Bedienelement, nicht wie ein Stoß Karten. Die Zahl bekommt dafür eine
   eigene dunkle Scheibe, sonst verschwände sie im Muster. */
.stapel{
  position:absolute;left:842px;width:48px;height:66px;z-index:4;
  border-radius:7px;border:2.5px solid var(--ink);
  background:#8f1d1f url("../assets/cards/back.webp?v=213") center/cover no-repeat;
  box-shadow:3px 3px 0 -1px var(--red-dk),5px 5px 0 -2px var(--ink),0 8px 16px -8px #000;
  display:grid;place-items:center;
}
.stapel::before{content:"";position:absolute;inset:3px;border-radius:4px;
  border:1.5px solid rgba(238,220,171,.45);}
.stapel span{font-family:var(--display);font-size:17px;padding-top:.2em;
  color:var(--parch-hi);text-shadow:0 1px 2px #000;z-index:2;
  min-width:26px;height:24px;display:grid;place-items:center;
  border-radius:12px;background:rgba(20,16,11,.74);
  box-shadow:0 0 0 1.5px rgba(238,220,171,.35);}
.stapel.gegner{top:8px;} .stapel.eigen{top:330px;}

/* Leerer Stapel: nur noch die Umrisse, damit die drohende Erschöpfung
   auch ohne Blick auf die Zahl auffällt. */
.stapel.leer{background-image:none;background-color:rgba(20,16,11,.45);
  box-shadow:none;opacity:.72;}

/* Beide Stapel lassen sich anfassen — siehe Spielerei in js/tisch.js. */
.stapel{cursor:grab;}
.stapel:active{cursor:grabbing;}

/* ─── Zug-Taste als Holzschild ─────────────────────────────────── */
.zugtaste{
/* Mittig zwischen den beiden Heldenkästen: der Gegner endet bei 78,
   der eigene beginnt bei 322 — die Mitte liegt also bei 200. */
  position:absolute;overflow:hidden;right:12px;top:156px;
  /* Über der Kampfreihe (40). Die gegnerische Reihe reicht bis x=896,
     die Taste beginnt bei x=884 — sie überlappen sich um 12 Punkte.
     Solange ein Diener zustößt, wird die Reihe auf 40 gehoben, und mit
     den früheren 6 legte sich ihr dunkler Kasten samt Einfassung über
     die linke Kante der Taste. Bedienelemente gehören immer nach vorn. */
  width:104px;height:88px;z-index:44;
  /* Als Raster zentriert und mit erhaltenem Zeilenumbruch — vorher stand
     die Beschriftung weder waagerecht noch senkrecht in der Mitte. */
  display:grid;place-items:center;text-align:center;white-space:pre-line;
  padding:0 0 12px;
  border:3px solid var(--ink);border-radius:8px;
  background:linear-gradient(#8a6a3e,#5b4428 45%,#3a2b18);
  color:var(--parch-hi);font-family:var(--display);font-size:17px;line-height:1.15;
  cursor:pointer;text-shadow:0 2px 0 rgba(0,0,0,.6);
  box-shadow:0 0 0 3px #c39a5e inset,0 5px 0 var(--ink),0 10px 18px -8px #000;
  transition:transform .1s,box-shadow .1s,filter .16s;
}
.zugtaste:active{transform:translateY(5px);box-shadow:0 0 0 3px #c39a5e inset,0 0 0 var(--ink);}
.zugtaste.wartend{background:linear-gradient(#4a4136,#2e281f);color:#a1968a;
  cursor:default;box-shadow:0 0 0 3px #6d5a3d inset,0 5px 0 var(--ink);}
/* Sichtbares Lebenszeichen, solange der Gegner überlegt */
.zugtaste.wartend::after{
  content:"";position:absolute;left:50%;bottom:9px;transform:translateX(-50%);
  width:34px;height:5px;border-radius:3px;
  background:repeating-linear-gradient(90deg,var(--gold) 0 8px,transparent 8px 16px);
  animation:denken 1.1s linear infinite;
}
@keyframes denken{to{background-position:16px 0;}}
.zugtaste.bereit{animation:leuchten 1.6s infinite;}
@keyframes leuchten{0%,100%{filter:none}50%{filter:brightness(1.16) drop-shadow(0 0 10px var(--gold))}}

/* hidden muss die Anzeigeart überstimmen — .knopf ist inline-grid. */
.knopf[hidden],.zugtaste[hidden]{display:none;}

/* ─── Übermächtiger Schlag ─────────────────────────────────────────
   Wenn ein Diener mit zehn Angriff einen mit einem Leben trifft, soll
   das anders aussehen als ein Stich unter Gleichen.

   Drei Teile: ein Ring, der von der Trefferstelle nach außen läuft, ein
   kurzes Beben des Bretts, und das Ziel, das weggerissen wird. */
.wucht{
  position:absolute;z-index:186;pointer-events:none;
  width:34px;height:34px;border-radius:50%;
  border:4px solid var(--red-hi);
  box-shadow:0 0 18px -2px var(--red-hi);
  animation:wuchtRing .6s cubic-bezier(.15,.75,.35,1) forwards;
}
@keyframes wuchtRing{
  /* Quer zur Schlagrichtung breiter — der Behälter ist gedreht, scaleX
     wirkt deshalb entlang des Stoßes. */
  0%  {opacity:0;border-width:5px;
       transform:translate(-50%,-50%) rotate(var(--w,0deg)) scale(.2,.2);}
  18% {opacity:1;}
  100%{opacity:0;border-width:1px;
       transform:translate(-50%,-50%) rotate(var(--w,0deg)) scale(3.4,4.6);}
}

/* Das Beben. Winzige Ausschläge genügen — alles darüber wirkt wie ein
   Fehler und macht den Text unlesbar. */
.buehne.bebt{animation:brettBebt .4s cubic-bezier(.36,.07,.19,.97);}
@keyframes brettBebt{
  0%,100%{margin-left:0;margin-top:0;}
  15%    {margin-left:-5px;margin-top:2px;}
  32%    {margin-left:4px;margin-top:-2px;}
  52%    {margin-left:-3px;margin-top:1px;}
  74%    {margin-left:2px;margin-top:-1px;}
}

/* Das Ziel wird weggerissen und kippt — deutlich mehr als beim
   gewöhnlichen Treffer, der nur kurz aufblitzt. */
.diener.zerschmettert,.held.zerschmettert{
  animation:zerschmettert .5s cubic-bezier(.3,.05,.4,1);
}
@keyframes zerschmettert{
  0%  {transform:translate(0,0) rotate(0deg) scale(1);filter:none;}
  14% {transform:translate(9px,-5px) rotate(9deg) scale(1.1);
       filter:brightness(2.4) saturate(.3);}
  36% {transform:translate(-7px,3px) rotate(-6deg) scale(.94);
       filter:brightness(1.5);}
  62% {transform:translate(4px,-1px) rotate(3deg) scale(1.02);}
  100%{transform:translate(0,0) rotate(0deg) scale(1);filter:none;}
}
@media (prefers-reduced-motion:reduce){
  .wucht,.buehne.bebt,.diener.zerschmettert,.held.zerschmettert{animation:none;}
}


/* ─── Einstellungen ────────────────────────────────────────────── */
.zahnrad{
  position:absolute;right:12px;top:10px;z-index:46;
  width:40px;height:40px;border-radius:50%;cursor:pointer;
  border:3px solid var(--ink);color:var(--parch-hi);
  background:linear-gradient(#6b5334,#3a2b18);
  display:grid;place-items:center;
  box-shadow:0 3px 0 var(--ink),0 6px 12px -6px #000;
}
.zahnrad:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink);}
.zahnrad svg{width:20px;height:20px;}

.optionsfeld{
  display:flex;flex-direction:column;gap:13px;align-items:flex-start;
  padding:16px 22px;border-radius:10px;min-width:290px;
  background:linear-gradient(var(--wood),var(--wood-dk));
  border:3px solid var(--ink);box-shadow:0 0 0 2px var(--tan);
}
.schalter{display:flex;align-items:center;gap:12px;cursor:pointer;
  font-size:15px;color:var(--parch);}
.schalter input{position:absolute;opacity:0;width:0;height:0;}
.schalter span{
  width:52px;height:28px;border-radius:15px;flex:0 0 auto;
  background:#2b2319;border:2.5px solid var(--ink);position:relative;
  transition:background .16s;
}
.schalter span::after{
  content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;
  background:var(--parch-sh);border:2px solid var(--ink);transition:transform .16s;
}
.schalter input:checked + span{background:linear-gradient(var(--gold),var(--gold-dk));}
.schalter input:checked + span::after{transform:translateX(24px);}
.regler{display:flex;flex-direction:column;gap:6px;font-size:15px;color:var(--parch);width:100%;}
.regler input{width:100%;accent-color:var(--gold);}

/* ─── Hände ────────────────────────────────────────────────────────
   Die Hand ragt nur etwa zur Hälfte ins Bild. Wer eine Karte berührt,
   bekommt sie ohnehin doppelt so groß und vollständig zu sehen —
   der gesparte Platz kommt dem Spielfeld zugute. */
.hand{position:absolute;left:50%;width:0;height:0;}
.hand.eigen{top:396px;z-index:20;}

/* Eine angehobene Karte wächst über den Tisch hinaus — dann muss die
   ganze Hand mit nach vorn.

   Der z-index:200 der Karte weiter unten half hier nichts: `.hand.eigen`
   ist selbst positioniert und hat einen z-index, bildet also einen
   eigenen Stapelzusammenhang. Innerhalb davon darf die Karte noch so
   hoch stehen — nach außen zählt allein die 20 der Hand. Die
   Angriffsreihe steht bei 40 und schob sich deshalb mitsamt dem
   zustoßenden Diener über die vergrößerte Handkarte.

   150 ist mit Bedacht gewählt: über der Angriffsreihe (40), dem
   Todeszeichen (60) und den Emotes (120/130), aber unter dem Zielpfeil
   (180), den Geschossen (190/195) und allen Einblendungen (ab 205) —
   die sollen weiterhin über der Hand liegen. */
.hand.eigen:has(.karte.angehoben){z-index:150;}
/* Die Hand des Gegners am oberen linken Rand: verkleinert und gedreht,
   damit man jederzeit sieht, wie viele Karten er hält. */
.hand.gegner{left:186px;top:34px;transform:rotate(180deg) scale(.36);z-index:3;}
.hand .karte{
  left:-66px;top:0;width:132px;height:185px;font-size:11.4px;
  /* Gedreht wird um die Kartenmitte, die Bogenlage schreibt faecher()
     als translate aus. Ruhe- und Hebezustand tragen dadurch dieselbe
     Funktionsliste und denselben Drehpunkt — nur so überblendet der
     Browser Glied für Glied, statt über die zusammengefallene Matrix
     zu gehen und die Karte quer über die Hand zu schicken. */
  transform-origin:50% 50%;
  /* Zügig statt gemächlich: .12s reicht, damit die Bewegung als solche
     erkennbar ist. Bei .2s wirkte das Blättern durch den Fächer
     zögerlich — man war mit dem Zeiger längst zwei Karten weiter,
     während die erste noch aufging. */
  transition:transform .12s cubic-bezier(.2,.9,.3,1),filter .12s;
}
/* Angehoben wächst die Karte aus ihrer Mitte und rückt dabei so weit
   nach oben, dass sie vollständig im Bild steht. --hx setzt faecher()
   auf die Bogenposition der Karte. */
.hand.eigen .karte.angehoben{
  /* Dieselben vier Glieder wie im Ruhezustand, in derselben Reihenfolge.
     Die Karte bleibt waagerecht, wo sie liegt, hebt sich um 198 Punkte
     über ihre Bogenlage und wächst dabei aus ihrer eigenen Mitte. */
  transform:translate(var(--hx,0px),calc(var(--hy,0px) - 198px))
            rotate(0deg) scale(2.05)!important;
  /* Wichtig: faecher() vergibt z-index als Inline-Stil, der eine
     gewöhnliche Regel überstimmen würde. */
  z-index:200!important;
}

/* ─── Todeszeichen ────────────────────────────────────────────────
   Zeigt beim Zielen an, wer den Schlagabtausch nicht überleben würde —
   der Angegriffene ebenso wie der eigene Diener. */
.todeszeichen{
  position:absolute;left:50%;top:-16px;transform:translateX(-50%);
  width:38px;height:38px;z-index:60;pointer-events:none;
  color:#f4efe4;filter:drop-shadow(0 2px 4px rgba(0,0,0,.85));
  animation:totenkopfAn .18s ease-out;
}
@keyframes totenkopfAn{from{opacity:0;transform:translateX(-50%) scale(.5)}}
.todeszeichen svg{width:100%;height:100%;}
.held .todeszeichen{top:-20px;width:44px;height:44px;}

/* ─── Zeigerpfeil beim Angriff ─────────────────────────────────── */
.pfeil{position:absolute;inset:0;pointer-events:none;z-index:180;overflow:visible;}
/* ── Der Zielpfeil spricht in Farben ──────────────────────────────────
   Gold ist der Grundton; was er bewirkt, färbt ihn ein:

   · **rot** — Schaden, ein Angriff, ein Geschoss
   · **gelb** — Heilung, Stärkung, ein Segen

   So sieht man schon beim Ziehen, ob man dem Ziel nützt oder schadet —
   gerade bei Fähigkeiten mit `any`, die auf beide Seiten gehen können. */
.pfeil path{fill:none;stroke:var(--gold-hi);stroke-width:7;stroke-linecap:round;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.7));}
.pfeil polygon{fill:var(--gold-hi);filter:drop-shadow(0 2px 4px rgba(0,0,0,.7));}
.pfeil.schaden path  {stroke:#e05a4a;}
.pfeil.schaden polygon{fill:#e05a4a;}
.pfeil.heilung path  {stroke:#f5d24a;}
.pfeil.heilung polygon{fill:#f5d24a;}

/* ─── Schwebende Zahlen ────────────────────────────────────────── */
.flieger{
  position:absolute;z-index:190;pointer-events:none;
  font-family:var(--display);font-size:30px;padding-top:.1em;
  text-shadow:0 2px 0 var(--ink),0 0 10px rgba(0,0,0,.75);
  animation:aufsteigen 1s ease-out forwards;
}
.flieger.minus{color:#ff6a5a;} .flieger.plus{color:#8bf59b;}
.flieger.gold{color:var(--gold-hi);font-size:22px;}
@keyframes aufsteigen{
  0%{transform:translate(-50%,0) scale(.5);opacity:0}
  20%{transform:translate(-50%,-16px) scale(1.25);opacity:1}
  100%{transform:translate(-50%,-64px) scale(1);opacity:0}
}

/* ─── Rundenbanner und Hinweis ─────────────────────────────────── */
/* ─── Rundenanzeige ────────────────────────────────────────────────
   Ein schmales Band quer über die Mittellinie, das kurz einfährt und
   wieder verschwindet.

   Vorher war es eine große Pergamentrolle mitten auf dem Feld — aus
   einer Zeit, als das Brett noch anders aussah. Sie verdeckte die
   halbe Kampfreihe, hatte mit dem Rest des Tisches nichts gemein und
   stand ausgerechnet dort, wo auch der Wegweiser hinzeigt.

   Jetzt: dieselben Werkstoffe wie die übrigen Bedienelemente — Tusche,
   Holz, Goldkante —, aber flach und quer, sodass darunter alles sichtbar
   bleibt. Der Balken wächst aus der Mitte heraus und zieht sich dorthin
   zurück. */
.runde{
  position:absolute;left:50%;top:176px;transform:translateX(-50%);
  z-index:195;pointer-events:none;opacity:0;
  padding:4px 18px;border-radius:4px;
  border:2px solid var(--ink);
  background:linear-gradient(#7d6038,#4a3722 52%,#2f2415);
  box-shadow:0 0 0 1.5px rgba(224,179,82,.45) inset,
             0 3px 0 var(--ink),0 8px 16px -8px #000;
  font-family:var(--display);font-size:15px;line-height:1;padding-top:.5em;
  color:var(--parch-hi);text-shadow:0 2px 0 rgba(0,0,0,.65);
  white-space:nowrap;
}
/* Die beiden Goldrauten links und rechts sind entfallen. Sie sollten das
   Band mit der Zug-Taste verwandt aussehen lassen, machten es aber vor
   allem breiter und unruhiger — bei einem Hinweis, der zwei Sekunden zu
   sehen ist, zählt allein die Lesbarkeit. Mit ihnen zusammen ist das
   Band von 19 auf 15 Punkte Schriftgröße und von 26 auf 18 Punkte
   Innenabstand geschrumpft: es liegt jetzt flacher über der Mitte und
   verdeckt weniger. */
.runde.an{animation:rundeAn 1.8s cubic-bezier(.2,.9,.3,1) forwards;}
@keyframes rundeAn{
  0%  {opacity:0;transform:translateX(-50%) scaleX(.2);}
  12% {opacity:1;transform:translateX(-50%) scaleX(1);}
  78% {opacity:1;transform:translateX(-50%) scaleX(1);}
  100%{opacity:0;transform:translateX(-50%) scaleX(.86);}
}
@media (prefers-reduced-motion:reduce){
  .runde.an{animation:rundeSanft 1.8s linear forwards;}
  @keyframes rundeSanft{0%,100%{opacity:0}12%,78%{opacity:1}}
}

.hinweis{
  position:absolute;left:50%;top:184px;transform:translateX(-50%);
  z-index:185;pointer-events:none;white-space:nowrap;
  background:rgba(20,16,11,.92);border:2px solid var(--tan);border-radius:5px;
  padding:5px 15px;font-family:var(--display);font-size:15px;padding-top:.4em;
  color:var(--parch-hi);opacity:0;transition:opacity .18s;
}
.hinweis.an{opacity:1;}

/* ─── Pergamentrolle ───────────────────────────────────────────── */
.rolle{display:inline-flex;align-items:stretch;height:52px;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.55));}
.rolle-ende{height:100%;width:auto;flex:0 0 auto;display:block;}
.rolle-ende:last-child{transform:scaleX(-1);}
.rolle-feld{position:relative;flex:1 1 auto;display:grid;place-items:center;
  min-width:60px;margin:0 -1px;}
.rolle-mitte{position:absolute;inset:0;width:100%;height:100%;}
.rolle-feld span{position:relative;z-index:2;padding:0 18px;
  font-family:var(--display);font-size:21px;line-height:1;padding-top:.3em;
  color:var(--ink);white-space:nowrap;}
.rolle.gross{height:84px;}
.rolle.gross .rolle-feld span{font-size:36px;padding:0 26px;padding-top:.3em;}
.rolle.klein{height:44px;}
.rolle.klein .rolle-feld span{font-size:18px;padding:0 14px;padding-top:.3em;}

/* ─── Überlagerungen ───────────────────────────────────────────── */
.schleier{
  position:absolute;inset:0;z-index:210;display:none;
  align-items:center;justify-content:center;flex-direction:column;gap:14px;
  background:rgba(13,10,7,.92);border-radius:16px;padding:12px;
}
.schleier.an{display:flex;}
.schleier h2{font-family:var(--display);font-size:32px;padding-top:.2em;
  color:var(--parch-hi);margin:0;}
.schleier p{margin:0;font-size:14px;color:var(--tan);text-align:center;}
.knopf{
  min-height:48px;padding:0 30px;display:inline-grid;place-items:center;
  font-family:var(--display);font-size:19px;padding-top:.25em;
  background:linear-gradient(var(--parch-hi),var(--parch) 55%,var(--parch-sh));
  color:var(--ink);border:3px solid var(--ink);border-radius:6px;
  cursor:pointer;text-decoration:none;
  box-shadow:0 4px 0 var(--ink),0 8px 16px -6px #000;
}
.knopf:active{transform:translateY(4px);box-shadow:0 0 0 var(--ink);}
.knopf.rot{background:linear-gradient(var(--red-hi),var(--red) 55%,var(--red-dk));
  color:var(--parch-hi);}

/* Handaustausch — hier wird gelesen und entschieden, nicht gespielt:
   die Karten dürfen den ganzen Bildschirm ausnutzen. */
.austausch{justify-content:space-between;gap:8px;}
.austausch .reihe-karten{display:flex;gap:16px;justify-content:center;
  align-items:center;flex-wrap:wrap;}
.austausch .karte{position:relative;left:auto;top:auto;
  width:178px;height:249px;font-size:15.3px;
  transition:transform .18s,filter .18s;}
.austausch .karte.zurueck{filter:brightness(.45) saturate(.35);transform:scale(.92);}
.austausch .karte.zurueck::after{
  content:"↻";position:absolute;inset:0;z-index:30;display:grid;place-items:center;
  font-family:var(--display);font-size:56px;color:var(--parch-hi);
  text-shadow:0 3px 0 var(--ink);
}

/* ─── Querformat erzwingen ─────────────────────────────────────── */
.drehen{
  position:fixed;inset:0;z-index:400;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:20px;
  background:#0d0a07;text-align:center;padding:30px;
}
.drehen svg{width:74px;height:74px;color:var(--gold);
  animation:kippen 2.2s ease-in-out infinite;}
@keyframes kippen{0%,42%{transform:rotate(0)}58%,100%{transform:rotate(-90deg)}}
.drehen p{font-family:var(--display);font-size:24px;padding-top:.25em;
  color:var(--parch-hi);margin:0;}
.drehen small{color:var(--tan);font-size:13px;}
@media (orientation:portrait){
  .drehen{display:flex;}
  .buehne{display:none;}
}

/* ─── Regelübersicht ───────────────────────────────────────────── */
/* Fragezeichen und Logbuch stehen unten rechts, nicht oben.

   Oben gehört dem, was man im Zug wirklich braucht: Einstellungen und
   der Ton-Schalter. Nachschlagen und Nachlesen sind ruhige Handlungen —
   und die untere rechte Ecke ist am Handy die einzige, die der Daumen
   ohne Umgreifen erreicht. Neben dem Fächer, nicht darüber: bei acht
   Karten reicht die äußerste bis x≈778, die Knöpfe beginnen bei 896. */
.zahnrad.hilfe{top:auto;bottom:12px;right:12px;}
.regelblatt{
  display:flex;gap:26px;max-width:860px;max-height:330px;overflow-y:auto;
  padding:16px 22px;border-radius:10px;text-align:left;
  background:linear-gradient(var(--wood),var(--wood-dk));
  border:3px solid var(--ink);box-shadow:0 0 0 2px var(--tan);
}
.regelspalte{flex:1;min-width:0;}
.regelblatt h3{font-family:var(--display);font-size:17px;padding-top:.25em;
  color:var(--gold-hi);margin:12px 0 4px;}
.regelspalte h3:first-child{margin-top:0;}
.regelblatt p{margin:0;font-size:13px;line-height:1.5;color:var(--parch);text-align:left;}
.regelblatt b{color:var(--gold-hi);}
.regelblatt dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;
  font-size:13px;line-height:1.45;}
.regelblatt dt{color:var(--gold-hi);font-weight:700;white-space:nowrap;}
.regelblatt dd{margin:0;color:var(--parch);}

/* ─── Logbuch ──────────────────────────────────────────────────── */
.zahnrad.logbuch{top:auto;bottom:12px;right:64px;}
/* Der Ton-Knopf schließt die Reihe nach unten ab. Stumm geschaltet wird
   er sichtbar gedämpft und zeigt den durchgestrichenen Lautsprecher —
   der Zustand muss aus zwei Metern Abstand ablesbar sein, sonst sucht
   man beim nächsten Start die verschwundene Musik in den Einstellungen. */
/* Oben bleiben nur zwei: Einstellungen (10) und Ton darunter. */
.zahnrad.ton{top:58px;}
.zahnrad.ton .strich{opacity:0;transition:opacity .14s;}
.zahnrad.ton .wellen{transition:opacity .14s;}
.zahnrad.ton.stumm{background:linear-gradient(#4a4136,#2a251d);color:#9c9086;}
.zahnrad.ton.stumm .wellen{opacity:0;}
.zahnrad.ton.stumm .strich{opacity:1;}
.logblatt{
  width:min(560px,86vw);max-height:320px;overflow-y:auto;
  padding:14px 20px;border-radius:10px;text-align:left;
  background:linear-gradient(var(--wood),var(--wood-dk));
  border:3px solid var(--ink);box-shadow:0 0 0 2px var(--tan);
}
.logblatt section{margin-bottom:12px;}
.logblatt section:last-child{margin-bottom:0;}
.logblatt h3{font-family:var(--display);font-size:16px;padding-top:.25em;
  color:var(--gold-hi);margin:0 0 4px;position:sticky;top:-14px;
  background:linear-gradient(var(--wood),var(--wood));padding-bottom:3px;}
.logblatt p{margin:0 0 2px;font-size:13px;line-height:1.45;color:var(--parch);
  text-align:left;}
.logblatt .leer{color:var(--tan);text-align:center;}

/* Zwei Spalten: links das Zeichen, rechts der Satz. Ein Raster statt
   eines vorangestellten Zeichens im Text — sonst rückten die Sätze je
   nach Zeichenbreite unterschiedlich weit ein, und die Spalte, an der
   das Auge entlangläuft, wäre keine. */
.logblatt .logzeile{
  display:grid;grid-template-columns:18px 1fr;gap:8px;align-items:baseline;
  padding:1px 0;
}
.logblatt .logzeile i{
  font-style:normal;text-align:center;opacity:.75;font-size:12px;
  color:var(--tan);
}
/* Was zählt, wird deutlicher: Kampf, Verluste und das Ende. Der Rest
   bleibt zurückhaltend, sonst leuchtet alles gleich laut. */
.logblatt .angriff i{color:var(--red-hi);opacity:1;}
.logblatt .sterben i,.logblatt .zerstoert i{color:var(--red-hi);opacity:1;}
.logblatt .heldSchaden i{color:var(--red-hi);opacity:1;}
.logblatt .heilen i,.logblatt .heldHeilung i{color:#7fd6a0;opacity:1;}
.logblatt .zauber i,.logblatt .geheimnisLoest i{color:var(--gold-hi);opacity:1;}
.logblatt .spielEnde i{color:var(--gold-hi);opacity:1;}
.logblatt .warnung i{color:#e88;opacity:1;}
/* Der Zugwechsel trennt sichtbar, statt sich einzureihen. */
.logblatt .zugStart{
  margin:7px 0 4px;padding-top:6px;
  border-top:1px solid rgba(238,220,171,.22);
}
.logblatt .zugStart span{color:var(--gold-hi);font-family:var(--display);
  font-size:12.5px;letter-spacing:.02em;}
.logblatt .spielEnde span{color:var(--gold-hi);}

/* ─── Zurufe (Emotes) ──────────────────────────────────────────────
   Ein Klick auf den eigenen Helden öffnet den Kranz. Er sitzt über dem
   Kopf, weil dort auf allen Geräten Platz ist — neben dem Helden läge
   er unter der Hand. */
#heldIch{cursor:pointer;}
.emotekranz{
  position:absolute;left:50%;bottom:200px;transform:translateX(-50%) scale(.85);
  z-index:120;display:none;gap:6px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  width:340px;opacity:0;transition:opacity .14s,transform .14s;
}
.emotekranz.an{display:grid;opacity:1;transform:translateX(-50%) scale(1);}
.emote{
  min-height:34px;padding:0 8px;cursor:pointer;
  font-family:var(--display);font-size:13px;line-height:1.1;padding-top:.25em;
  color:var(--ink);border:2.5px solid var(--ink);border-radius:6px;
  background:linear-gradient(var(--parch-hi),var(--parch) 60%,var(--parch-sh));
  box-shadow:0 3px 0 var(--ink);
}
.emote:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink);}

/* Sprechblase über dem Kopf */
/* Die Blase sitzt auf der **Bühne** und wird von js/tisch.js an den
   Helden gesetzt — nicht mehr im Helden, dessen Schicht sie gefangen
   hielt. Deshalb keine Verankerung an `100%` mehr, sondern eine feste
   Lage plus Zentrierung um den eigenen Mittelpunkt. */
.blase{
  position:absolute;transform:translate(-50%,-50%);
  z-index:130;white-space:nowrap;pointer-events:none;
  padding:6px 14px;border-radius:8px;
  background:linear-gradient(var(--parch-hi),var(--parch-sh));
  border:2.5px solid var(--ink);box-shadow:0 4px 10px -4px #000;
  font-family:var(--display);font-size:15px;padding-top:.4em;color:var(--ink);
  animation:blaseAn .2s cubic-bezier(.2,.9,.3,1.5),blaseWeg .35s 2.25s forwards;
}
.blase::after{
  content:"";position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);
  border:7px solid transparent;border-top-color:var(--ink);
}
.blase.gegner{}
.blase.gegner::after{bottom:auto;top:-9px;
  border-top-color:transparent;border-bottom-color:var(--ink);}
@keyframes blaseAn{from{opacity:0;transform:translate(-50%,-50%) scale(.6)}}
@keyframes blaseWeg{to{opacity:0;transform:translate(-50%,-50%) scale(.85)}}

/* ─── Geheimnisse am Helden ────────────────────────────────────────
   Eigene zeigen ihr Motiv, gegnerische bleiben verdeckt — sonst wäre
   der Reiz dahin. */
/* **Ein Bogen um das Bildnis, keine Reihe daneben.**

   Die Siegel standen über dem Helden nebeneinander und wuchsen mit jedem
   weiteren ins Spielfeld hinein. Jetzt liegen sie auf einem Kreis um
   sein Bildnis — nach **außen** gewandt, dorthin, wo Platz ist: beim
   eigenen Helden nach unten, beim Gegner nach oben.

   Der Behälter ist ein Punkt in der Mitte des Bildnisses; jedes Siegel
   dreht sich von dort nach außen (die Winkel setzt js/tisch.js). */
/* **Keine Drehung am Behälter.** Er stand auf `rotate(180deg)`, damit
   „0 Grad" nach unten zeigt — das drehte aber die Siegel gleich mit, und
   über meinem Bildnis standen sie auf dem Kopf.

   Die Richtung rechnet jetzt js/tisch.js aus; der Behälter ist nur noch
   ein Punkt in der Mitte des Bildnisses. */
/* Der Behälter sitzt auf der **Bühne** (siehe js/tisch.js) und wird an
   die Mitte des Bildnisses gesetzt. Nur so liegt er über Kartenreihe und
   Bildnis — im Helden war er in dessen Schicht gefangen. */
.buehne > .geheimnisse{
  position:absolute;width:0;height:0;z-index:70;pointer-events:none;
}
.geheimnisse .siegel{
  position:absolute;left:-14px;top:-14px;
  transition:transform .22s cubic-bezier(.2,.9,.3,1.3);
}
.siegel{
  width:28px;height:28px;border-radius:50%;overflow:hidden;
  border:2.5px solid var(--ink);display:grid;place-items:center;
  background:linear-gradient(#b0703c,#7a4520);
  box-shadow:0 0 0 1.5px var(--gold),0 2px 4px -1px #000;
  font-family:var(--display);font-size:15px;padding-top:.15em;color:var(--parch-hi);
  animation:siegelAn .25s cubic-bezier(.2,.9,.3,1.5);
}
/* Die eigenen Siegel lassen sich anklicken, um den Wortlaut nachzulesen —
   das soll man ihnen ansehen. Fremde bleiben stumm. */
.siegel.offen{background:#fff;cursor:pointer;}
.siegel.offen:hover,.siegel.offen:focus-visible{
  box-shadow:0 0 0 2.5px var(--gold-hi),0 3px 6px -1px #000;
  transform:scale(1.12);outline:none;}
.siegel.offen{transition:transform .12s ease-out,box-shadow .12s ease-out;}
/* Das Motiv steht mittig und klein auf der Karte — hier wird
   hineingezoomt, damit es auf 28 Punkten noch erkennbar ist. */
.siegel img{width:100%;height:100%;object-fit:cover;object-position:50% 47%;
  transform:scale(2.5);}
@keyframes siegelAn{from{transform:scale(.4);opacity:0}}

/* ─── Kartenauftritt ───────────────────────────────────────────────
   Kurzer Auftritt in der Mitte, damit man sieht, was gerade gewirkt
   wurde — die Wirkung allein läuft sonst unkommentiert übers Feld. */
.auftritt{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  z-index:205;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  animation:auftrittAn .3s cubic-bezier(.2,.9,.3,1.4);
}
.auftritt.weg{animation:auftrittWeg .26s ease forwards;}
@keyframes auftrittAn{
  from{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(-8deg)}}
@keyframes auftrittWeg{
  to{opacity:0;transform:translate(-50%,-64%) scale(1.08)}}
.auftritt-titel{
  padding:5px 16px;border-radius:6px;white-space:nowrap;
  background:rgba(20,16,11,.92);border:2.5px solid var(--gold);
  font-family:var(--display);font-size:17px;padding-top:.4em;
  color:var(--gold-hi);text-shadow:0 2px 3px #000;
}
.auftritt .karte{filter:drop-shadow(0 12px 24px rgba(0,0,0,.75));}

/* ─── Handkarten ausfahren ─────────────────────────────────────────
   Die Hand ragt normalerweise nur zur Hälfte ins Bild. Ein Druck auf
   den Schalter schiebt sie ganz heraus — sie verdeckt dann mehr vom
   Feld, dafür sind alle Karten vollständig zu lesen. */
.handtaste{
  position:absolute;left:26px;top:404px;z-index:60;
  width:66px;height:48px;cursor:pointer;
  border:3px solid var(--ink);border-radius:9px;
  background:linear-gradient(#8a6a3e,#5b4428 45%,#3a2b18);
  color:var(--parch-hi);display:grid;place-items:center;
  box-shadow:0 4px 0 var(--ink),0 8px 14px -7px #000;
  transition:transform .16s,box-shadow .12s;
}
.handtaste:active{transform:translateY(4px);box-shadow:0 0 0 var(--ink);}
.handtaste svg{width:26px;height:26px;transition:transform .22s ease;}
.buehne.hand-offen .handtaste svg{transform:rotate(180deg);}

/* Ein- und Ausfahren als Bewegung, nicht als Sprung. Über hundert
   Punkte ohne Übergang sahen aus wie ein Bildfehler — und eine gerade
   fliegende Karte muss ihrem Platz folgen können, was bei einem Sprung
   nur ruckartig ginge. Die Ziehanimation liest ihr Ziel in jedem Bild
   neu aus und läuft deshalb sauber mit. */
.hand.eigen{transition:top .22s cubic-bezier(.3,0,.25,1);}
.buehne.hand-offen .hand.eigen{top:290px;}

/* Sonst wird nichts verschoben: die Karten legen sich einfach über das
   Feld und geben es beim nächsten Druck wieder frei. */
/* Ausgefahren steht die Karte höher — sie muss weniger weit nach oben
   rücken, um vollständig im Bild zu bleiben. */
.buehne.hand-offen .hand.eigen .karte.angehoben{
  /* Auch hier dieselben drei Glieder und derselbe Durchhang wie im
     Ruhezustand — sonst schwingt die Karte beim Anheben quer über die
     Hand, statt an Ort und Stelle zu wachsen. Beim letzten Umbau war
     `--hy` hier übersehen worden. */
  transform:translate(var(--hx,0px),calc(var(--hy,0px) - 100px))
            rotate(0deg) scale(2.05)!important;
}

/* ─── Kampfschrei-Schlag ───────────────────────────────────────────
   Ein Kampfschrei, der Schaden macht, zeigte bisher nur eine Zahl —
   man sah nicht, wer zugeschlagen hat. Der Verursacher schnellt vor
   und schickt ein Geschoss, das am Ziel als Druckwelle zerplatzt. */
.geschoss{
  position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;
  border-radius:50%;z-index:190;pointer-events:none;
  background:radial-gradient(circle at 34% 30%,#fff6cd,var(--gold) 45%,var(--red) 100%);
  box-shadow:0 0 14px 3px rgba(224,179,82,.75),inset 0 0 6px rgba(0,0,0,.35);
  transition:transform .3s cubic-bezier(.35,.05,.6,1),opacity .3s ease-in;
}
.druckwelle{
  position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;
  border-radius:50%;z-index:189;pointer-events:none;
  border:4px solid var(--gold-hi);
  animation:welleAus .4s ease-out forwards;
}
@keyframes welleAus{
  from{transform:scale(.4);opacity:1;}
  to{transform:scale(4.2);opacity:0;border-width:1px;}
}

/* Beschwörung: die Karte klappt auf und schrumpft auf ihren Platz. */
.karte.ruf{
  position:absolute;width:116px;height:162px;font-size:10.3px;
  z-index:195;pointer-events:none;
  transform-origin:50% 62%;
  animation:rufAuf .62s cubic-bezier(.25,.9,.35,1) forwards;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.7));
}
@keyframes rufAuf{
  0%  {transform:rotateY(90deg) scale(.5);opacity:0;}
  30% {transform:rotateY(0) scale(1);opacity:1;}
  70% {transform:rotateY(0) scale(1);opacity:1;}
  100%{transform:rotateY(0) scale(.42) translateY(26px);opacity:0;}
}

/* ─── Heilung und Verstärkung ──────────────────────────────────────
   Bewusst kein Geschoss: beides kommt oft im Dutzend, und ein Flug
   quer über das Feld für jedes „+1/+1" machte das Brett unlesbar.
   Stattdessen pulst das Ziel kurz auf. */
.puls{
  position:absolute;left:-6px;top:-6px;right:-6px;bottom:-6px;
  border-radius:50%;pointer-events:none;z-index:15;
  animation:pulsAus .6s ease-out forwards;
}
.puls.gruen{
  background:radial-gradient(circle,rgba(139,245,155,.55),rgba(139,245,155,0) 68%);
  box-shadow:0 0 18px 4px rgba(139,245,155,.75);
}
.puls.gold{
  background:radial-gradient(circle,rgba(247,216,120,.5),rgba(247,216,120,0) 68%);
  box-shadow:0 0 18px 4px rgba(224,179,82,.7);
}
@keyframes pulsAus{
  0%{transform:scale(.7);opacity:0;}
  35%{transform:scale(1.06);opacity:1;}
  100%{transform:scale(1.25);opacity:0;}
}
.flieger.staerke{color:#f7d878;}

/* Fernkämpfer legen an, statt vorzustürmen. */
.diener.zielt .scheibe{
  box-shadow:0 0 0 3px var(--gold-hi),0 0 20px -2px var(--gold),0 8px 14px -6px #000;
}

/* Nach dem Bereitmelden lässt sich die Starthand nicht mehr ändern. */
#revanche[hidden]{display:none;}
#revanche:disabled{opacity:.6;cursor:default;}
#austauschBtn:disabled{opacity:.55;cursor:default;box-shadow:0 4px 0 var(--ink);}
.austausch.wartet .karte{pointer-events:none;filter:brightness(.72);}
.austausch.wartet p{color:var(--gold-hi);}

/* Wer den Handknopf hektisch traktiert, dem fällt der Pfeil heraus. */
.handtaste.kaputt svg{animation:pfeilFaellt 1.1s cubic-bezier(.4,0,.7,1) forwards;}
@keyframes pfeilFaellt{
  0%   {transform:translate(0,0) rotate(0);opacity:1;}
  8%   {transform:translate(1px,-3px) rotate(-8deg);}
  40%  {transform:translate(6px,46px) rotate(150deg);opacity:1;}
  52%  {transform:translate(9px,38px) rotate(168deg);}
  60%  {transform:translate(11px,46px) rotate(176deg);opacity:1;}
  75%  {transform:translate(11px,46px) rotate(176deg);opacity:0;}
  88%  {transform:translate(0,-14px) rotate(0);opacity:0;}
  100% {transform:translate(0,0) rotate(0);opacity:1;}
}

/* ─── Zerspringender Göttlicher Schild ─────────────────────────────
   Vorher stand dort nur das Wort „Schild!" — dass gerade der Schutz
   gefallen ist, übersah man leicht. */
.scherben{position:absolute;inset:0;pointer-events:none;z-index:22;}
.scherben i{
  position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4px 0 0 -4px;
  background:linear-gradient(140deg,#fff6cd,var(--gold) 60%,var(--gold-dk));
  clip-path:polygon(50% 0,100% 62%,22% 100%);
  animation:splitter .6s ease-out forwards;
}
.scherben i:nth-child(1){--rx:-30px;--ry:-26px;}
.scherben i:nth-child(2){--rx: 32px;--ry:-22px;}
.scherben i:nth-child(3){--rx: 38px;--ry: 16px;}
.scherben i:nth-child(4){--rx:  4px;--ry: 40px;}
.scherben i:nth-child(5){--rx:-36px;--ry: 20px;}
.scherben i:nth-child(6){--rx:-10px;--ry:-40px;}
@keyframes splitter{
  0%  {transform:translate(0,0) rotate(0) scale(.6);opacity:1;}
  100%{transform:translate(var(--rx),var(--ry)) rotate(220deg) scale(1);opacity:0;}
}

/* Zerstörte Diener zerspringen, statt bloß zu verblassen. */
.diener.zerbricht{animation:zerbrechen .38s ease-in forwards;}
@keyframes zerbrechen{
  0%  {transform:scale(1) rotate(0);filter:none;}
  35% {transform:scale(1.14) rotate(-6deg);filter:brightness(2.2) saturate(.3);}
  100%{transform:scale(.2) rotate(16deg);opacity:0;}
}

.puls.rot{
  background:radial-gradient(circle,rgba(255,106,90,.5),rgba(255,106,90,0) 68%);
  box-shadow:0 0 18px 4px rgba(157,38,33,.7);
}

/* ══════════════════════════════════════════════════════════════════
   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{
  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,.hieb.klaue i{height:6px;width:64px;margin:-3px 0 0 -32px;}
.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.

   Vorher waren es zwei dicke leuchtende Balken — das sah nach Zauber
   aus, nicht nach Schnitt. Eine Sense ist ein schmales Blatt: 3 statt 7
   Punkte, dafür länger, 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;}
/* ── 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. */
.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;}
}


/* ══════════════════════════════════════════════════════════════════
   DOOM — ein schwarzes Loch

   Die Form kommt von den Kartenrückgründen des Schattenzirkels: breite,
   sichelförmige Arme, die sich zur Spitze hin verjüngen. Keine Striche
   und kein Kegelverlauf — beides sah platt aus. Die Arme werden als
   **gefüllte Flächen** zwischen zwei versetzten Spiralen gezeichnet
   (siehe strudelSvg() in tisch.js), die Breite folgt einer Sinuskurve
   über den Radius: innen spitz, bei etwa 60 Prozent am breitesten,
   außen wieder auslaufend.

   Drei Lagen übereinander geben Tiefe:
     · neun fast schwarze Arme außen, langsam im Uhrzeigersinn
     · sieben glimmend rote innen, schneller und gegenläufig
     · der Schlund selbst: schwarz mit einem glühenden Rand

   Kein Filter und kein `will-change` — beides rastert unter `zoom` und
   macht die Karten darunter unscharf.
   ══════════════════════════════════════════════════════════════════ */

/* Das Licht verlässt den Tisch. Ein schwarzes Loch nimmt nicht nur die
   Karten, sondern auch die Helligkeit — das trägt mehr zur Stimmung bei
   als jeder Effekt am Rand. */
.doomschatten{
  position:absolute;inset:0;z-index:188;pointer-events:none;
  background:radial-gradient(circle at var(--dx,50%) var(--dy,50%),
    rgba(0,0,0,.92) 0%,rgba(0,0,0,.74) 26%,rgba(0,0,0,.42) 52%,rgba(0,0,0,.12) 78%);
  animation:doomSchatten 2.3s ease-out forwards;
}
@keyframes doomSchatten{
  0%{opacity:0;} 22%{opacity:1;} 76%{opacity:1;} 100%{opacity:0;}
}

/* Was eingesogen wird, folgt einer **Spirale**, nicht einer Geraden.
   Der Weg wird Bild für Bild in tisch.js gerechnet; hier steht nur, dass
   das Stück nicht mehr angefasst werden kann. */
.eingesogen{pointer-events:none;}

@media (prefers-reduced-motion:reduce){
  .doomschatten{animation:none;}
  .eingesogen{opacity:0;}
}

/* ══════════════════════════════════════════════════════════════════
   DER FEUERBALL

   Aufladen, fliegen, einschlagen. Die Farben stammen von der
   Kartengrafik: gelber Kern, oranger Mantel, roter Saum.

   Kein Filter und kein `will-change` — beides rastert unter `zoom`.
   ══════════════════════════════════════════════════════════════════ */
.feuerball{
  position:absolute;z-index:186;pointer-events:none;
  width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;
  background:radial-gradient(circle at 42% 38%,
    #fff6c8 0%,#ffd24a 26%,#f58a1f 52%,#c4231d 76%,rgba(196,35,29,0) 92%);
  transform:scale(.2);
  animation:feuerLaedt .16s ease-out forwards;
}
/* Das Aufladen: er wächst aus dem Nichts und pocht einmal. */
@keyframes feuerLaedt{
  0%  {transform:scale(.15);opacity:0;}
  55% {transform:scale(1.18);opacity:1;}
  100%{transform:scale(.94);opacity:1;}
}
.feuerball.fliegt{
  animation:none;transform:scale(.94);
  transition:transform 260ms cubic-bezier(.35,0,.6,1);
}

@media (prefers-reduced-motion:reduce){
  .feuerball{animation:none;display:none;}
}

/* Die Teilchenschicht für die großen Zauber. Sie liegt über dem Brett,
   aber unter den Fenstern — ein Zauber soll das Spiel nicht verdecken.

   Größe und Speicher setzt js/funken.js: die Bühne skaliert über `zoom`,
   ein Canvas hat aber eine feste Punktzahl im Speicher, und ohne
   Nachführung wäre die Zeichnung auf großen Schirmen matschig. */
.funkenschicht{
  position:absolute;left:0;top:0;z-index:188;pointer-events:none;
}

/* Der Wurfstein (Frohdu): dieselbe Wurfparabel wie ein Pfeil, aber ohne
   Ausrichtung — ein Stein hat keine Spitze, die zeigen könnte, wohin er
   fliegt. Er überschlägt sich stattdessen im Flug. */
.wurfstein{position:absolute;z-index:186;pointer-events:none;width:0;height:0;}
.wurfstein i{
  position:absolute;
  /* `--wg` skaliert den Stein: Frohdu wirft mit 1, das Katapult mit 2,1. */
  width:calc(13px * var(--wg,1));height:calc(12px * var(--wg,1));
  margin:calc(-6px * var(--wg,1)) 0 0 calc(-6.5px * var(--wg,1));
  background:linear-gradient(150deg,#8e8578,#5f584d 55%,#3b352d);
  border:1.5px solid #14100b;
  border-radius:44% 56% 38% 62% / 52% 40% 60% 48%;
}

/* Die dicke Ladung des Hornbläsers: derselbe Mündungsblitz und dieselbe
   Bahn wie ein Schuss, nur größer und länger stehend. Eine Kanone
   spuckt mehr als ein Musketier. */
.muendung.dick{transform:scale(1.9);}
.schussbahn.dick{height:7px;opacity:.95;}

/* Der Wurfdolch: das Kartenmotiv als Sprite, freigestellt und waagerecht
   ausgerichtet (Spitze nach rechts). Er fliegt zum Ziel und bleibt
   stecken — die **Spitze verschwindet dabei im Getroffenen**.

   Das macht `clip-path`: beim Einschlag wird die vordere Hälfte
   abgeschnitten, sodass nur noch Griff und halbe Klinge herausragen.
   Ein Dolch, der vollständig sichtbar auf dem Gegner liegt, sähe aus,
   als läge er davor. */
.wurfdolch{
  position:absolute;z-index:186;pointer-events:none;width:0;height:0;
}
.wurfdolch img{
  position:absolute;display:block;
  width:60px;height:auto;margin:-11px 0 0 -30px;
}
/* Steckt: die vordere Hälfte ist im Ziel verschwunden. */
.wurfdolch.steckt img{
  clip-path:inset(0 52% 0 0);
  animation:dolchVergeht .9s ease-in forwards;
}
@keyframes dolchVergeht{
  0%,55%{opacity:1;}
  100%  {opacity:0;}
}


/* ── Trittfalle (Stachelfalle) ──
   Vier lange Stacheln schießen aus der Karte hoch und fahren wieder
   ein: **Metallspitze auf dünnem Holzschaft**, wie bei einer Fallgrube.

   Der Schaft ist der eigentliche Kniff. Er ist schmal (4 Punkte) und
   holzbraun, die Spitze silbern und breiter — dadurch liest man beides
   als **ein** Gerät und nicht als Pfeil. Dass er lang ist (bis 58
   Punkte), macht das Schnellen aus: eine kurze Spitze pieksst, eine
   lange schießt hoch.

   Räumlich ohne 3D, durch drei Mittel:
   · der Stachel **wächst in der Höhe**, nicht in der Breite — er kommt
     nicht näher, er fährt heraus;
   · ein **Schatten** wandert mit, weicher und weiter versetzt, je höher
     er steht;
   · ein **dunkles Loch** bleibt, wo er durchgestoßen ist.

   Der Ablauf ist bewusst ungleich verteilt: heraus in 0,26 Sekunden,
   oben ein kurzer Halt, hinein in 0,3. Gleich lange Wege in beide
   Richtungen sähen nach Kolben aus, nicht nach Falle. */
.trittfalle{
  position:absolute;z-index:187;pointer-events:none;width:0;height:0;
}
/* Das Loch, durch das er stößt. */
.trittfalle b{
  position:absolute;left:0;top:0;
  width:15px;height:8px;margin:-4px 0 0 -7.5px;border-radius:50%;
  background:radial-gradient(ellipse,#0d0906 0 52%,rgba(13,9,6,0) 100%);
  transform:translate(var(--px,0),var(--py,0)) scale(.2);
  animation:fallenloch .95s ease-out forwards;
  opacity:0;
}
@keyframes fallenloch{
  0%  {opacity:0;transform:translate(var(--px,0),var(--py,0)) scale(.2);}
  14% {opacity:1;transform:translate(var(--px,0),var(--py,0)) scale(1);}
  76% {opacity:1;}
  100%{opacity:0;transform:translate(var(--px,0),var(--py,0)) scale(.85);}
}
/* Der Stachel: Schaft und Spitze in einem Element. Der Verlauf setzt
   die Grenze bei 34 Prozent — darüber Metall, darunter Holz. */
.trittfalle i{
  position:absolute;left:0;top:0;
  width:9px;height:58px;margin:-58px 0 0 -4.5px;
  /* Spitze breit, Schaft schmal: die Form macht aus zwei Farben ein
     Gerät. */
  clip-path:polygon(50% 0,100% 30%,72% 34%,66% 100%,34% 100%,28% 34%,0 30%);
  background:linear-gradient(180deg,
    #fdfdfb 0%,#dfe3e8 18%,#9aa2ab 32%,
    #7a5330 35%,#8d6338 62%,#5f3f24 100%);
  transform-origin:50% 100%;
  animation:fallenstachel .95s cubic-bezier(.16,.9,.28,1) forwards;
  opacity:0;
}
@keyframes fallenstachel{
  /* Nur in der Höhe gestaucht — er fährt heraus, er kommt nicht näher. */
  0%  {opacity:0;
       transform:translate(var(--px,0),var(--py,0)) scaleY(.04);
       filter:drop-shadow(0 0 0 rgba(0,0,0,0));}
  8%  {opacity:1;}
  28% {transform:translate(var(--px,0),var(--py,0)) scaleY(1);
       filter:drop-shadow(3px 8px 6px rgba(0,0,0,.6));}
  40% {transform:translate(var(--px,0),var(--py,0)) scaleY(.94);
       filter:drop-shadow(3px 7px 5px rgba(0,0,0,.55));}
  52% {transform:translate(var(--px,0),var(--py,0)) scaleY(.97);
       filter:drop-shadow(3px 7px 5px rgba(0,0,0,.55));}
  100%{opacity:1;
       transform:translate(var(--px,0),var(--py,0)) scaleY(.02);
       filter:drop-shadow(0 0 0 rgba(0,0,0,0));}
}

/* ── Verwirrung (Rolle der Verwirrung) ──
   Drei Fragezeichen über dem Kopf. Sie steigen auf, wackeln dabei und
   verblassen — wer nicht mehr weiß, wen er schlägt, soll auch unsicher
   aussehen. */
.verwirrt{
  position:absolute;z-index:187;pointer-events:none;width:0;height:0;
}
.verwirrt i{
  position:absolute;left:0;top:0;
  font-family:var(--display);font-size:30px;font-style:normal;
  color:#ffe9a8;text-shadow:0 2px 4px #000,0 0 10px rgba(255,220,120,.6);
  animation:fragezeichen 1.1s cubic-bezier(.3,.6,.4,1) forwards;
}
.verwirrt i:nth-child(1){--fx:-22px;--fk:-14deg;}
.verwirrt i:nth-child(2){--fx:0px;  --fk:6deg; animation-delay:.13s;font-size:36px;}
.verwirrt i:nth-child(3){--fx:22px; --fk:16deg;animation-delay:.26s;}
@keyframes fragezeichen{
  0%  {opacity:0;transform:translate(var(--fx,0),6px) scale(.5) rotate(0deg);}
  26% {opacity:1;transform:translate(var(--fx,0),-24px) scale(1) rotate(var(--fk,0deg));}
  70% {opacity:1;transform:translate(var(--fx,0),-38px) scale(1) rotate(calc(var(--fk,0deg) * -.6));}
  100%{opacity:0;transform:translate(var(--fx,0),-58px) scale(.95) rotate(var(--fk,0deg));}
}

/* ── Die Heldenfähigkeit ──────────────────────────────────────────────
   Links neben dem Bildnis, beim Gegner rechts.

   **Kein dunkler Teller.** Die erste Fassung setzte das Symbol auf eine
   gefüllte Scheibe — auf dem hellen Tisch las sich das als schwarzer
   Kasten hinter dem Bild. Jetzt ist die Scheibe nur ein **Ring**, und
   das Zeichen steht darin frei; bei einer abgeleiteten Fähigkeit füllt
   das Kartenbild ihn aus.

   Kleiner als zuvor (40 statt 52) und dichter am Bildnis: der Knopf
   gehört zum Helden, er steht nicht daneben.

   Die Zustände: bereit (das Zeichen atmet), zu teuer (roter Manastein),
   verbraucht (ausgegraut). Kein Haken mehr — ausgegraut sagt es schon,
   und das Häkchen verdeckte das Bild. */
/* **Dreißig Prozent größer und mit Luft.** 40 Punkte dicht am Bildnis
   wirkten gedrängt — die Fähigkeit ist ein Bedienelement, kein Anhängsel.
   Jetzt 52 Punkte und 10 statt 2 Abstand. */
/* 56 statt 52 Punkte: das Kartenbild der bildhaften Fähigkeiten
   (Aufgebot, Feuerball) war im Ring zu klein zu erkennen. */
.held .kraft{
  position:absolute;right:100%;top:50%;margin:-28px 10px 0 0;
  width:56px;height:56px;padding:0;
  display:grid;place-items:center;
  border-radius:50%;
  border:2.5px solid var(--ink);
  background:rgba(24,18,12,.35);
  box-shadow:0 0 0 2px var(--fc,var(--tan)),0 6px 12px -7px #000;
  cursor:pointer;z-index:6;overflow:visible;
  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
/* **Beim Gegner ebenfalls links.** Rechts neben seinem Bildnis liegt
   seine Manaleiste (top 32, left 556) — der Knopf lag genau darauf. Der
   eigene Held hat seine Leiste auf der anderen Seite, deshalb fiel es
   unten nicht auf. */
.held.gegner .kraft{right:100%;left:auto;margin:-28px 10px 0 0;}
/* Das Zeichen darf über den Ring hinausragen — es bleibt so groß wie
   zuvor, nur der Ring ist geschrumpft. */
.held .kraft .symbol{
  width:46px;height:46px;object-fit:contain;display:block;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.8));
}
/* Ein Symbol auf **hellem Grund**, wie eine Karte. Die dunkle Fassung
   ließ den Sternenblitz des Lichtordens verschwinden — Gold auf Braun
   ist kein Gegensatz. */
.held .kraft.hell{background:#f6f2e6;}
.held .kraft.hell .symbol{filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));}

/* Eine Fähigkeit ohne Symbol zeigt das Kartenbild — rund beschnitten,
   auf den Kopf des Motivs gezogen, wie das Bildnis daneben.

   **Kein `overflow:hidden` am Knopf.** Das beschnitt auch den
   Manastein, der bewusst über den Rand hinausragt: er saß dadurch
   halb im Kreis und wirkte hineingerutscht. Das Bild rundet sich über
   seinen eigenen `border-radius`, dafür braucht der Knopf nichts. */
/* Der Knopf ist ohnehin rund (`border-radius:50%`), also deckt das Bild
   ihn vollständig ab — der weiße Grund schaut nirgends hervor. */
/* **Das Bild füllt den Kreis genau.** Mit `width:100%` maß es die
   Inhaltsfläche und ragte über den Rahmen hinaus — Rekrut und Feuerball
   standen über den Ring. `inset:0` bindet es dagegen an den Rahmen
   selbst, und der Rundungsradius schneidet es sauber ab. */
.held .kraft.bildhaft{background:#fff;}
/* **Feste Maße, sonst nichts.** Drei Anläufe hat das gekostet:

   · `width:100%` maß die Inhaltsfläche und ließ das Bild über den
     Rahmen ragen.
   · `position:absolute;inset:0` sollte es an den Rahmen binden — wird
     `inset` aber nicht angewandt, stehen alle vier Seiten auf `auto`,
     und ein absolut gesetztes Bild nimmt dann seine **Eigengröße** an.
     Die Kartenbilder sind 680 x 978: sie füllten den halben Bildschirm.

   48 Punkte in einem Knopf mit 51 Punkten Inhaltsfläche. Keine
   Prozente, keine Verankerung, nichts, das von einer Berechnung
   abhängt. */
.held .kraft .fenster{
  width:48px;height:48px;border-radius:50%;overflow:hidden;display:block;
}
.held .kraft.bildhaft .symbol{
  width:100%;height:100%;
  object-fit:cover;object-position:50% 28%;
  filter:none;
  /* Zehn Prozent näher heran — der Gardist und die Flamme waren im Ring
     zu klein. Das Fenster darüber schneidet den Überstand ab. */
  transform:scale(1.12);transform-origin:50% 40%;
}
/* Der Manastein liegt **über** allem und wird von nichts beschnitten. */
.held .kraft .preis{z-index:3;}
/* Der Manapreis als Kristall — dasselbe Zeichen wie auf den Karten. */
.held .kraft .preis{
  position:absolute;bottom:-6px;right:-7px;
  width:21px;height:23px;display:grid;place-items:center;z-index:2;
}
.held .kraft .preis svg{
  position:absolute;inset:0;width:100%;height:100%;
  fill:var(--mana,#4aa3d8);stroke:var(--ink);stroke-width:2.8;
}
.held .kraft .preis b{
  position:relative;font-family:var(--display);font-size:12px;
  color:#fff;text-shadow:0 1px 2px #000;padding-top:.12em;
}

.held .kraft.bereit .symbol{animation:kraftAtmet 2.6s ease-in-out infinite;}
@keyframes kraftAtmet{
  0%,100%{opacity:.86;transform:scale(1);}
  50%    {opacity:1;transform:scale(1.06);}
}
.held .kraft.bildhaft.bereit .symbol{animation:none;}
.held .kraft.bereit{box-shadow:0 0 0 2px var(--fc,var(--tan)),
                               0 0 9px -1px rgba(255,226,140,.5),
                               0 6px 12px -7px #000;}
.held .kraft.bereit:hover{transform:translateY(-2px) scale(1.06);}
.held .kraft.bereit:active{transform:scale(.94);}
.held .kraft:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;}

/* ─── Verbraucht ist verbraucht, auf beiden Seiten ──────────────────
   Vorher hing das Ausgrauen an `aus`, und `aus` war beim Gegner
   **immer** gesetzt — anklickbar ist ja nur der eigene. Man sah seiner
   Fähigkeit deshalb nie an, ob sie noch zur Verfügung steht.

   Jetzt trennt es sich: `fertig` grau (benutzt), `aus` nur nicht
   anklickbar. Der Knopf des Gegners ist damit hell, solange er ihn noch
   hat, und grau, sobald er ihn gezogen hat. */
.held .kraft.aus{cursor:default;}
.held .kraft.fertig{filter:grayscale(.9) brightness(.45);}
/* Der eigene Knopf, wenn gerade nichts geht (kein Mana, nicht am Zug):
   etwas gedämpft, aber nicht so weit wie verbraucht. */
.held .kraft.gedaempft{filter:grayscale(.4) brightness(.75);}
.held .kraft.teuer .preis svg{fill:#a4403a;}

/* Beim Einsetzen ein Ring nach außen. */
.held .kraft.zuendet{animation:kraftZuendet .5s ease-out;}
@keyframes kraftZuendet{
  0%  {box-shadow:0 0 0 2px var(--fc,var(--tan)),0 0 0 0 rgba(255,226,140,.85);}
  100%{box-shadow:0 0 0 2px var(--fc,var(--tan)),0 0 0 20px rgba(255,226,140,0);}
}
/* Solange gezielt wird, bleibt der Knopf hervorgehoben — er ist der
   Ausgangspunkt des Pfeils. */
.held .kraft.zielt{
  box-shadow:0 0 0 2px var(--gold-hi),0 0 14px -2px rgba(255,226,140,.9);
}

@media (prefers-reduced-motion: reduce){
  .held .kraft.bereit .symbol{animation:none;opacity:1;}
  .held .kraft.zuendet{animation:none;}
}

/* ── Der Schattenpfeil ────────────────────────────────────────────────
   Das Geschoss der Schattenzirkel-Fähigkeit. Eine dunkle Spitze mit
   violettem Schweif, die auf derselben Bahn fliegt wie ein
   Fernkampfangriff — nur schneller und ohne Bogen, denn sie kommt aus
   der Hand des Helden und nicht von einer Sehne. */
.schattenpfeil{
  position:absolute;z-index:188;pointer-events:none;
  width:22px;height:8px;margin:-4px 0 0 -11px;
  border-radius:4px 60% 60% 4px / 4px 50% 50% 4px;
  background:linear-gradient(90deg,
    rgba(126,58,178,0) 0%,rgba(126,58,178,.85) 46%,#1d0d2b 100%);
  box-shadow:0 0 10px rgba(150,80,210,.8);
  animation:schattenFlug .3s cubic-bezier(.4,0,.8,1) forwards;
}
@keyframes schattenFlug{
  from{transform:translate(0,0) scale(.6);opacity:0;}
  20% {opacity:1;}
  to  {transform:translate(var(--zx,0),var(--zy,0)) scale(1);opacity:1;}
}
@media (prefers-reduced-motion: reduce){
  .schattenpfeil{animation:none;opacity:0;}
}


/* ── Im Treibsand versinken ───────────────────────────────────────────
   Der Diener sackt nach unten und wird dabei **an der Sandlinie
   abgeschnitten**. Vorher wurde er durchsichtig — das sah aus, als löse
   er sich auf, nicht als ginge er unter.

   `clip-path: inset(0 0 N% 0)` nimmt ihm von unten her immer mehr weg,
   während er sinkt. Der sichtbare Rest bleibt dabei voll deckend: genau
   das macht den Eindruck einer Oberfläche, hinter der etwas verschwindet.

   Ein leichtes Wanken kommt dazu — wer einsinkt, steht nicht still. */
.diener.versinkt{
  animation:versinken .62s cubic-bezier(.35,0,.7,1) forwards;
  transform-origin:50% 100%;
  pointer-events:none;
}
/* **Der Schnitt folgt der Absenkung.** Die Scheibe ist 92 Punkte hoch;
   sinkt sie um N Punkte, muss von unten N/92 weggeschnitten werden —
   nur dann bleibt die sichtbare Unterkante an **derselben Stelle**
   stehen, und genau das macht eine Oberfläche aus.

   Mein erster Entwurf hatte beides unabhängig gewählt: die Unterkante
   wanderte dabei nach oben, als würde der Diener nicht versinken,
   sondern schrumpfen. */
/* **Oben und seitlich Luft lassen.** `clip-path` beschneidet nicht nur
   den Kasten, sondern auch alles, was darüber hinausragt: Schatten, die
   Wertsteine, der Spottschild. Mit `inset(0 …)` sprang deshalb im
   Augenblick des Anlaufs die obere Kante des Bildnisses ab — sie sah
   plötzlich gerade abgeschnitten aus.

   Negative Werte vergrößern den Ausschnitt über den Kasten hinaus. Nur
   **unten** wird wirklich geschnitten, und genau darum geht es. */
@keyframes versinken{
  0%  {transform:translateY(0) rotate(0deg);
       clip-path:inset(-40px -40px 0% -40px);}
  25% {transform:translateY(12px) rotate(-2.5deg);
       clip-path:inset(-40px -40px 13% -40px);}
  50% {transform:translateY(30px) rotate(2deg);
       clip-path:inset(-40px -40px 33% -40px);}
  75% {transform:translateY(70px) rotate(-1.5deg);
       clip-path:inset(-40px -40px 76% -40px);}
  /* **Ganz weg, auch der Überstand.** Mit `100%` blieb ein Streifen
     von 40 Punkten über dem Kasten sichtbar — genau dort sitzen der
     obere Rand der Scheibe und das obere Drittel des Spottschilds. Der
     Schnitt muss den Überstand mitnehmen: `100% + 40px` schließt das
     Fenster vollständig. Die Absenkung geht entsprechend weiter, damit
     die Sandlinie bis zuletzt stehen bleibt. */
  100%{transform:translateY(132px) rotate(0deg);
       clip-path:inset(-40px -40px calc(100% + 40px) -40px);}
}
@media (prefers-reduced-motion: reduce){
  .diener.versinkt{animation:none;opacity:0;}
}

/* ── Die Wegweisung beim Bettler ──────────────────────────────────────
   Zwei Hinweise, die den ersten Zug erklären: wohin die Karte gehört
   und wie man den Zug beendet. Sie erscheinen **nur** in der allerersten
   Partie des Feldzugs (siehe js/tisch.js) und verschwinden, sobald der
   jeweilige Schritt getan ist.

   Sie liegen auf der Bühne, nicht im Fenster — die Bühne wird skaliert,
   und ein Hinweis in Fensterkoordinaten säße daneben. */
.wegweis{
  position:absolute;z-index:120;pointer-events:none;
  transform:translate(-50%,-50%);
  font-family:var(--display);font-size:17px;white-space:nowrap;
  color:#fff6d8;text-shadow:0 2px 0 #1c1208,0 0 12px rgba(0,0,0,.8);
  animation:wegweisAtmet 2.2s ease-in-out infinite;
}
@keyframes wegweisAtmet{
  0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1);}
  50%    {opacity:1;transform:translate(-50%,-50%) scale(1.04);}
}
/* Der zweite Hinweis sitzt über dem Knopf und zeigt mit einem Pfeil
   darauf — ohne ihn wäre unklar, was gemeint ist. */
.wegweis.zug::after{
  content:"▼";display:block;text-align:center;
  font-size:19px;line-height:1.1;margin-top:2px;
  color:#f7d878;
}
/* Solange die Karte fehlt, ist das Feld gestrichelt umrandet: es sagt
   ohne Worte, wohin. */
.reihe.zeigtWeg{
  box-shadow:inset 0 0 0 3px rgba(247,216,120,.75),
             inset 0 3px 12px rgba(0,0,0,.5);
  animation:wegweisFeld 2.2s ease-in-out infinite;
}
@keyframes wegweisFeld{
  0%,100%{box-shadow:inset 0 0 0 3px rgba(247,216,120,.5),inset 0 3px 12px rgba(0,0,0,.5);}
  50%    {box-shadow:inset 0 0 0 3px rgba(247,216,120,.95),inset 0 3px 12px rgba(0,0,0,.5);}
}
@media (prefers-reduced-motion: reduce){
  .wegweis,.reihe.zeigtWeg{animation:none;}
}