/* ============================================================================
 * fehdestein.css — der Stein, die Fackel, die Runen (01.10.2026, #839)
 * ----------------------------------------------------------------------------
 * Renderer: js/ui/fehdestein.js (TC.Fehdestein)
 * Demonstriert in: library-community.html, Kapitel „Der Fehdestein"
 * Material: tokens.css K3 (Stein, Rune, Fackel) — in keinem Theme
 *           überschrieben, ein Stein ist in jedem System ein Stein.
 *
 * Der Raum zeigt den Stein selbst. Fünf Bausteine:
 *
 *   .tc-fackel        brennt (.is-an), solange eine Fehde besiegelt ist;
 *                     sonst aus, mit einem Faden Rauch. Gemalt in CSS, kein
 *                     Bild nötig. --gross für den Stein, --klein für Zeilen.
 *   .tc-hand          ein Handabdruck (SVG aus TC.Fehdestein.hand);
 *                     --leer ist die Mulde, in die die zweite Hand gehört.
 *   .tc-stein         die Steinplatte („Auf dem Stein", „Was der Stein weiß")
 *     __fehde         eine Fehde: zwei Hände gegeneinander, Namen, Fakten
 *     __fehde--an-dich  eine Forderung an dich, mit Frist und Knöpfen
 *   .tc-rune          eine eingeschlagene Rune; --halb (zurückgenommen) ist
 *                     nur halb geritzt, --neu wird Strich für Strich
 *                     eingeschlagen (der Hammerschlag im Moment)
 *   .tc-schwur        das Erklären in drei Schritten (benutzt tc-wizard-steps)
 *   .tc-stein-moment  was nach einer Handlung erscheint
 *
 * ⚠️ REDUZIERTE BEWEGUNG: Jede Animation hier kollabiert auf 0,01 ms und
 * bleibt im Endbild stehen — die Fackel brennt dann still, die Rune steht
 * ganz da. `animation: none` stünde im Anfangsbild (unsichtbare Rune).
 *
 * ⚠️ KEIN z-index: Die Ebenen der Fackel stehen in der Reihenfolge des
 * Markups (Schein, Flamme, Kopf, Stiel) und werden über `isolation`
 * zusammengehalten.
 * ========================================================================== */


/* ---- Die Fackel ------------------------------------------------------------ */

.tc-fackel {
  --fackel-h: 64px;
  position: relative;
  isolation: isolate;
  display: inline-block;
  flex: none;
  inline-size: calc(var(--fackel-h) * 0.5);
  block-size: var(--fackel-h);
  vertical-align: middle;
}
.tc-fackel--gross { --fackel-h: 96px; }
.tc-fackel--klein { --fackel-h: 28px; }

/* Der Stiel: Holz, nach unten schmaler. */
.tc-fackel__stiel {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: 0;
  inline-size: calc(var(--fackel-h) * 0.12);
  block-size: 56%;
  transform: translateX(-50%);
  clip-path: polygon(0 0, 100% 0, 78% 100%, 22% 100%);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--tc-holz) 55%, var(--tc-stein-ritze)) 0%,
    var(--tc-holz) 45%,
    color-mix(in srgb, var(--tc-holz) 70%, var(--tc-stein-ritze)) 100%);
}

/* Der Kopf: umwickeltes, angekohltes Tuch. */
.tc-fackel__kopf {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: 52%;
  inline-size: calc(var(--fackel-h) * 0.22);
  block-size: 14%;
  transform: translateX(-50%);
  border-radius: 30% 30% 22% 22%;
  background:
    repeating-linear-gradient(170deg,
      transparent 0 3px,
      color-mix(in srgb, var(--tc-stein-ritze) 55%, transparent) 3px 4px),
    linear-gradient(180deg,
      color-mix(in srgb, var(--tc-fackel-rot) 40%, var(--tc-stein-ritze)) 0%,
      color-mix(in srgb, var(--tc-holz) 60%, var(--tc-stein-ritze)) 100%);
}

/* Die Flamme: ein Tropfen, unten breit, oben spitz. */
.tc-fackel__flamme {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: 60%;
  inline-size: calc(var(--fackel-h) * 0.3);
  block-size: calc(var(--fackel-h) * 0.5);
  margin-inline-start: calc(var(--fackel-h) * -0.15);
  /* Unten rund, oben eine Zunge: die Spitze ist fast ein Punkt. */
  border-radius: 50% 50% 48% 48% / 80% 80% 26% 26%;
  background:
    radial-gradient(ellipse 46% 40% at 50% 76%, var(--tc-fackel-kern) 0%, transparent 100%),
    linear-gradient(0deg, var(--tc-fackel) 0%, var(--tc-fackel) 38%, var(--tc-fackel-rot) 82%, transparent 100%);
  transform-origin: 50% 92%;
  opacity: 0;
}
.tc-fackel__kern {
  position: absolute;
  inset-inline: 32%;
  inset-block: 46% 10%;
  border-radius: 50% 50% 45% 45% / 62% 62% 38% 38%;
  background: var(--tc-fackel-kern);
  filter: blur(1px);
  opacity: 0.85;
}

