/* ══════════════════════════════════════════════════════════════════
   tisch.css — Der Spieltisch: Grundgerüst.

   Eine einzige Anordnung für alle Geräte: eine feste Bühne von
   1000 × 490 Punkten, die per zoom auf den Bildschirm gebracht wird
   (js/buehne.js). 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.

   Der Tisch ist in sechs Stilblätter geteilt; die Reihenfolge im
   Dokument ist die Kaskade und muss bleiben:
     tisch.css     Bühne, Reihen, Diener, Helden, Mana, Stapel, Zugtaste
     hand.css      Hände, Zeigerpfeil, schwebende Zahlen, Rundenbanner
     fenster.css   Schleier, Austausch, Regeln, Logbuch, Zurufe, Geheimnisse
     kampf.css     Kartenauftritt, Kampfschrei, Beschwörung, Sterben
     waffen.css    Angriffsbewegungen je Waffenart
     zauber.css    Doom, Feuerball, Fallen, Heldenfähigkeit, Wegweisung
   Menü, Landkarte und Kompendium laden nur tisch.css und fenster.css.
   ══════════════════════════════════════════════════════════════════ */

/* 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: ein gemalter Tavernentisch (assets/tisch.webp, Canva,
   Bildstil DESIGN.md → 10). Das Bild trägt keine Bedienelemente — Reihen
   und Knöpfe liegen darüber. Die Mitte ist
   ruhig gehalten, Krug, Kerze, Würfel und Serviette liegen am Rand —
   etwas vergrößert, damit sie nur hereinragen: die Ecken
   gehören den Knöpfen und Händen.
   Ein Schleier zur Mitte hin dunkelt die Ränder etwas ab, damit Karten
   und Helden vorn stehen. Nur das Duell (`.taverne`): Menü und Karte
   decken den Tisch mit eigenen Bildern zu und sollen es nicht laden. */
.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.taverne{
  background:
    radial-gradient(70% 70% at 50% 46%,rgba(20,14,8,0) 55%,rgba(20,14,8,.42) 100%),
    url(../assets/tisch.webp) center/116% auto no-repeat,
    #3a2616;
}

/* Eingabesperre während laufender Animationen */
.buehne.gesperrt .hand,
.buehne.gesperrt .reihe,
.buehne.gesperrt .zugtaste{pointer-events:none;}
/* Gegner am Zug: die eigene Hand tritt zurück. Deckkraft statt
   `filter`: der Gegnerzug ist genau die Zeit, in der auf dem Tisch am
   meisten Bewegung ist, und ein Filter über der ganzen Hand würde bei
   jedem Bild mitgerechnet. */
.buehne.wartet .hand.eigen{opacity:.72;}

/* ─── 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;
  /* Über dem Bildnis (Schicht 5): die Schildspitze eines Spötters
     reicht bis 335, das Bildnis beginnt bei 322 — sonst fehlten
     dreizehn Punkte Spitze. Siehe den Absatz zum Schild weiter unten. */
  z-index:6;}
.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 ───────────────────────────────────────────────────── */
/* ─── Schatten als Bild ─────────────────────────────────────────────
   Scheibe, Steine, Marken, Wappen und Heldenbildnis tragen keinen
   `box-shadow` mit Weichzeichner und kein `filter:drop-shadow` mehr.
   Vierzehn Diener hatten zusammen über sechzig Weichzeichner, die der
   Browser bei jeder Bewegung neu rechnete — auf einem alten Telefon
   der spürbarste Posten beim Ausspielen und Angreifen. Jetzt liegt je
   Form ein einmal gemaltes Bild darunter (assets/schatten-*.webp,
   erzeugt von entwicklung/schatten_bilder.py): dekodiert wird es
   einmal, danach nur verschoben. Harte Ringe (`0 0 0 2px`) bleiben,
   sie kosten keinen Weichzeichner. dokumente/ENTSCHEIDUNGEN.md → Schatten als Bild. */
.diener{
  position:relative;width:92px;height:92px;flex:0 0 auto;
  perspective:520px;cursor:grab;
  transition:transform .16s ease-out;
}
/* `perspective` macht den Diener zur Stapelebene: z-index:-1 legt den
   Schatten unter alle Kinder, aber über die Tischplatte. Das Bild ist
   120 × 128, die Scheibe sitzt darin bei (19, 23). */
