/* ══════════════════════════════════════════════════════════════════
   hand.css — Hände, Zeigerpfeil, schwebende Zahlen, Rundenbanner.
   Teil des Tisches; wird nach tisch.css geladen (siehe dort).
   ══════════════════════════════════════════════════════════════════ */

/* ─── 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;
  transition:top .22s cubic-bezier(.3,0,.25,1);}  /* beim Ein-/Ausfahren, siehe hand-offen */

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

   Dieselben Werkstoffe wie die übrigen Bedienelemente — Tusche, Holz,
   Goldkante —, aber flach und quer, sodass darunter alles sichtbar
   bleibt (die Kampfreihe, und dort zeigt auch der Wegweiser hin). Der
   Balken wächst aus der Mitte heraus und zieht sich dorthin zurück. */
/* **Eine Sprache für alle Ansagen im Kampf** (379, Wunsch Max):
   schwarzer Grund, keine Kontur — Rundenband und Hinweiszeile sahen
   vorher nach zwei verschiedenen Spielen aus und lagen obendrein
   übereinander (die Logik dagegen steht in js/tisch.js → hinweis). */
.runde{
  position:absolute;left:50%;top:176px;transform:translateX(-50%);
  z-index:195;pointer-events:none;opacity:0;
  padding:5px 18px;border-radius:5px;border:0;
  background:rgba(16,13,9,.92);
  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:180px;transform:translateX(-50%);
  z-index:185;pointer-events:none;white-space:nowrap;
  background:rgba(16,13,9,.92);border:0;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,top .18s;
}
.hinweis.an{opacity:1;}
/* Spricht gerade das Rundenband, rückt der Hinweis eine Zeile tiefer —
   zwei Ansagen, zwei Plätze, nichts verdeckt sich. */
.hinweis.tiefer{top:222px;}