/* Der Schein um die Flamme. */
.tc-fackel__schein {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: 56%;
  inline-size: calc(var(--fackel-h) * 1.2);
  block-size: calc(var(--fackel-h) * 1.0);
  margin-inline-start: calc(var(--fackel-h) * -0.6);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--tc-fackel-glut), transparent);
  opacity: 0;
}

.tc-fackel.is-an .tc-fackel__flamme {
  opacity: 1;
  animation: tc-fackel-zucken 1.9s ease-in-out infinite;
}
.tc-fackel.is-an .tc-fackel__schein {
  opacity: 1;
  animation: tc-fackel-glimmen 2.7s ease-in-out infinite;
}

/* Aus: der Kopf verkohlt, ein Faden Rauch steigt. */
.tc-fackel:not(.is-an) .tc-fackel__kopf::after {
  content: '';
  position: absolute;
  inset-inline-start: 46%;
  inset-block-end: 100%;
  inline-size: 2px;
  block-size: calc(var(--fackel-h) * 0.32);
  border-radius: 2px;
  background: linear-gradient(0deg, color-mix(in srgb, var(--tc-rune-leise) 45%, transparent), transparent);
  transform-origin: 50% 100%;
  animation: tc-fackel-rauch 5.5s ease-in-out infinite;
}

/* ⚠️ UNGLEICHE SPRÜNGE — wie bei tc-kerze: Eine Flamme zuckt, sie schwingt
   nicht. Wer die Werte glättet, macht daraus ein atmendes Ei. */
@keyframes tc-fackel-zucken {
  0%   { transform: scale(1, 1) skewX(0deg); }
  13%  { transform: scale(0.94, 1.07) skewX(-3deg); }
  27%  { transform: scale(1.03, 0.95) skewX(2deg); }
  41%  { transform: scale(0.97, 1.1) skewX(-1deg); }
  58%  { transform: scale(1.05, 0.97) skewX(3deg); }
  71%  { transform: scale(0.95, 1.04) skewX(-2deg); }
  86%  { transform: scale(1.02, 1.08) skewX(1deg); }
  100% { transform: scale(1, 1) skewX(0deg); }
}
@keyframes tc-fackel-glimmen {
  0%, 100% { opacity: 0.9; }
  23%      { opacity: 0.7; }
  47%      { opacity: 1; }
  66%      { opacity: 0.78; }
  81%      { opacity: 0.95; }
}
@keyframes tc-fackel-rauch {
  0%   { opacity: 0;   transform: translateY(0) skewX(0deg); }
  30%  { opacity: 0.8; transform: translateY(-2px) skewX(-8deg); }
  70%  { opacity: 0.5; transform: translateY(-6px) skewX(10deg); }
  100% { opacity: 0;   transform: translateY(-10px) skewX(-4deg); }
}


/* ---- Die Hand -------------------------------------------------------------- */

.tc-hand {
  display: block;
  inline-size: 34px;
  block-size: 40px;
  flex: none;
  fill: var(--tc-rune);
  filter: drop-shadow(1px 1px 0 var(--tc-stein-ritze)) drop-shadow(0 0 6px var(--tc-rune-schein));
}
.tc-hand--links { transform: scaleX(-1); }
/* Die Mulde: dieselbe Form, eingetieft — eine Kante Licht unten, sonst Kerbe. */
.tc-hand--leer {
  fill: var(--tc-stein-ritze);
  filter: drop-shadow(0 1px 0 var(--tc-stein-linie));
  opacity: 0.9;
}


/* ---- Der Stein ------------------------------------------------------------- */

.tc-stein {
  display: grid;
  gap: var(--tc-space-4);
  padding: var(--tc-space-5) var(--tc-space-4);
  color: var(--tc-rune);
  font-family: var(--tc-font-body);
  /* Gehauen, nicht gestanzt: ungleiche Ecken, ein Lichtfall von oben,
     ein paar dunklere Flecken, nach unten in den Schatten. */
  border: 1px solid var(--tc-stein-linie);
  border-radius: 26px 20px 32px 18px / 20px 28px 22px 30px;
  background:
    radial-gradient(60% 40% at 78% 18%, color-mix(in srgb, var(--tc-stein-ritze) 30%, transparent), transparent 70%),
    radial-gradient(45% 35% at 18% 82%, color-mix(in srgb, var(--tc-stein-ritze) 35%, transparent), transparent 70%),
    radial-gradient(120% 70% at 50% 0%, var(--tc-stein-hell), transparent 72%),
    var(--tc-stein);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--tc-rune) 10%, transparent),
    inset 0 -24px 36px -16px var(--tc-stein-ritze),
    0 14px 30px -16px var(--tc-stein-ritze);
}
/* Brennt die Fackel, fällt warmes Licht von links oben auf den Stein. */
.tc-stein--brennt {
  background:
    radial-gradient(55% 45% at 6% 4%, var(--tc-fackel-glut), transparent 70%),
    radial-gradient(60% 40% at 78% 18%, color-mix(in srgb, var(--tc-stein-ritze) 30%, transparent), transparent 70%),
    radial-gradient(45% 35% at 18% 82%, color-mix(in srgb, var(--tc-stein-ritze) 35%, transparent), transparent 70%),
    radial-gradient(120% 70% at 50% 0%, var(--tc-stein-hell), transparent 72%),
    var(--tc-stein);
}