.diener::after{
  content:"";position:absolute;left:-14px;top:-23px;width:120px;height:128px;
  background:url(../assets/schatten-scheibe.webp) 0 0 / 100% 100% no-repeat;
  pointer-events:none;z-index:-1;
}
.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);
  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;}
/* Der Stein ist durch `transform` eine eigene Stapelebene; sein Schatten
   (40 × 44, Stein bei 4,5/4) liegt darin ganz unten. */
.diener .stein::before{
  content:"";position:absolute;left:-4.5px;top:-4px;width:40px;height:44px;
  background:url(../assets/schatten-stein.webp) 0 0 / 100% 100% no-repeat;
  z-index:-1;pointer-events:none;
}
.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);}
/* Erschöpft: nur das Bildnis wird entfärbt, nicht der ganze Diener. Ein
   Filter auf dem Diener selbst würde bei jeder Bewegung (Angriff,
   Nachrücken) neu gerechnet; auf dem stillstehenden Bild wird er einmal
   gerastert. Steine und Marken bleiben deshalb farbig. */
.diener.ruht{cursor:default;}
.diener.ruht .scheibe img{filter:grayscale(.75) brightness(.72);}
/* **Auch der Ring wird grau** (379, Wunsch Max): nur das stumpfe
   Bildnis war zu leise — man sah nicht sicher, wer schon angegriffen
   hat. Der helle Zierring (sonst Pergament) kippt ins Aschgraue. */
.diener.ruht .scheibe{box-shadow:0 0 0 2px #8e897d;border-color:#3a3a3a;}
/* 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);
  /* Zwei Schichten: oben das Wappen, darunter sein gemalter Schatten
     (140 × 150, das Wappen liegt darin bei 4/4). */
  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,
    url(../assets/schatten-schild.webp) -4px -4px / 140px 150px no-repeat;
}

/* **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 (`z-index:6` bei `.reihe.eigen`, oben). Für die gegnerische
   Reihe ändert sich nichts: dort zeigt die Spitze vom Bildnis weg. */

/* 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;}
/* Ein Schatten für alle drei Marken (32 × 34, Marke bei 5/6). */
.diener .giftmarke::before,.diener .fernmarke::before,.diener .roechelmarke::before{
  content:"";position:absolute;left:-5px;top:-6px;width:32px;height:34px;
  background:url(../assets/schatten-marke.webp) 0 0 / 100% 100% no-repeat;
  z-index:-1;pointer-events:none;
}
.diener .giftmarke svg{width:100%;height:100%;}

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

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

/* 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. */
/* Der Schild hat **keinen** eigenen Ring: Gold heißt „bereit“, und nur
   das. Die Blase leuchtet perlweiß; ist ein beschildeter Diener bereit,
   reicht sein Goldschein über die Blase hinaus, hat er angegriffen,
   wird die Blase blasser. (dokumente/ENTSCHEIDUNGEN.md → Goldschild und
   Bereitschaft) */
.diener.bereit.schild .scheibe{box-shadow:0 0 0 7px var(--gold-hi),0 0 24px 2px var(--gold);}
.diener.schild.ruht .blase-schild{opacity:.38;animation:none;filter:grayscale(.5);}
/* Dasselbe für den Spott-Schild hinter dem Diener: wer ruht, droht nicht. */
.diener.spott.ruht::before{filter:grayscale(.75) brightness(.85);}
.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 10px -2px rgba(255,255,255,.75);
  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));
  transform:translateZ(8px);
}
/* Schatten als Bild, wie beim Diener (120 × 130, Bildnis bei 23/28). */
.held::after{
  content:"";position:absolute;left:-23px;top:-28px;width:120px;height:130px;
  background:url(../assets/schatten-portrait.webp) 0 0 / 100% 100% no-repeat;
  pointer-events:none;z-index:-1;
}
.held .portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 26%;
  transform:scale(1.3);display:block;}
/* **Das Gesicht vom Barbier** (seit 354) ist kein Kartenbild: es zeigt
   Kopf und Schultern auf Weiß. Statt es wie eine Karte heranzuholen
   (das Gesicht füllte 90 % der Scheibe), steht es etwa halb so groß in
   der Mitte — oben Luft, unten die Schultern. */
/* Seit 361: herangezoomt, bis kein Weiß mehr unter der Kleidung steht —
   nichts gefüllt, nichts abgeschnitten außer vom Rund selbst. Das Bild
   (680 × 978) trägt Inhalt von 17 % bis 81 % seiner Höhe; in voller
   Breite und um 16 % des Runds nach oben gesetzt, endet die Kleidung
   genau am unteren Rand, über dem Haar bleibt knapp ein Zehntel Luft. */
