/* ══════════════════════════════════════════════════════════════════
   zauber.css — Doom, Feuerball, Fallen, Verwirrung, Heldenfähigkeit,
   Schattenpfeil, Treibsand, Wegweisung. Nur im Duell geladen.
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   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;}
}

/* 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:#fff;}
.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 Manapreis als Kristall — dasselbe Zeichen wie auf den Karten.
   Er liegt **über** allem und wird von nichts beschnitten (z-index 3;
   eine eigene Regel davor sagte das schon und wurde hier gleich wieder
   auf 2 überschrieben). */
.held .kraft .preis{
  position:absolute;bottom:-6px;right:-7px;
  width:21px;height:23px;display:grid;place-items:center;z-index:3;
}
.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 ──────────────────
   `fertig` grau (benutzt), `aus` nur nicht anklickbar. Die beiden
   dürfen nicht zusammenfallen: `aus` ist beim Gegner **immer** gesetzt
   (anklickbar ist nur der eigene), und hinge das Grau daran, sähe man
   seiner Fähigkeit nie an, ob sie noch kommt. */
.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);
}

/* ─── Die Fähigkeit eines Dieners ist schon eine Medaille ────────────
   Ihr Bild (`assets/kraefte/…`) bringt Ring und hellen Grund selbst mit.
   Im Knopf mit eigenem Rand und Ring stand sie wie ein Kreis im Kreis;
   jetzt füllt sie den Knopf, ohne Rand, ohne Fraktionsring — drumherum
   nur Luft. Bereit, Zielen und Zünden leuchten als weicher Schein. */
.held .kraft.medaille{border:0;background:none;box-shadow:none;}
.held .kraft.medaille .symbol{width:56px;height:56px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.55));}
.held .kraft.medaille.bereit{box-shadow:0 0 12px 1px rgba(255,226,140,.55);}
.held .kraft.medaille.zielt{box-shadow:0 0 16px 2px rgba(255,226,140,.9);}
.held .kraft.medaille.zuendet{animation:medailleZuendet .5s ease-out;}
@keyframes medailleZuendet{
  0%  {box-shadow:0 0 0 0 rgba(255,226,140,.85);}
  100%{box-shadow:0 0 0 20px rgba(255,226,140,0);}
}

/* ─── Die Erklärung am Knopf ─────────────────────────────────────────
   Dunkle Tafel wie jede Überlagerung (DESIGN.md → Tafeln). Sie steht
   mittig über dem Knopf, beim Gegner darunter; mit der Maus sofort, auf
   dem Telefon beim Halten (js/zeiger.js → kraftTipp). */
.krafttipp{
  position:absolute;z-index:70;width:230px;
  padding:10px 12px 9px;border-radius:var(--rund-3,14px);pointer-events:none;
  background:linear-gradient(rgba(36,26,16,.96),rgba(19,13,8,.98));
  border:1px solid rgba(224,179,82,.35);box-shadow:0 10px 24px -8px #000;
  display:flex;flex-direction:column;gap:3px;text-align:left;
  animation:krafttippAuf .14s ease-out;
}
.krafttipp.oben{transform:translate(-50%,calc(-100% - 38px));}
.krafttipp.unten{transform:translate(-50%,38px);}
.krafttipp b{font-family:var(--display);font-weight:400;font-size:17px;color:var(--parch-hi);padding-top:.15em;}
.krafttipp span{font-family:var(--ui);font-size:13px;line-height:1.35;color:#eadfc4;}
.krafttipp em{font-family:var(--ui);font-style:normal;font-size:11px;letter-spacing:.06em;color:var(--mana-hi,#8fe2ff);}
@keyframes krafttippAuf{from{opacity:0;}to{opacity:1;}}

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

/* ── Im Treibsand versinken ───────────────────────────────────────────
   Der Diener sackt nach unten und wird dabei **an der Sandlinie
   abgeschnitten** — durchsichtig werden sähe nach Auflösen aus, nicht
   nach Untergehen.

   `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;}
}