.tc-stein__kopf {
  display: flex;
  align-items: flex-end;
  gap: var(--tc-space-3);
  min-width: 0;
}
.tc-stein__titelzeile {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding-block-end: var(--tc-space-1);
}
.tc-stein__titel {
  margin: 0;
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-xl);
  font-weight: var(--tc-weight-bold);
  letter-spacing: 0.04em;
  color: var(--tc-rune);
  text-shadow: 1px 1px 0 var(--tc-stein-ritze);
}
.tc-stein__klein {
  font-size: var(--tc-text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tc-rune-leise);
}
.tc-stein--brennt .tc-stein__kopf .tc-stein__klein { color: var(--tc-fackel); }
.tc-stein__leer {
  margin: 0;
  font-size: var(--tc-text-sm);
  color: var(--tc-rune-leise);
  line-height: 1.55;
}

.tc-stein__liste { display: grid; gap: var(--tc-space-3); }

/* Eine Fehde: eine Kerbe im Stein, kein Kasten darauf. */
.tc-stein__fehde {
  display: grid;
  gap: var(--tc-space-2);
  padding: var(--tc-space-3);
  border-radius: var(--tc-radius-md);
  background: color-mix(in srgb, var(--tc-stein-ritze) 38%, transparent);
  box-shadow:
    inset 0 2px 4px var(--tc-stein-ritze),
    0 1px 0 color-mix(in srgb, var(--tc-rune) 8%, transparent);
  scroll-margin-block: var(--tc-space-7);
}
.tc-stein__fehde--an-dich {
  border: 1px solid var(--tc-fackel);
  box-shadow:
    inset 0 2px 4px var(--tc-stein-ritze),
    0 0 18px -4px var(--tc-fackel-glut);
}
/* Absprung aus dem Stadtschreier (?ziel=fehde-<id>) — dieselbe Klasse wie
   bei Skarns Tafel. */
.tc-stein__fehde.ist-gemeint { outline: 2px solid var(--tc-rune); outline-offset: 3px; }

.tc-stein__marke {
  margin: 0;
  font-size: var(--tc-text-xs);
  font-weight: var(--tc-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tc-fackel);
}

.tc-stein__paar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--tc-space-3);
}
.tc-stein__seite {
  display: grid;
  gap: 2px;
  min-width: 0;
  text-align: end;
}
.tc-stein__seite--rechts { text-align: start; }
.tc-stein__name {
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-lg);
  font-weight: var(--tc-weight-bold);
  color: var(--tc-rune);
  overflow-wrap: anywhere;
  line-height: 1.2;
}
.tc-stein__bande {
  font-size: var(--tc-text-xs);
  color: var(--tc-rune-leise);
  overflow-wrap: anywhere;
}
.tc-stein__haende {
  display: flex;
  align-items: center;
  gap: 1px;
}
/* Die Hände neigen sich einander zu. */
.tc-stein__haende .tc-hand:first-child { transform: scaleX(-1) rotate(-8deg); }
.tc-stein__haende .tc-hand:last-child  { transform: rotate(-8deg); }

.tc-stein__fakten {
  margin: 0;
  text-align: center;
  font-size: var(--tc-text-sm);
  color: var(--tc-rune-leise);
}
.tc-stein__vorrang {
  margin: 0;
  text-align: center;
  font-size: var(--tc-text-sm);
  font-weight: var(--tc-weight-bold);
  letter-spacing: 0.04em;
  color: var(--tc-fackel);
}
.tc-stein__frist {
  margin: 0;
  text-align: center;
  font-size: var(--tc-text-sm);
  font-weight: var(--tc-weight-bold);
  color: var(--tc-fackel);
}
.tc-stein__regel {
  margin: 0;
  text-align: center;
  font-size: var(--tc-text-xs);
  line-height: 1.5;
  color: var(--tc-rune-leise);
}
.tc-stein__skarn {
  justify-self: center;
  text-align: center;
  font-size: var(--tc-text-xs);
  color: var(--tc-rune-leise);
  text-decoration: underline;
  text-decoration-color: var(--tc-stein-linie);
  text-underline-offset: 3px;
}
.tc-stein__skarn:hover,
.tc-stein__skarn:focus-visible { color: var(--tc-rune); text-decoration-color: currentColor; }