.held .portrait img[data-gesicht]{width:100%;height:auto;margin:-16% 0 0;object-fit:initial;transform:none;}
.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);}
.held .lebensstein::before{
  content:"";position:absolute;left:-4px;top:-4px;width:36px;height:40px;
  background:url(../assets/schatten-stein.webp) 0 0 / 100% 100% no-repeat;
  z-index:-1;pointer-events:none;
}
.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;cursor:default;
  background:url('../assets/mana.webp?v=387') center/contain no-repeat;
  filter:grayscale(1) brightness(.42);}
/* Nur volle Kristalle laden zum Antippen ein (siehe kugelWabert). */
.manaleiste i.voll{cursor:pointer;
  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 — dieselbe Bewegung wie überall, wo
   Mana auftaucht. Schlüsselbilder und ihre Herleitung stehen in
   css/ui.css (MANA). */
.manaleiste i.getippt{animation:kugelWabert 1.56s linear;}
@media (prefers-reduced-motion:reduce){
  .manaleiste i.getippt{animation:none;}
}

/* ─── Deckstapel ───────────────────────────────────────────────── */
/* ─── Nachziehstapel ──────────────────────────────────────────────
   Der Stapel trägt dasselbe Motiv wie jeder verdeckte Kartenrücken —
   so sieht er nach einem Stoß Karten aus, nicht nach einem Bedienelement.
   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=387") 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;
  cursor:grab;   /* beide Stapel lassen sich anfassen — Spielerei in js/tisch.js */
}
.stapel:active{cursor:grabbing;}
.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;}

/* ─── 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 — läge
     die Taste darunter, deckte der dunkle Kasten ihre linke Kante.
     Bedienelemente gehören immer nach vorn. */
  width:104px;height:88px;z-index:44;
  /* Als Raster zentriert, mit erhaltenem Zeilenumbruch. */
  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);}
