/* ══════════════════════════════════════════════════════════════════
   kampf.css — Kartenauftritt, ausgefahrene Hand, Kampfschrei,
   Beschwörung, Heilung, zerspringender Schild, Sterben.
   Teil des Tisches; nur im Duell geladen.
   ══════════════════════════════════════════════════════════════════ */

/* ─── 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. */
.buehne.hand-offen .hand.eigen{top:290px;}

/* **Ausgeklappt liegt die Hand über den eigenen Geheimnissen.** Die
   Siegel stehen sonst hoch (70), damit sie über Bildnis (5) und Reihe (2)
   sichtbar bleiben — die Hand steht bei 20 und rückt beim Ausklappen
   genau über den eigenen Helden. Dort lagen die Siegel dann auf den
   Karten, die man gerade ausspielen will.

   Gesenkt werden nur die eigenen Siegel und nur, solange die Hand offen
   ist: 15 liegt weiterhin über Bildnis und Reihe, aber unter der Hand.
   Die Hand selbst bleibt, wo sie ist — ihr Verhältnis zu Angriffsreihe,
   Zielpfeil und Einblendungen ändert sich nicht. */
.buehne.hand-offen > .geheimnisse.eigen{z-index:15;}

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

/* 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 ─────────────────────────────
   Nur das Wort „Schild!" übersieht man leicht — dass gerade der Schutz
   gefallen ist, soll man sehen. */
.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);
}

/* ─── Die Schildblase geht aus ────────────────────────────────────────
   Sie verschwand schlagartig (`display:none`), und das war das ganze
   Bild — ein 88 Punkte großer Gegenstand war plötzlich weg, während in
   der Mitte sechs winzige Scherben aufblitzten.

   Jetzt blendet sie aus: ein Fünftel einer Sekunde, ein Hauch heller,
   ein Hauch weiter. **Mehr nicht.** Ein Zwischenstand ließ sie mit
   zwölf Scherben und einem Stoßring bersten; das war zu viel für einen
   Augenblick, der sich in jeder Partie mehrfach wiederholt. Die
   Scherben selbst bleiben die alten (`.scherben`, weiter oben). */
.schildbruch{
  position:absolute;left:2px;top:-3px;width:88px;height:88px;
  pointer-events:none;z-index:24;transform:translateZ(20px);
}
.schildbruch .huelle{
  position:absolute;inset:0;border-radius:50%;
  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);
  animation:huelleAus .2s ease-out forwards;
}
@keyframes huelleAus{
  0%  {transform:scale(1);opacity:1;filter:brightness(1);}
  30% {filter:brightness(1.35);}
  100%{transform:scale(1.04);opacity:0;filter:brightness(1);}
}
@media (prefers-reduced-motion:reduce){
  .schildbruch .huelle{animation-duration:.3s;}
}

/* ─── Ein zerbrechendes Siegel ────────────────────────────────────────
   Der Kern nimmt die Geheimnisse aus dem Zustand, der Tisch zeichnet die
   Reihe neu, und **erst danach** spielt die Abfolge ihr Bild ab. Die
   Karte gibt es dann nicht mehr, wohl aber die Reihe. Hier steht der
   Ersatz: ein Siegel, das genau so aussieht wie das eben verschwundene
   und vor den Augen des Spielers zerbricht.

   Zwei Hälften kippen auseinander, Splitter fliegen. Das Wachssiegel
   ist das Bild, das der Spieler kennt — wenn es bricht, versteht er
   ohne Wort, dass die Falle weg ist. Ein bloßes Ausblenden sagte nur,
   dass etwas fehlt.

   Lage und Maße stimmen mit `.geheimnisse .siegel` überein (siehe
   css/fenster.css): derselbe Versatz um −14 Punkte, und die
   Verschiebung auf den Bogen setzt js/abfolge.js — dieselbe Rechnung
   wie dort, wo die Siegel gesetzt werden. */
/* Der Halter hängt an der **Bühne**, nicht in der Geheimnisreihe: die
   Reihe baut der Tisch neu, sobald ihre Kinder nicht zur Zahl der
   Geheimnisse passen, und nähme den Bruch dabei mit. Über der Reihe
   (70), damit die Splitter nicht hinter Nachbarsiegeln verschwinden. */
.buehne > .siegelbruchhalter{
  position:absolute;width:0;height:0;z-index:72;pointer-events:none;
}
.siegelbruch{
  position:absolute;left:-14px;top:-14px;
  width:28px;height:28px;pointer-events:none;z-index:6;
}
/* Die beiden Hälften: dieselbe Farbe und derselbe Rand wie `.siegel`,
   je zur Hälfte beschnitten. */