.tc-stein__taten {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--tc-space-2);
}
.tc-stein__taten .tc-button { min-height: var(--tc-touch-min); }
.tc-stein__ausgang { width: auto; min-height: var(--tc-touch-min); }

/* ---- Der Stand je Fehde (#918, 1) ------------------------------------------
   Statt des festen „Vorrang am Tisch": wo die Fehde gerade steht und was als
   Nächstes kommt. Zwischen zwei Linien, damit er sich von den Fakten darüber
   absetzt. Hell (Fackel) nur, wenn ein Tisch feststeht oder es gerade läuft;
   „Noch kein Abend" bleibt in Runenfarbe — er ist kein Alarm. */
.tc-stein__stand {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: var(--tc-space-2) var(--tc-space-2);
  text-align: center;
  border-block: 1px solid var(--tc-stein-linie);
}
.tc-stein__stand-kopf {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-2);
  margin: 0;
  font-size: var(--tc-text-sm);
  font-weight: var(--tc-weight-bold);
  letter-spacing: 0.04em;
  color: var(--tc-rune);
}
.tc-stein__stand--abend .tc-stein__stand-kopf,
.tc-stein__stand--heute .tc-stein__stand-kopf,
.tc-stein__stand--live .tc-stein__stand-kopf,
.tc-stein__stand--fehlt .tc-stein__stand-kopf { color: var(--tc-fackel); }
/* Live: ein glühender Punkt vor der Zeile — still, ohne Puls. */
.tc-stein__stand--live .tc-stein__stand-kopf::before {
  content: '';
  inline-size: 0.6em;
  block-size: 0.6em;
  border-radius: 50%;
  background: var(--tc-fackel);
  box-shadow: 0 0 8px var(--tc-fackel-glut);
}
.tc-stein__stand-zusatz {
  margin: 0;
  max-inline-size: 34rem;
  font-size: var(--tc-text-xs);
  line-height: 1.5;
  color: var(--tc-rune-leise);
}
.tc-stein__stand-zusatz strong { color: var(--tc-rune); font-weight: var(--tc-weight-bold); }
/* Ein Weg, kein Knopf — aber mit Fläche für den Daumen (Heuristik 5). */
.tc-stein__stand-weg {
  display: inline-flex;
  align-items: center;
  min-height: var(--tc-touch-min);
  padding-inline: var(--tc-space-2);
  font-size: var(--tc-text-xs);
  font-weight: var(--tc-weight-bold);
  color: var(--tc-rune);
  text-decoration: underline;
  text-decoration-color: var(--tc-stein-linie);
  text-underline-offset: 3px;
}
.tc-stein__stand-weg:hover,
.tc-stein__stand-weg:focus-visible { text-decoration-color: currentColor; }

/* Die Vorgeschichte der beiden (#918, 6) — was VOR der Fehde war, erzählt
   wie im Bericht des Stadtschreiers (FehdeVorgeschichte). */
.tc-stein__vorgeschichte {
  margin: 0;
  text-align: center;
  font-size: var(--tc-text-xs);
  font-style: italic;
  line-height: 1.55;
  color: var(--tc-rune-leise);
}
.tc-stein__vorgeschichte strong { font-style: normal; color: var(--tc-rune); }

/* Rufen (#918, 7): Ist der Ruf noch nicht wieder frei, steht daneben ab wann. */
.tc-stein__ruf-zeit {
  font-size: var(--tc-text-xs);
  color: var(--tc-rune-leise);
}

/* Eine Forderung an dich, die du nicht annehmen kannst (#916). */
.tc-stein__regel--sperre { color: var(--tc-fackel); }

/* ---- Die Rache zum halben Pfand (#922) ---------------------------------------
   „Rache steht dir zu": eine Kerbe wie eine Fehde, mit einer glühenden Kante
   links (Fackelrot trägt keinen Text, nur die Kante). Die wartende Rache ist
   kalt: keine Kante, leise Marke. */
.tc-stein__rache {
  display: grid;
  gap: var(--tc-space-2);
  padding: var(--tc-space-3);
  border-radius: var(--tc-radius-md);
  border-inline-start: 3px solid var(--tc-fackel-rot);
  background: color-mix(in srgb, var(--tc-stein-ritze) 38%, transparent);
  box-shadow:
    inset 0 2px 4px var(--tc-stein-ritze),
    -6px 0 16px -10px var(--tc-fackel-glut);
}
.tc-stein__rache .tc-stein__marke { text-align: center; }
.tc-stein__rache--wartet { border-inline-start-color: var(--tc-stein-linie); box-shadow: inset 0 2px 4px var(--tc-stein-ritze); }
.tc-stein__rache--wartet .tc-stein__marke { color: var(--tc-rune-leise); }
.tc-stein__rache-wer {
  margin: 0;
  text-align: center;
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-lg);
  color: var(--tc-rune);
  overflow-wrap: anywhere;
}
.tc-stein__rache-wer strong { color: var(--tc-rune); }
/* An der Forderung: dass ein Nein ausgerufen wird, steht hell genug, um es zu lesen. */
.tc-stein__regel--rache { color: var(--tc-rune); }