.qualitaetsregler b{font-weight:700;color:var(--gold-hi,#ffd76a);}
/* Konto (js/konto.js): Stand, Name und Passwort, zwei Knöpfe. */
.kontofeld{display:flex;flex-direction:column;gap:7px;width:100%;padding-top:10px;
  border-top:1px solid rgba(232,190,110,.3);color:var(--parch);}
.kontostand{margin:0;font-size:12.5px;color:var(--tan);max-width:300px;text-align:left;}
.kontoformular{display:flex;flex-direction:column;gap:5px;}
.kontoformular .kontoknoepfe{margin-top:2px;}
.kontoformular[hidden]{display:none;}
.kontoformular input{width:260px;padding:4px 9px;border-radius:6px;border:2px solid var(--ink);font:inherit;font-size:14px;
  background:var(--parch);color:var(--ink);}
.kontoknoepfe{display:flex;gap:8px;flex-wrap:wrap;}
.kontofeld .knopf{min-height:34px;padding:.2em 12px 0;font-size:14px;}
.kontofeld .knopf[hidden]{display:none;}
.kontofehler{margin:0;font-size:13px;color:#f08a74;max-width:300px;}
/* Der Löschknopf trägt Warnrot (382): endgültig ist endgültig. */
.kontoknoepfe .knopf.resetweg{background:linear-gradient(180deg,#a3362a,#7c2219);border-color:#4a120c;color:#ffe9e2;}
.kontostand b{color:var(--gold,#e9c46a);font-weight:600;}
.kontowechsel{background:none;border:0;padding:0 2px;margin:0;font:inherit;font-size:13px;color:var(--tan);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;align-self:center;}
.kontowechsel:hover{color:#fff;}
.kontofeld .knopf.nebenknopf{opacity:.85;}
.kontofeld .knopf[disabled]{opacity:.5;cursor:default;}

/* ─── Rüstung am Helden ─────────────────────────────────────────────
   Ein Wappenschild **über** dem Lebensstein, leicht nach innen versetzt.
   Übereinander, nicht nebeneinander: so liest sich beides als **ein**
   Anzeiger — oben der Schutz, darunter das Leben, und Schaden frisst
   sich von oben nach unten durch. Nebeneinander sahen es zwei getrennte
   Zahlen, zwischen denen man erst einen Zusammenhang herstellen muss.

   Der Versatz nach links (`right:-2px` gegen `-8px` beim Leben) hält
   die Schildspitze über der Mitte des Herzens; genau bündig wirkte der
   schmalere Schild nach rechts gerutscht.

   Er erscheint nur, wenn Rüstung da ist; ein ständig sichtbares „0"
   wäre ein Versprechen, das die meisten Partien nie einlösen.

   Stahlblau statt Gold: Gold trägt hier schon der Göttliche Schild und
   die Heldenfähigkeit. Zwei Dinge in derselben Farbe, die Verschiedenes
   bedeuten, sind eine Falle. */
.held .ruestungsstein{
  position:absolute;right:-2px;bottom:25px;width:24px;height:27px;
  display:none;place-items:center;transform:translateZ(16px);
  overflow:visible;
  animation:ruestungAuf .32s cubic-bezier(.2,.9,.3,1.5);
}
.held .ruestungsstein.an{display:grid;}
.held .ruestungsstein svg{position:absolute;inset:0;width:100%;height:100%;
  overflow:visible;stroke:var(--ink);stroke-width:3.6;stroke-linejoin:round;
  fill:url(#stahlVerlauf);
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.65));}
.held .ruestungsstein span{position:relative;z-index:2;transform:translateY(-4%);
  font-family:var(--display);font-size:15px;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);}
@keyframes ruestungAuf{
  0%  {transform:translateZ(16px) scale(.3);opacity:0;}
  100%{transform:translateZ(16px) scale(1);opacity:1;}
}
@media (prefers-reduced-motion:reduce){
  .held .ruestungsstein{animation:none;}
}

/* ─── Der Held im Vorstoß ─────────────────────────────────────────────
   `.held` liegt auf Schicht 5, die Kampfreihen darüber: ein Vorstoß
   verschwand unter dem Brett. Für die Dauer des Schlags hebt ihn
   `stoesst` darüber — und bewegt wird ohnehin nur sein Bildnis
   (js/bewegungen.js, `schlagZeigen`). */
.held.stoesst{z-index:80;}
.held .portrait{will-change:transform;}

/* ─── Taverne: das gemalte Brett des Duells ─────────────────────────
   Tisch, Reihen, Zugschild, Handtaste und Medaillen sind Grafiken aus einem Guss
   (Canva, assets/tisch/, Bildstil DESIGN.md → 10): Eichenholz, Eisen,
   cremefarbene Zeichen und darum eine dicke Tuschekontur
   (entwicklung/tisch_grafik.py). Schlicht sind nur die Fenster, die sie
   öffnen (css/fenster.css → Schlichte Fenster). Die Grafiken tragen keine
   Schrift — „Zug beenden“ steht als Text auf dem Schild (Übersetzungen,
   Zustände). Hand, Mana, Helden und Heldenfähigkeiten bleiben, wie sie
   sind. Nur `.taverne` (duell.html): der Zusammenschnitt der Autokämpfe
   nutzt dieselben Reihen ohne Bild.

   Maße: die Reihen sind 716 breit (142–858) — genau sieben Diener mit
   ihren Abständen — und lassen rechts Platz für das Schild (866–990).
   Zwischen den Reihen liegen 32 Punkte Tisch. */
html:has(.tisch.taverne),html:has(.tisch.taverne) body{
  background:linear-gradient(rgba(12,8,5,.8),rgba(12,8,5,.8)),
    url(../assets/tisch.webp) center/cover no-repeat,#0d0a07;}

.taverne .reihe{left:142px;right:142px;height:100px;
  background:url(../assets/tisch/reihe.webp) 0 0 / 100% 100% no-repeat;
  border-radius:10px;box-shadow:none;}
.taverne .reihe.gegner{top:80px;}
.taverne .reihe.eigen{top:212px;}
/* Hervorhebung als Schicht über dem Bild, unter den Dienern (die Reihe
   ist eine eigene Stapelebene, -1 liegt also über ihrem Hintergrund). */
.taverne .reihe.eigen.aktiv{background:url(../assets/tisch/reihe.webp) 0 0 / 100% 100% no-repeat;box-shadow:none;}
.taverne .reihe.eigen.aktiv::before{
  content:"";position:absolute;inset:6px 8px;border-radius:6px;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 50%,rgba(224,179,82,.3),rgba(224,179,82,0) 75%);
  box-shadow:inset 0 0 0 3px rgba(224,179,82,.75);}
.taverne .reihe:empty::after{color:var(--parch);opacity:.4;}

/* Zwischen den Reihen bleibt nur Tisch: die Zierleiste (CI.knot) wird
   gebaut, aber nicht gezeigt — Wunsch Max, 375. */
.taverne .mittellinie{display:none;}

/* Zug beenden: das Holzschild. Das Bild liegt in ::before, damit
   „wartend“ nur das Holz dunkelt und die Schrift lesbar bleibt. */
.taverne .zugtaste{right:10px;top:150px;width:124px;height:91px;
  border:0;border-radius:0;background:none;box-shadow:none;isolation:isolate;overflow:visible;
  padding:0 0 1px;font-size:17px;line-height:1.04;color:#fff4d8;
  text-shadow:-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 3px 2px rgba(0,0,0,.6);}
.taverne .zugtaste::before{content:"";position:absolute;inset:0;z-index:-1;
  background:url(../assets/tisch/zugschild.webp) center/100% 100% no-repeat;
  filter:drop-shadow(0 3px 0 rgba(20,16,11,.9));transition:filter .16s;}
.taverne .zugtaste:hover::before{filter:drop-shadow(0 4px 0 rgba(20,16,11,.9)) brightness(1.08);}
.taverne .zugtaste:active{transform:translateY(3px);box-shadow:none;}
.taverne .zugtaste:active::before{filter:drop-shadow(0 1px 0 rgba(20,16,11,.9));}
.taverne .zugtaste.wartend{background:none;box-shadow:none;color:#d9cdb8;}
.taverne .zugtaste.wartend::before{filter:drop-shadow(0 4px 0 rgba(20,16,11,.9)) grayscale(.55) brightness(.58);}
.taverne .zugtaste.wartend::after{bottom:13px;}

/* Runde Knöpfe: je eine Eichenmedaille mit eigenem Zeichen (Bogen wie
   das Zugschild, mit Tuschekontur). */
.taverne .zahnrad{width:44px;height:44px;border:0;border-radius:50%;
  background:center/100% 100% no-repeat;box-shadow:none;
  filter:drop-shadow(0 3px 0 rgba(20,16,11,.85));}
.taverne .zahnrad svg{display:none;}
.taverne .zahnrad:hover{filter:drop-shadow(0 3px 0 rgba(20,16,11,.85)) brightness(1.12);}
.taverne .zahnrad:active{transform:translateY(3px);filter:drop-shadow(0 0 0 rgba(20,16,11,.85));}
.taverne #optionenBtn{background-image:url(../assets/tisch/knopf-zahnrad.webp);right:10px;top:8px;}
.taverne .zahnrad.ton{background-image:url(../assets/tisch/knopf-ton.webp);right:10px;top:58px;}
.taverne .zahnrad.logbuch{background-image:url(../assets/tisch/knopf-logbuch.webp);right:62px;bottom:10px;}
.taverne .zahnrad.hilfe{background-image:url(../assets/tisch/knopf-hilfe.webp);right:10px;bottom:10px;}
/* Stumm: das Horn verdunkelt, ein roter Pinselstrich darüber. Der ganze
   Hintergrund steht hier, weil css/fenster.css ihn für .stumm als
   Kurzform setzt. */
.taverne .zahnrad.ton.stumm{background:radial-gradient(circle,rgba(14,10,6,.55) 60%,transparent 62%) center/100% 100% no-repeat,
  url(../assets/tisch/knopf-ton.webp) center/100% 100% no-repeat;color:inherit;}
.taverne .zahnrad.ton.stumm::after{content:"";position:absolute;left:7px;right:7px;top:50%;height:5px;margin-top:-2.5px;
  border-radius:3px;background:#c4372b;box-shadow:0 0 0 1.5px var(--ink);transform:rotate(-40deg);}

/* Handkarten ausfahren: die Holzplakette, der Pfeil bleibt ein eigenes
   Zeichen (er dreht sich und kann herausfallen, js/duellseite.js). */
.taverne .handtaste{left:24px;top:401px;width:76px;height:49px;border:0;border-radius:10px;
  background:url(../assets/tisch/handtaste.webp) center/100% 100% no-repeat;
  box-shadow:none;color:#f3e2bb;filter:drop-shadow(0 4px 0 rgba(20,16,11,.85));}
.taverne .handtaste:active{transform:translateY(4px);filter:drop-shadow(0 0 0 rgba(20,16,11,.85));}
.taverne .handtaste svg{width:28px;height:28px;stroke-width:3.4;
  filter:drop-shadow(0 1.5px 0 var(--ink)) drop-shadow(0 -1px 0 var(--ink));}