.siegelbruch u{
  position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(#b0703c,#7a4520);
  border:2.5px solid var(--ink);box-sizing:border-box;
  box-shadow:0 0 0 1.5px var(--gold);
}
.siegelbruch u.links {clip-path:polygon(0 0,52% 0,46% 100%,0 100%);
  animation:siegelhaelfte .42s ease-in var(--vz,0s) forwards;--kipp:-38deg;--weg:-13px;}
.siegelbruch u.rechts{clip-path:polygon(52% 0,100% 0,100% 100%,46% 100%);
  animation:siegelhaelfte .42s ease-in var(--vz,0s) forwards;--kipp:34deg;--weg:13px;}
@keyframes siegelhaelfte{
  /* Erst ein kurzer Ruck nach oben — der Bruch beginnt —, dann fallen
     die Hälften auseinander und kippen weg. */
  0%  {transform:translate(0,0) rotate(0);opacity:1;}
  18% {transform:translate(0,-2px) rotate(0);opacity:1;}
  100%{transform:translate(var(--weg),9px) rotate(var(--kipp));opacity:0;}
}
.siegelbruch i{
  position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;
  background:linear-gradient(140deg,#fff2c8,var(--gold) 55%,var(--gold-dk));
  clip-path:polygon(50% 0,100% 62%,22% 100%);
  animation:siegelsplitter .46s ease-out var(--vz,0s) forwards;
}
.siegelbruch i:nth-child(3){--rx:-16px;--ry:-14px;}
.siegelbruch i:nth-child(4){--rx: 18px;--ry:-11px;}
.siegelbruch i:nth-child(5){--rx: 19px;--ry:  9px;}
.siegelbruch i:nth-child(6){--rx:  3px;--ry: 20px;}
.siegelbruch i:nth-child(7){--rx:-18px;--ry: 11px;}
.siegelbruch i:nth-child(8){--rx: -5px;--ry:-20px;}
@keyframes siegelsplitter{
  0%  {transform:translate(0,0) rotate(0) scale(.4);opacity:0;}
  15% {opacity:1;}
  100%{transform:translate(var(--rx),var(--ry)) rotate(200deg) scale(1);opacity:0;}
}
/* Ruhige Bewegung: die Hälften bleiben, die Splitter nicht — es soll
   erkennbar bleiben, dass dort etwas zerbrochen ist. */
@media (prefers-reduced-motion:reduce){
  .siegelbruch i{display:none;}
  .siegelbruch u{animation:siegelStill .3s ease-out var(--vz,0s) forwards;}
  @keyframes siegelStill{to{opacity:0;}}
}

/* ══════════════════════════════════════════════════════════════════
   Tarnung — der Diener wird zu Glas

   Nur die Scheibe, nicht die Werte-Steine: Angriff und Leben bleiben
   lesbar, auch für den Gegner. Er sieht den Diener — er kann ihn nur
   nicht anvisieren. Drei Schichten tragen das Bild:
     die Scheibe selbst   halb durchsichtig, entsättigt, leicht flirrend
     ein Lichtstreif      wandert langsam schräg darüber, wie über Glas
     ein goldener Saum    ein Anklang an den Ring, der ihn verbarg
   ══════════════════════════════════════════════════════════════════ */
.diener.tarnung .scheibe{
  opacity:.5;filter:saturate(.35) brightness(1.18) contrast(.92);
  box-shadow:0 0 0 1.5px rgba(255,226,140,.45),0 0 14px rgba(255,226,140,.28);
  animation:tarnFlirren 3.4s ease-in-out infinite;
}
.diener.tarnung .scheibe::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.55) 48%,
             rgba(255,248,220,.18) 55%,transparent 66%);
  background-size:260% 100%;
  animation:tarnStreif 2.9s linear infinite;
}
@keyframes tarnFlirren{
  0%,100%{opacity:.46;}
  50%    {opacity:.6;}
}
@keyframes tarnStreif{
  from{background-position:130% 0;}
  to  {background-position:-130% 0;}
}

/* Verschwinden: ein goldener Ring zieht sich um den Diener zusammen,
   und er verblasst dabei ins Glas. Ring und Blitz sind eigene, kurzlebige
   Elemente (js/abfolge.js) und keine Pseudoelemente des Dieners — die
   sind teils schon vergeben, und ein Spott-Rahmen verschwände sonst für
   die Dauer der Bewegung. */