/* Entschieden: zwei Tage mit Urteil auf dem Stein, die Hände ruhen. */
.tc-stein__fehde--entschieden .tc-stein__haende { opacity: 0.7; }
/* Nach dem Urteil kommt nichts mehr — keine untere Linie ins Leere. */
.tc-stein__fehde--entschieden .tc-stein__stand { border-block-end: 0; padding-block-end: 0; }

/* Entscheiden nur, wo es nötig ist (#918, 5). Blood Bowl: offen, mit Titel.
   Sonst eingeklappt — der Griff des Ausrichters, keine Tippabgabe. */
.tc-stein__griff {
  justify-self: center;
  font-size: var(--tc-text-xs);
  color: var(--tc-rune-leise);
}
.tc-stein__griff > summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--tc-touch-min);
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.tc-stein__griff > summary:hover,
.tc-stein__griff > summary:focus-visible { color: var(--tc-rune); }
.tc-stein__griff-zeile {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--tc-space-2);
  margin-block-start: var(--tc-space-2);
}
.tc-stein__griff-zeile .tc-button { min-height: var(--tc-touch-min); }
/* Der offene Griff „Ergebnis eintragen" (Blood Bowl) ist seit #1071 weg:
   Auch dort entscheidet das Speichern der Partie, der Griff ist eingeklappt. */

/* Der Schwur ist gesperrt (#916): der Satz des Steinwarts statt des Knopfs. */
.tc-stein-sperre {
  display: grid;
  gap: var(--tc-space-2);
  max-inline-size: 36rem;
  justify-self: center;
  text-align: center;
}


/* ---- Was der Stein weiß: die Runen ----------------------------------------- */

/* Die Runen stehen vor dem Stein selbst (#881): der gemalte Menhir rechts,
   links die ruhige Höhle, über allem ein Schleier aus Stein, der zur
   Textseite hin dicht wird. Der Menhir steht bei 67 % der Bildbreite.
   Das Bild ist ein Hintergrund (Pfad relativ zu diesem Blatt); fehlt es,
   bleibt der glatte Stein darunter.

   ⚠️ DER SCHLEIER IST DIE LESBARKEIT, NICHT ZIERDE. Gemessen wurde
   --tc-rune-leise (die schwächste Schrift) gegen den HELLSTEN Bildpunkt
   hinter jeder Zeile, bei Kastenbreiten von 288 bis 1268 px: überall
   mindestens 4,5:1 (der Titel ist grosse Schrift, dort 3:1). Wer den
   Schleier dünner macht oder die Stufen verschiebt, misst neu.

   ⚠️ DIE STUFEN HÄNGEN AN DER BREITE DES KASTENS, NICHT DES FENSTERS.
   Je schmaler der Kasten, desto näher rückt der Menhir an die Schrift —
   in der Library steht er 560 px breit in einem breiten Fenster. Deshalb
   Container-Abfragen auf der Hülle `.tc-runen-rahmen`, die
   TC.Fehdestein.runen() um den Kasten legt. */
.tc-runen-rahmen { container: tc-runen / inline-size; }

.tc-stein--runen {
  background:
    linear-gradient(90deg,
      var(--tc-stein) 0%,
      color-mix(in srgb, var(--tc-stein) 88%, transparent) 40%,
      color-mix(in srgb, var(--tc-stein) 55%, transparent) 100%),
    url('../../assets/schattenmarkt/fehdestein/stein.webp') 70% center / cover no-repeat,
    var(--tc-stein);
}
/* Bis 900 px ist der Kasten fast quadratisch, der Menhir steht näher an
   der Schrift: eine Stufe dichter (gemessen 4,6:1 bei 608 px statt 4,1:1). */
@container tc-runen (max-width: 900px) {
  .tc-stein--runen {
    background:
      linear-gradient(90deg,
        var(--tc-stein) 0%,
        color-mix(in srgb, var(--tc-stein) 92%, transparent) 40%,
        color-mix(in srgb, var(--tc-stein) 75%, transparent) 100%),
      url('../../assets/schattenmarkt/fehdestein/stein.webp') 70% center / cover no-repeat,
      var(--tc-stein);
  }
}
/* Bis 600 px füllt der Menhir den Kasten ganz aus und steht hinter jeder
   Zeile; lesbar wäre die Schrift erst unter 94 % Schleier, und dann sähe
   man den Stein nicht mehr. Deshalb wird er dort zum BILDBAND ÜBER DEM
   TITEL: das Bild in voller Breite oben, darunter blendet es in glatten
   Stein über, und die Runen stehen auf dem Stein. Dicht ist der Übergang
   spätestens an der Unterkante des Bildes (55cqi = Bildhöhe bei 16:9) —
   so zeichnet sich nie eine Bildkante ab. */
@container tc-runen (max-width: 600px) {
  .tc-stein--runen {
    --stein-band: calc(var(--tc-space-8) + var(--tc-space-7));
    padding-block-start: var(--stein-band);
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--tc-stein) 15%, transparent) 0,
        color-mix(in srgb, var(--tc-stein) 65%, transparent) var(--stein-band),
        var(--tc-stein) min(calc(var(--stein-band) + var(--tc-space-8)), 55cqi)),
      url('../../assets/schattenmarkt/fehdestein/stein.webp') center top / 100% auto no-repeat,
      var(--tc-stein);
  }
}

.tc-runen {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tc-runen__zeile {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: var(--tc-space-3);
  padding-block: var(--tc-space-2);
  border-block-start: 1px solid color-mix(in srgb, var(--tc-stein-linie) 60%, transparent);
}
.tc-runen__zeile:first-child { border-block-start: 0; }
.tc-runen__text { display: grid; gap: 1px; min-width: 0; }
.tc-runen__wer {
  margin: 0;
  font-size: var(--tc-text-base);
  color: var(--tc-rune);
  overflow-wrap: anywhere;
}
.tc-runen__wer strong { font-weight: var(--tc-weight-bold); }
.tc-runen__was {
  margin: 0;
  font-size: var(--tc-text-xs);
  color: var(--tc-rune-leise);
}
.tc-runen__zeile--halb .tc-runen__wer { color: var(--tc-rune-leise); }
/* Der Bericht der Partie, die entschieden hat (#918, 4). */
.tc-runen__bericht {
  color: var(--tc-rune);
  text-decoration: underline;
  text-decoration-color: var(--tc-stein-linie);
  text-underline-offset: 3px;
}
.tc-runen__bericht:hover,
.tc-runen__bericht:focus-visible { text-decoration-color: currentColor; }

.tc-runen__mehr { margin-block-start: var(--tc-space-2); }
.tc-runen__mehr > summary {
  cursor: pointer;
  min-height: var(--tc-touch-min);
  display: flex;
  align-items: center;
  font-size: var(--tc-text-sm);
  color: var(--tc-rune-leise);
}
.tc-runen__mehr > summary:hover,
.tc-runen__mehr > summary:focus-visible { color: var(--tc-rune); }

/* Die Rune selbst: zweimal dieselben Linien — die Kerbe (dunkel, versetzt)
   und das Licht auf ihrer Kante. `pathLength="1"` macht jede Linie eins
   lang; so lässt sich „halb geritzt" als Strichmuster schreiben. */
.tc-rune {
  display: block;
  inline-size: 26px;
  block-size: 39px;
  overflow: visible;
}
.tc-rune polyline {
  fill: none;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.tc-rune__ritze polyline { stroke: var(--tc-stein-ritze); stroke-width: 3.4; }
.tc-rune__licht polyline { stroke: var(--tc-rune); stroke-width: 2; }
.tc-rune__spur  polyline { stroke: var(--tc-stein-linie); stroke-width: 1; stroke-dasharray: 0.05 0.05; }
.tc-rune--halb .tc-rune__ritze polyline,
.tc-rune--halb .tc-rune__licht polyline { stroke-dasharray: 0.5 1; }

/* Eingeschlagen: Strich für Strich, nach dem Hammerschlag. */
.tc-rune--neu .tc-rune__licht polyline,
.tc-rune--neu .tc-rune__ritze polyline {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  animation: tc-rune-ritzen 700ms var(--tc-ease-out) 260ms forwards;
}
.tc-rune--neu.tc-rune--halb .tc-rune__licht polyline,
.tc-rune--neu.tc-rune--halb .tc-rune__ritze polyline {
  stroke-dasharray: 0.5 1;
  animation-name: tc-rune-halb;
}
@keyframes tc-rune-ritzen { to { stroke-dashoffset: 0; } }
@keyframes tc-rune-halb   { from { stroke-dashoffset: 0.5; } to { stroke-dashoffset: 0; } }


/* ---- Der Schwur ------------------------------------------------------------ */

.tc-schwur {
  display: grid;
  gap: var(--tc-space-4);
  font-family: var(--tc-font-body);
  color: var(--tc-text-default);
}
.tc-schwur__schritt { display: grid; gap: var(--tc-space-3); }
.tc-schwur__schritt[hidden] { display: none; }

.tc-schwur__stimme { margin: 0; display: grid; gap: var(--tc-space-1); }
.tc-schwur__stimme blockquote {
  margin: 0;
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-base);
  line-height: 1.55;
  color: var(--tc-text-strong);
}
.tc-schwur__stimme figcaption,
.tc-schwur__etikett {
  font-size: var(--tc-text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tc-text-muted);
}

.tc-schwur__felder { display: grid; gap: var(--tc-space-3); }
.tc-schwur__feld { display: grid; gap: var(--tc-space-1); }
.tc-schwur__feld .tc-select { min-height: var(--tc-touch-rec); font-size: var(--tc-text-base); }
.tc-schwur__leer {
  margin: 0;
  font-size: var(--tc-text-sm);
  color: var(--tc-text-default);
}
.tc-schwur__leer[hidden],
.tc-schwur__warnung[hidden] { display: none; }

/* Die nüchterne Regel: klein, unter einer Linie, damit niemand raten muss. */
.tc-schwur__regel {
  margin: 0;
  padding-block-start: var(--tc-space-2);
  border-block-start: 1px dashed var(--tc-border-default);
  font-size: var(--tc-text-xs);
  line-height: 1.55;
  color: var(--tc-text-muted);
}

/* Das Pfand liegt auf einem Stück Stein. */
.tc-schwur__pfand {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tc-space-2);
  padding: var(--tc-space-3);
  border-radius: 18px 14px 20px 12px / 14px 18px 12px 20px;
  border: 1px solid var(--tc-stein-linie);
  background: radial-gradient(120% 80% at 50% 0%, var(--tc-stein-hell), transparent 72%), var(--tc-stein);
}
.tc-schwur__pfand-teil {
  display: grid;
  gap: 2px;
  justify-items: center;
  text-align: center;
  min-width: 0;
}
.tc-schwur__pfand-teil .tc-schwur__etikett { color: var(--tc-rune-leise); }
.tc-schwur__pfand-teil b {
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-lg);
  color: var(--tc-rune);
}
.tc-schwur__pfand-teil small { font-size: var(--tc-text-xs); color: var(--tc-rune-leise); }
.tc-schwur__pfand-teil--topf b { color: var(--tc-fackel); }
.tc-schwur__warnung {
  margin: 0;
  font-size: var(--tc-text-sm);
  color: var(--tc-warning);
}
/* #922: Rache gegen den Gewählten — Kante wie am Stein, Text in Schriftfarbe. */
.tc-schwur__rache {
  margin: 0;
  padding: var(--tc-space-2) var(--tc-space-3);
  border-inline-start: 3px solid var(--tc-fackel-rot);
  border-radius: var(--tc-radius-sm);
  background: var(--tc-bg-surface-1);
  font-size: var(--tc-text-sm);
  line-height: 1.5;
  color: var(--tc-text-default);
}
.tc-schwur__rache b { color: var(--tc-text-strong); }
.tc-schwur__rache[hidden],
.tc-schwur [data-feld="pfandStimme"][hidden],
.tc-schwur [data-feld="racheStimme"][hidden] { display: none; }