.diener.verschwindet .scheibe{animation:tarnWeg .52s ease-in forwards;}
.diener > .tarnring{
  content:"";position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;
  border-radius:50%;pointer-events:none;z-index:5;
  border:3px solid rgba(255,214,110,.95);
  box-shadow:0 0 14px rgba(255,200,80,.8),inset 0 0 10px rgba(255,220,120,.6);
  transform:translate(-50%,-50%) scale(1.25);opacity:0;
  animation:ringZieht .52s cubic-bezier(.5,0,.7,1) forwards;
}
@keyframes tarnWeg{
  0%  {opacity:1;filter:none;}
  60% {filter:brightness(1.6) saturate(.6);}
  100%{opacity:.5;filter:saturate(.35) brightness(1.18);}
}
@keyframes ringZieht{
  0%  {opacity:0;transform:translate(-50%,-50%) scale(1.25);}
  25% {opacity:1;}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.55);}
}

/* Enttarnt: das Glas zerspringt — ein heller Blitz, ein kurzes Aufblähen,
   und er steht wieder voll da, bevor er zuschlägt. */
.diener.enttarnt .scheibe{animation:glasBricht .3s ease-out;}
.diener > .glasblitz{
  content:"";position:absolute;left:50%;top:50%;width:130%;aspect-ratio:1;
  border-radius:50%;pointer-events:none;z-index:5;
  background:radial-gradient(circle,rgba(255,255,255,.9) 0%,rgba(255,236,170,.5) 35%,transparent 70%);
  transform:translate(-50%,-50%) scale(.6);
  animation:glasBlitz .3s ease-out forwards;
}
@keyframes glasBricht{
  0%  {opacity:.5;transform:translateZ(6px) scale(1);filter:brightness(2.2);}
  45% {opacity:1;transform:translateZ(6px) scale(1.12);}
  100%{opacity:1;transform:translateZ(6px) scale(1);filter:none;}
}
@keyframes glasBlitz{
  0%  {opacity:1;transform:translate(-50%,-50%) scale(.6);}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.5);}
}

/* ─── Zurück auf die Hand ─────────────────────────────────────────────
   Anheben, schrumpfen, zur Hand des Besitzers fliegen (`--flug`: nach
   unten zur eigenen, nach oben zur fremden). */
.diener.zurueck{animation:zurHand .54s cubic-bezier(.45,-.2,.7,1) forwards;
  z-index:60;pointer-events:none;}
@keyframes zurHand{
  0%  {transform:translate(0,0) scale(1) rotate(0);opacity:1;}
  30% {transform:translate(0,calc(var(--flug) * -.12)) scale(1.08) rotate(-4deg);opacity:1;}
  100%{transform:translate(0,var(--flug)) scale(.35) rotate(8deg);opacity:0;}
}
/* Hand voll: er zerfällt an Ort und Stelle zu Asche. */
.diener.zerfaellt{animation:zuAsche .62s ease-in forwards;pointer-events:none;}
@keyframes zuAsche{
  0%  {filter:none;opacity:1;transform:scale(1);}
  40% {filter:brightness(1.8) sepia(1) saturate(3) hue-rotate(-20deg);}
  100%{filter:grayscale(1) brightness(.4) blur(2px);opacity:0;transform:scale(.9) translateY(6px);}
}

@media (prefers-reduced-motion:reduce){
  .diener.tarnung .scheibe,.diener.tarnung .scheibe::after{animation:none;}
}

/* ─── Sporen (Pilz) ───────────────────────────────────────────────────
   Die Wirkung des Pilzes trugen bisher allein die Funken — wer „sanfte
   Bewegungen“ eingeschaltet hatte, sah nichts. Diese zwei Elemente
   tragen sie sichtbar: eine Wolke, die über der Reihe aufgeht und
   absinkt, und ein grüner Hauch auf jedem Getroffenen. */
#geister .sporenwolke{position:absolute;width:var(--b,260px);height:120px;margin:-60px 0 0 calc(var(--b,260px) / -2);
  pointer-events:none;border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,rgba(214,255,150,.55),rgba(142,210,84,.38) 45%,rgba(120,180,70,0) 75%);
  filter:blur(2px);animation:sporenwolke .95s ease-out forwards;}
@keyframes sporenwolke{
  0%  {opacity:0;transform:scale(.45) translateY(14px);}
  28% {opacity:1;transform:scale(1.04) translateY(0);}
  100%{opacity:0;transform:scale(1.14) translateY(-16px);}
}
#geister .sporenhauch{position:absolute;width:74px;height:74px;margin:-37px 0 0 -37px;pointer-events:none;
  border-radius:50%;background:radial-gradient(circle,rgba(232,255,176,.9),rgba(142,210,84,.5) 50%,rgba(120,180,70,0) 72%);
  animation:sporenhauch .6s ease-out forwards;}
@keyframes sporenhauch{
  0%  {opacity:0;transform:scale(.4);}
  25% {opacity:1;transform:scale(1);}
  100%{opacity:0;transform:scale(1.5);}
}
@media (prefers-reduced-motion:reduce){
  #geister .sporenwolke,#geister .sporenhauch{animation-duration:.5s;filter:none;}
}