.tc-schwur__formel {
  margin: 0;
  padding: var(--tc-space-5) var(--tc-space-3);
  text-align: center;
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-xl);
  font-weight: var(--tc-weight-bold);
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-wrap: balance;
  color: var(--tc-rune);
  text-shadow: 1px 1px 0 var(--tc-stein-ritze), 0 0 14px var(--tc-rune-schein);
  border-radius: 22px 16px 26px 14px / 16px 22px 14px 26px;
  border: 1px solid var(--tc-stein-linie);
  background:
    radial-gradient(55% 60% at 8% 0%, var(--tc-fackel-glut), transparent 70%),
    radial-gradient(120% 80% at 50% 0%, var(--tc-stein-hell), transparent 72%),
    var(--tc-stein);
}
.tc-schwur__wen {
  margin: 0;
  text-align: center;
  font-size: var(--tc-text-base);
  color: var(--tc-text-strong);
}

.tc-schwur__fuss {
  display: flex;
  justify-content: space-between;
  gap: var(--tc-space-2);
}
.tc-schwur__fuss [data-schwur="weiter"] { margin-inline-start: auto; }
.tc-schwur__fuss [hidden] { display: none; }


/* ---- Der Moment ------------------------------------------------------------ */

.tc-stein-moment {
  display: grid;
  justify-items: center;
  gap: var(--tc-space-3);
  text-align: center;
  font-family: var(--tc-font-body);
}
/* Das gemalte Bild zum Moment (#1114): Es trägt das Fenster (Baustein
   tc-bildfenster mit `__bild--band`, modal.css). Am Handy ein Band über die
   Fensterbreite (hier 4:3, höchstens 34 % der Bildschirmhöhe: Der Moment hat
   wenig Text), ab 901 px das Quadrat links neben dem Text. Das gezeichnete
   Zeichen bleibt: am Handy als Siegel auf der Unterkante des Bildes, am
   Schreibtisch über dem Satz. */
.tc-stein-moment.tc-bildfenster { gap: 0; }
.tc-stein-moment__text {
  display: grid;
  justify-items: center;
  gap: var(--tc-space-3);
  min-width: 0;
}
.tc-stein-moment__szene {
  --tc-bildfenster-band: 4 / 3;
  --tc-bildfenster-band-hoehe: 34vh;
  --tc-bildfenster-blick: center;
  border: 1px solid var(--tc-stein-linie);
  box-shadow: 0 10px 24px -12px var(--tc-stein-ritze);
  animation: tc-moment-auf 420ms var(--tc-ease-out) both;
}
.tc-stein-moment.tc-bildfenster .tc-stein-moment__bild {
  margin-block-start: calc(-1 * var(--tc-space-8));
}
@media (min-width: 901px) {
  .tc-stein-moment.tc-bildfenster { gap: var(--tc-space-6); }
  .tc-stein-moment.tc-bildfenster .tc-stein-moment__bild { margin-block-start: 0; }
}

.tc-stein-moment__bild {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--tc-space-2);
  inline-size: 168px;
  block-size: 132px;
  padding-block-end: var(--tc-space-4);
  border-radius: 48% 52% 46% 54% / 54% 46% 54% 46%;
  border: 1px solid var(--tc-stein-linie);
  background:
    radial-gradient(70% 60% at 50% 20%, var(--tc-stein-hell), transparent 72%),
    var(--tc-stein);
  box-shadow: inset 0 -16px 26px -12px var(--tc-stein-ritze), 0 10px 24px -12px var(--tc-stein-ritze);
  animation: tc-moment-auf 420ms var(--tc-ease-out) both;
}
.tc-stein-moment__bild .tc-hand { inline-size: 40px; block-size: 47px; }
.tc-stein-moment__bild > .tc-hand:first-child { transform: scaleX(-1) rotate(-10deg); }
.tc-stein-moment__bild > .tc-hand:last-child  { transform: rotate(-10deg); }
.tc-stein-moment--angenommen .tc-stein-moment__bild,
.tc-stein-moment--abgelehnt .tc-stein-moment__bild,
.tc-stein-moment--eingezogen .tc-stein-moment__bild { padding-block-end: var(--tc-space-3); }
.tc-stein-moment--angenommen .tc-fackel { animation: tc-moment-entzuenden 650ms var(--tc-ease-out) 180ms both; }
.tc-stein-moment__bild .tc-rune { inline-size: 46px; block-size: 69px; margin-block-end: var(--tc-space-1); }
.tc-stein-moment--entschieden .tc-stein-moment__bild,
.tc-stein-moment--unentschieden .tc-stein-moment__bild,
.tc-stein-moment--zurueck .tc-stein-moment__bild { align-items: center; padding-block-end: 0; }

/* Der Hammerschlag: ein kurzer, heller Ring, dann steht die Rune. */
.tc-stein-moment__schlag {
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--tc-fackel-kern), var(--tc-rune-schein) 55%, transparent);
  opacity: 0;
  pointer-events: none;
  animation: tc-moment-schlag 520ms var(--tc-ease-out) 120ms both;
}

.tc-stein-moment__rede { margin: 0; display: grid; gap: var(--tc-space-1); max-inline-size: 34ch; }
.tc-stein-moment__satz {
  margin: 0;
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-lg);
  line-height: 1.5;
  text-wrap: balance;
  color: var(--tc-text-strong);
}
.tc-stein-moment__wer {
  font-size: var(--tc-text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tc-text-muted);
}
.tc-stein-moment__fakt {
  margin: 0;
  max-inline-size: 40ch;
  font-size: var(--tc-text-sm);
  line-height: 1.5;
  color: var(--tc-text-default);
}
.tc-stein-moment__saldo {
  margin: 0;
  font-size: var(--tc-text-xs);
  color: var(--tc-text-muted);
  font-variant-numeric: tabular-nums;
}
.tc-stein-moment__weiter { min-width: 8rem; margin-block-start: var(--tc-space-1); }

@keyframes tc-moment-auf {
  from { opacity: 0; transform: translateY(6px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes tc-moment-entzuenden {
  0%   { opacity: 0; transform: scale(0.6); }
  60%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes tc-moment-schlag {
  0%   { opacity: 0; transform: scale(0.4); }
  25%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.5); }
}


/* ---- Reduzierte Bewegung --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .tc-fackel__flamme,
  .tc-fackel__schein,
  .tc-fackel__kopf::after,
  .tc-rune polyline,
  .tc-stein-moment__szene,
  .tc-stein-moment__bild,
  .tc-stein-moment .tc-fackel,
  .tc-stein-moment__schlag {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}