/* ============================================================================
 * schmuck.css — was man beim Schwarzmarkt kauft und überall trägt (#758)
 * ----------------------------------------------------------------------------
 * SCHICHT 0/1. Drei Dinge, ein Prinzip: Der Server schreibt einen BILDPFAD
 * (api/waren-lib.php), TC.Schmuck (js/tc-ui.js) hängt eine Klasse an und legt
 * dazu eine Regel in ein <style> im Kopf, die `--tc-*-bild` setzt. Hier steht
 * nur, WO das Bild liegt und wie gross es ist — nie, welche es gibt.
 *
 *   .tc-schmuck        um ein rundes Profilbild oder ein Wappen
 *   .tc-beschlag       eine Ecke am Kopf der Spielerseite (viermal gespiegelt)
 *   .tc-sockel         unter einer Trophäe in der Vitrine
 *
 * Demo: library-community.html#schmuck.
 *
 * ⚠️ DIESES BLATT GEHÖRT AUF JEDE SEITE, DIE EIN PROFILBILD ODER EIN WAPPEN
 * ZEICHNET. Es liegt deshalb bei allen Seiten, die js/tc-ui.js laden: Die
 * Namensauswahl (TC.Memberpicker) zeichnet Avatare, und die gibt es fast
 * überall. Ein Stilblatt, das auf einer Seite fehlt, fällt nicht auf — es
 * sieht dort nur nach nichts aus (CLAUDE.md §10).
 * ========================================================================== */

/* ----------------------------------------------------------------------------
 * tc-schmuck — Schmuck ums Profilbild
 * Markup: <span class="tc-avatar tc-schmuck tc-schmuck--dornenkrone">
 *
 * ⚠️ DER SCHMUCK RAGT HINAUS (Tims Entscheidung 1A vom 22.09.2026): ein Achtel
 * der Bildkante je Seite. Das Gesicht behält überall seine Grösse — in einer
 * Liste stehen damit alle Gesichter gleich gross, ob mit Schmuck oder ohne.
 * Gemessen an allen neun Stellen, die ein Profilbild zeichnen (375 und
 * 1280 px): nirgends wird etwas abgeschnitten, überall bleiben mindestens
 * 8 px bis zum Nachbarn.
 *
 * ⚠️ DESHALB SCHNEIDET DER KASTEN NICHT MEHR. `tc-avatar` hat `overflow:
 * hidden`, und das beschneidet auch ein Pseudo-Element. Mit Schmuck rundet
 * sich deshalb das BILD selbst (border-radius: inherit), und der Kasten lässt
 * durch. Ohne Schmuck bleibt alles, wie es war.
 *
 * `inset` in Prozent misst am Kasten (Höhe für oben/unten, Breite für
 * links/rechts) — bei einem runden Avatar ist beides gleich, der Schmuck
 * wächst also ohne eine einzige Grössenangabe mit: 28 px → 35, 104 px → 130.
 * ------------------------------------------------------------------------- */
.tc-schmuck { position: relative; }

.tc-schmuck::before {
  content: '';
  position: absolute;
  inset: -12.5%;
  background: var(--tc-schmuck-bild) center / 100% 100% no-repeat;
  pointer-events: none;   /* nie ein Klickziel: darunter liegt das Bild */
  z-index: 1;
}

.tc-avatar.tc-schmuck,
.dash-fk__avatar.tc-schmuck { overflow: visible; }
.tc-avatar.tc-schmuck > img,
.tc-avatar.tc-schmuck > .tc-avatar__fallback,
.dash-fk__avatar.tc-schmuck > img { border-radius: inherit; }

/* Leuchtendes atmet leise. Welche Stücke das sind, sagt der Katalog
   (`leuchtet`), nicht dieses Blatt. */
@keyframes tc-schmuck-atmen {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.28); }
}
.tc-schmuck--leuchtet::before { animation: tc-schmuck-atmen 3.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .tc-schmuck--leuchtet::before {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    animation-delay: -1ms;
  }
}

/* ----------------------------------------------------------------------------
 * tc-beschlag — die vier Ecken am Kopf der Spielerseite
 * Markup: vier Spannen in einem Element mit `position: relative`:
 *   <span class="tc-beschlag tc-beschlag--eisen tc-beschlag--ol"></span> …
 *
 * EIN Bild, viermal gesetzt: Die Ecken unten und rechts sind gespiegelt. So
 * passt sich der Rahmen jeder Kartengrösse an, und ein gestrecktes Zierband,
 * das sich verzieht, gibt es nirgends.
 * ------------------------------------------------------------------------- */
.tc-beschlag {
  display: block;      /* ohne das bleibt ein <span> inline und misst 0x0,
                          sobald eine fremde Regel `position` ueberschreibt */
  position: absolute;
  width: var(--tc-beschlag-gr, 66px);
  height: var(--tc-beschlag-gr, 66px);
  background: var(--tc-beschlag-bild) center / contain no-repeat;
  pointer-events: none;
  z-index: 2;
}
.tc-beschlag--ol { top: var(--tc-beschlag-aus, -10px); left: var(--tc-beschlag-aus, -10px); }
.tc-beschlag--or { top: var(--tc-beschlag-aus, -10px); right: var(--tc-beschlag-aus, -10px); transform: scaleX(-1); }
.tc-beschlag--ul { bottom: var(--tc-beschlag-aus, -10px); left: var(--tc-beschlag-aus, -10px); transform: scaleY(-1); }
.tc-beschlag--ur { bottom: var(--tc-beschlag-aus, -10px); right: var(--tc-beschlag-aus, -10px); transform: scale(-1, -1); }

/* Am Handy ist die Karte schmal; dort sind kleinere Ecken ehrlicher. */
@media (max-width: 480px) {
  .tc-beschlag { --tc-beschlag-gr: 52px; --tc-beschlag-aus: -8px; }
}

/* ----------------------------------------------------------------------------
 * tc-sockel — unter einer Trophäe in der Vitrine
 * Markup: <span class="tc-sockel tc-sockel--holz"></span> direkt unter der
 * Kachel, in einem Element, das die Kachel als Spalte führt.
 *
 * Er ist breiter als die Kachel (die Trophäe steht darauf, nicht davor) und
 * rückt mit einem negativen Rand unter sie. `aspect-ratio` hält ihn flach,
 * egal wie breit die Kachel im Raster wird.
 * ------------------------------------------------------------------------- */
.tc-sockel {
  display: block;
  width: 118%;
  aspect-ratio: 100 / 38;
  margin: -5px auto 0;
  background: var(--tc-sockel-bild) center bottom / 100% 100% no-repeat;
  pointer-events: none;
}

/* ----------------------------------------------------------------------------
 * tc-namenszug — Titel, Schandbrief-Zettel und Beiname (24.09.2026)
 * Gezeichnet von TC.Schmuck.namenszug(p, opts) (js/tc-ui.js).
 * Demo: library-community.html#namenszug.
 *
 *   <span class="tc-namenszug [tc-namenszug--block]">
 *     <span|s class="tc-namenszug__titel [is-verhaengt]">Trinkfester Tresenhocker</…>
 *     <span class="tc-zettel">Pinselpanscher<small class="tc-zettel__rest">noch 5 Tage</small></span>
 *     <span class="tc-namenszug__beiname">genannt „Würfelwimmerer“</span>
 *   </span>
 *
 * Der Zettel ist Papier aus den Material-Tokens (tokens.css K2): Tinte auf
 * Papier 12,6:1, von keinem Theme überschrieben — er sieht in jedem System
 * gleich aus, weil er nicht zum System gehört, sondern angeschlagen wurde.
 * ------------------------------------------------------------------------- */
.tc-namenszug {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  min-width: 0;
}
.tc-namenszug--block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.tc-namenszug__titel { overflow-wrap: anywhere; }
.tc-namenszug__titel.is-verhaengt {
  text-decoration: line-through;
  text-decoration-color: var(--tc-danger);
  text-decoration-thickness: 2px;
  opacity: 0.7;
}
.tc-namenszug__beiname {
  /* Eine leise Nebenzeile: immer in der Grundschrift, auch wenn der Ort
     (Name, Kopf) eine Schmuckschrift vererbt — Cinzel machte daraus
     Kapitälchen. */
  font-family: var(--tc-font-body);
  font-size: 0.88em;
  font-style: italic;
  color: var(--tc-text-muted);
}
.tc-namenszug__leer { color: var(--tc-text-muted); }

/* KLAMMS BRANDMAL (#897): verkohltes Holz, das Wort in Glut. Steht vor dem
   Schandbrief-Zettel, wo ein Name steht (TC.Schmuck.brandmalHtml). Material K3
   (Holz, Fackel): in jedem Theme dasselbe Eisen. Kontrast --tc-fackel auf der
   Mischung aus Holz und Ritze: über 8 : 1. Ein Klick führt zum Pranger. */
.tc-brandmal {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--tc-holz) 40%, var(--tc-stein-ritze));
  border: 1px solid color-mix(in srgb, var(--tc-fackel-rot) 65%, transparent);
  color: var(--tc-fackel);
  font-family: var(--tc-font-display);
  font-size: 0.82em;
  font-style: normal;
  font-weight: 700;
  letter-spacing: var(--tc-tracking-wide);
  text-transform: uppercase;
  line-height: 1.5;
  text-shadow: 0 0 6px var(--tc-fackel-glut);
  white-space: nowrap;
  vertical-align: baseline;
  cursor: pointer;
}
.tc-brandmal:focus-visible { outline: 2px solid var(--tc-highlight); outline-offset: 2px; }

.tc-zettel {
  position: relative;
  display: inline-block;
  padding: 2px 10px 2px 18px;
  background: var(--tc-papier);
  border: 1px solid var(--tc-papier-rand);
  border-radius: 2px;
  color: var(--tc-tinte);
  font-family: var(--font-gothic, 'Cinzel', Georgia, serif);
  font-weight: 700;
  font-style: normal;
  line-height: 1.35;
  transform: rotate(-2deg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  overflow-wrap: anywhere;
}
/* Der Nagel. */
.tc-zettel::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--tc-stempel-weg);
}
.tc-zettel:hover,
.tc-zettel:focus-visible { transform: rotate(0deg); }
.tc-zettel:focus-visible { outline: 2px solid var(--tc-highlight); outline-offset: 2px; }
.tc-zettel__rest {
  display: block;
  font-family: var(--font-body, 'Lato', sans-serif);
  font-weight: 400;
  font-size: 0.72em;
  color: var(--tc-tinte-leise);
}
.tc-namenszug--block .tc-zettel { margin-top: 2px; }
@media (prefers-reduced-motion: reduce) {
  .tc-zettel { transform: none; }
}

/* ----------------------------------------------------------------------------
 * Der Namenszug im Seitenkopf (#1118, 13.10.2026)
 *
 * `.tc-page-header__subtitle span` (header.css) ist für die Trennpunkte
 * gedacht: gedämpfte Farbe, 8px Rand links und rechts. Der Namenszug besteht
 * aus <span> und bekam beides mit. Der Zettel stand in grauer Schrift auf
 * hellem Papier, dazu mit dem text-shadow des Kopfs (unleserlich), und der
 * Block war um 8px, der Zettel um 16px nach rechts gerückt. Der Kopf ist
 * mittig, der Block stand linksbündig darunter; wo eine Seite ihren Kopf
 * links setzt (Spielerseite ab 900px), stellt sie den Block selbst zurück.
 * Die Farbe des Titels bleibt, wie sie war.
 * -------------------------------------------------------------------------- */
.tc-page-header__subtitle .tc-zettel { color: var(--tc-tinte); text-shadow: none; }
/* Dasselbe am Brandmal (#1119): Im Kopf stand das Wort in gedämpftem Grau
   statt in Glut. Live trug bis dahin niemand eines, deshalb fiel es nicht auf. */
.tc-page-header__subtitle .tc-brandmal { color: var(--tc-fackel); }
/* Auch ohne `--block` (#1120): In der Begrüßung des Dashboards stand der
   Namenszug 8px, sein Titel 16px eingerückt, sobald er umbrach. Den Abstand
   zwischen den Teilen trägt `gap`. */
.tc-page-header__subtitle .tc-namenszug,
.tc-page-header__subtitle .tc-namenszug > span { margin-left: 0; margin-right: 0; }
/* Gruß und Namenszug in einer Unterzeile (Dashboard-Kopf, #1120):
     Seid gegrüßt <span class="tc-namenszug-punkt">·</span> <span class="tc-namenszug">…</span>
   Am Handy passen beide nicht nebeneinander. Der Namenszug brach dann als
   Ganzes um, und der Trennpunkt blieb allein am Ende der Grußzeile hängen.
   Bis 480px steht der Namenszug deshalb in seiner eigenen Zeile, ohne Punkt.
   Demo: library-layout.html#header-beiwort. */
@media (max-width: 480px) {
  .tc-page-header__subtitle > .tc-namenszug-punkt { display: none; }
  .tc-page-header__subtitle > .tc-namenszug:not(.tc-namenszug--block) { display: flex; }
}
.tc-page-header__subtitle .tc-namenszug--block { align-items: center; }

/* ----------------------------------------------------------------------------
 * Ein Name in drei Größen (#1119, 14.10.2026; Konzept #843, Tims
 * Entscheidungen E1 B und E2 A vom 13.10.2026)
 * Demo: library-community.html#namen-groessen.
 *
 *   GROSS      Spielerseite, Profilfenster, eigenes Dashboard, Contessa, Fehde:
 *              Name · Namenszug · Rang-Marke · Ehrentitel
 *                TC.Schmuck.namenszug(p, { gross: true, eigen })
 *                TC.Schmuck.marken(p)
 *   ZEILE      Ranglisten, Termine und Tische, Navigation:
 *              Name und höchstens EINE Marke (Brandmal, sonst jüngster Brief)
 *                TC.Schmuck.zeile(p)
 *   FLIESSTEXT Stadtschreier, Glocke, Mail: nur der verlinkte Name
 *                TC.Schmuck.wort(p)
 *
 *   <span class="tc-namenszug tc-namenszug--block tc-namenszug--gross">
 *     … Titel, Brandmal, Zettel, Beiname wie oben …
 *     <a class="tc-namenszug__wahl" href="untergrund.html?…raum=titel">Titel ändern</a>
 *   </span>
 *   <span class="tc-namensmarken">
 *     <span class="tc-rangmarke"><span class="tc-rangmarke__level">Level 10</span>
 *       <span class="tc-rangmarke__wort">Unsterblich</span></span>
 *     <span class="tc-ehrenmedaille"><span class="tc-ehrenmedaille__muenze"></span>Krösus der ersten Ära</span>
 *   </span>
 *
 * ⚠️ `--gross` STEHT IMMER NEBEN `--block`. Die Orte richten den Block aus
 * (Kopf mittig, Spielerseite ab 900px links, „Groß ansehen" mittig) und
 * sprechen dafür `--block` an; `--gross` bringt nur das Gewicht des Titels.
 *
 * Kontrast am Ort gemessen (Grund aus dem aufgenommenen Bild neben dem Text,
 * Mordheim- und AoS-Theme, 375 und 1100 px), im Seitenkopf / im Fenster auf
 * --tc-bg-base: Titel 11,4 / 10,1 · Rangwort 10,5 / 8,6 · „Level N" 6,7 / 5,5
 * · Medaille 8,6 / 6,9 · Beiname 7,4 / 6,5 · „Titel ändern" 11,6 : 1.
 * ------------------------------------------------------------------------- */
.tc-namenszug--gross { gap: var(--tc-space-1); }
.tc-namenszug--gross .tc-namenszug__titel {
  /* Der Titel ist das Wort, das man sich ausgesucht hat: Grundschrift,
     halbfett, in der Glanzfarbe. Im Kopf erbte er bis dahin die gedämpfte
     Farbe der Trennpunkte. */
  font-family: var(--tc-font-body);
  font-size: 1.06em;
  font-weight: var(--tc-weight-semibold);
  letter-spacing: var(--tc-tracking-wide);
  text-transform: none;
  color: var(--tc-highlight);
}
.tc-namenszug--gross .tc-namenszug__beiname { font-size: var(--tc-text-sm); }

/* Der Sprung in die Titelwahl, nur am eigenen Namenszug (E2 A). Zwei
   Klassen: `.tc-page-header__subtitle a` (header.css) setzt sonst eine
   Unterkante, die bei 36px Tipphöhe weit unter dem Wort hinge. */
.tc-namenszug .tc-namenszug__wahl {
  display: inline-flex;
  align-items: center;
  min-height: 36px;              /* Tippziel (Heuristik 5) */
  margin-block: -4px;            /* die Höhe trägt das Ziel, nicht den Abstand */
  border-bottom: 0;
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-sm);
  font-style: normal;
  font-weight: var(--tc-weight-semibold);
  letter-spacing: var(--tc-tracking-wide);
  color: var(--tc-highlight);
  text-decoration: underline;
  text-decoration-color: rgba(var(--tc-highlight-rgb), 0.45);
  text-underline-offset: 3px;
  text-shadow: none;
  opacity: 1;
}
/* In einer Zeile mit dem Titel (Begrüßung des Dashboards, #1120) darf der
   Sprung die Zeile nicht höher machen: Der Kopf wuchs am Handy sonst. Das
   Tippziel bleibt 36px, es ragt je 8px über die Zeile. */
.tc-namenszug:not(.tc-namenszug--block) .tc-namenszug__wahl { margin-block: -8px; }
.tc-namenszug .tc-namenszug__wahl:hover { text-decoration-color: var(--tc-highlight); }
.tc-namenszug .tc-namenszug__wahl:focus-visible { outline: 2px solid var(--tc-highlight); outline-offset: 2px; }

/* Die Reihe unter dem Namenszug: Rang-Marke, dahinter die Ehrentitel. */
.tc-namensmarken {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: inherit;
  gap: var(--tc-space-2);
  min-width: 0;
  max-width: 100%;
}

/* tc-rangmarke — „Level N" leise, das Rangwort in der Glanzfarbe. Sieht aus
   wie tc-page-header__badge und steht nie im Namen: Der Rang wächst mit, der
   Name bleibt. Das Wort kommt aus GamificationSystem.getLevelInfo(p), also
   aus der Reihe des Kernsystems; mit Grad heißt es „Ewiger · II". */
.tc-rangmarke {
  display: inline-flex;
  flex-wrap: wrap;               /* schmale Spalte: „Level N" über dem Wort */
  align-items: baseline;
  gap: 0 6px;
  max-width: 100%;
  padding: 2px 10px;
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-xs);
  font-style: normal;
  font-weight: var(--tc-weight-semibold);
  letter-spacing: 0.5px;
  line-height: 1.5;
  text-transform: uppercase;
  text-shadow: none;
  color: var(--tc-highlight);
  background: rgba(var(--tc-highlight-rgb), 0.08);
  border: 1px solid rgba(var(--tc-highlight-rgb), 0.3);
  border-radius: var(--tc-radius-sm);
}
.tc-rangmarke .tc-rangmarke__level { margin: 0; color: var(--tc-text-muted); white-space: nowrap; }

/* tc-ehrenmedaille — ein Ehrentitel ist ein Denkmal, kein Rang: runde Pille
   mit Münze, Material Fackel (tokens.css K3), in jedem Theme gleich. Nur in
   der großen Darstellung. Es gibt sie dreimal auf der Plattform. */
.tc-ehrenmedaille {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-2);
  padding: 2px 12px 2px 3px;
  border: 1px solid color-mix(in srgb, var(--tc-fackel) 45%, transparent);
  /* 12px: einzeilig eine runde Pille (24px hoch), zweizeilig in einer
     schmalen Spalte ein Schild statt einer Wurst. */
  border-radius: var(--tc-radius-lg);
  background: color-mix(in srgb, var(--tc-fackel) 9%, transparent);
  color: var(--tc-fackel);
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-xs);
  font-style: normal;
  font-weight: var(--tc-weight-semibold);
  letter-spacing: var(--tc-tracking-wide);
  line-height: 1.5;
  text-shadow: none;
  text-align: left;
}
.tc-ehrenmedaille .tc-ehrenmedaille__muenze {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--tc-fackel-kern), var(--tc-fackel) 45%, var(--tc-fackel-rot) 100%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tc-fackel-rot) 55%, transparent);
}
.tc-ehrenmedaille[title] { cursor: help; }

/* tc-namenszeile — der Name in einer Zeile: Name und höchstens eine Marke.
   Titel, Beiname, Rang und Ehrentitel stehen in einer Zeile nie. */
.tc-namenszeile {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  min-width: 0;
}

/* Die Schand-Marke hinter einem Namen: der jüngste laufende Schandbrief
   (TC.Schmuck.schandBadge, .eineMarke, .zeile). Bis #1119 stand sie in
   gamification-styles.css, das auf dem Untergrund und in der Library fehlt;
   dort war sie nackter Text. Skill-Lila ist eine Datenfarbe (§9), der Teufel
   ein CSS-Escape (§6). Ein Klick führt zum Flüsterer (delegierter Horcher in
   js/tc-ui.js); `cursor` steht mit demselben Wert auch in badge.css.
   Kontrast auf --tc-bg-base, am Ort gemessen: 8,3 : 1. */
.gf-taunt-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.3);
  font-size: 0.72rem;
  color: #c4b5fd;
  font-style: italic;
  cursor: pointer;
  position: relative;
}
.gf-taunt-badge::before {
  content: '\1F608';
  font-size: 0.8rem;
  font-style: normal;
}
.gf-taunt-badge:hover { background: rgba(168, 85, 247, 0.25); }

/* Das Beiwort hinter dem Namen im Seitenkopf (#843, Tims Entscheidung E1 B):
   „Timmay, Unsterblich". Der Rang steht nachgestellt, nie als Vorsilbe:
   „Unsterblich Timmay" und „Krenks rechte Hand Timmay" stolperten,
   nachgestellt geht jedes Rangwort. Gebaut von TC.Schmuck.kopfName(p).
     <h1 class="tc-page-header__title">Timmay<span class="tc-page-header__beiwort">,
       <span class="tc-page-header__beiwort-wort">Ewiger · II</span></span></h1>
   Das Komma klebt am Namen, das Rangwort bricht nur als Ganzes um.
   Demo: library-layout.html#header-beiwort. */
.tc-page-header__beiwort {
  font-size: 0.62em;
  font-weight: var(--tc-weight-normal);
  letter-spacing: var(--tc-tracking-wide);
  color: var(--tc-highlight);
}
.tc-page-header__beiwort-wort { white-space: nowrap; }

/* ----------------------------------------------------------------------------
 * tc-schau — ein Stück groß ansehen (#891, 05.10.2026)
 * Tim: „ich kann mir meine Ratte mit nem tollen fell ausstatten […] Aber ich
 * kann das alles nirgends in groß sehen, oder?"
 * Geöffnet über TC.Schmuck.schau({art, stueck, name, titel, satz, aktion})
 * (js/tc-ui.js) in einem TC.Modal mit `variant: 'schau'`.
 * Demo: library-community.html#schmuck-schau.
 *
 *   .tc-modal.tc-modal--schau > .tc-modal__container   (Bühne mit Lichtkegel)
 *     .tc-schau
 *       .__buehne > .__gross.__gross--avatar|--fell > das Stück
 *       .__titel · .__satz · a.__aktion.tc-button
 *   button.tc-schau-knopf  — macht ein Stück antippbar (Spielerkopf, Ratte,
 *                            Anprobe im Schwarzmarkt)
 *
 * ⚠️ DAS STÜCK WIRD VERGRÖSSERT, NICHT NEU GEBAUT. Es kommt in seiner
 * gewohnten Größe (Avatar 104 px, Fell 88 px) und wird per transform
 * skaliert — so wachsen Rahmen, Ring und Schein mit. Ein 4-px-Ring an einem
 * 230-px-Fell wäre kaum noch zu sehen. Die Bilder reichen dafür (Rahmen
 * 400 px, Fell 512 px, Profilbilder bis 800 px).
 * ------------------------------------------------------------------------- */
.tc-modal--schau .tc-modal__container {
  background:
    radial-gradient(ellipse 70% 50% at 50% 30%, rgba(255, 236, 200, 0.13), transparent 72%),
    var(--tc-bg-canvas);
}
.tc-schau {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tc-space-2);
  font-family: var(--tc-font-body);
  text-align: center;
}
/* Luft für den Schmuck, der ein Achtel über die Kante ragt (oben mehr: dort
   sitzt bei manchen Rahmen die Krone). */
.tc-schau__buehne {
  display: grid;
  place-items: center;
  width: 100%;
  padding: var(--tc-space-6) 0 var(--tc-space-5);
}
.tc-schau__gross {
  --tc-schau-k: 2.2;
  position: relative;
  flex: 0 0 auto;
  width: calc(var(--tc-schau-basis, 104px) * var(--tc-schau-k));
  height: calc(var(--tc-schau-basis, 104px) * var(--tc-schau-k));
}
/* Zwei Klassen: tc-fell und tc-schmuck setzen selbst `position: relative`,
   und welches Blatt zuletzt lädt, ist je Seite anders. */
.tc-schau .tc-schau__gross > * {
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(var(--tc-schau-k));
  transform-origin: 0 0;
}
.tc-schau__gross--avatar { --tc-schau-basis: 104px; }
.tc-schau__gross--fell   { --tc-schau-basis: 88px; --tc-schau-k: 2.6; }
@media (max-width: 360px) {
  .tc-schau__gross--avatar { --tc-schau-k: 1.9; }
  .tc-schau__gross--fell   { --tc-schau-k: 2.2; }
}
.tc-schau__titel {
  margin: 0;
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-lg, 1.1rem);
  line-height: 1.25;
  color: var(--tc-highlight);
  text-wrap: balance;
}
/* Der Namenszug einer Person unter ihrem Bild (#843): mittig wie die Bühne,
   nicht linksbündig wie im Kopf der Spielerseite. */
.tc-schau__titel .tc-namenszug--block { align-items: center; }
.tc-schau__satz {
  max-width: 34ch;
  margin: 0;
  font-size: var(--tc-text-sm, 0.85rem);
  line-height: var(--tc-leading-normal, 1.5);
  color: var(--tc-text-muted);
}
.tc-schau__aktion { margin-top: var(--tc-space-2); }

/* Der Auslöser. Er hängt an einem <button> um ein Stück, das selbst ein
   <span> ist (§9: kein Blockelement im Knopf) — deshalb bringt er seine
   Gestalt ganz selbst mit, auf Seiten mit und ohne button.css. */
.tc-schau-knopf {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  font-family: inherit;
  line-height: 0;
  cursor: zoom-in;
}
.tc-schau-knopf:focus-visible {
  outline: 2px solid var(--tc-highlight);
  outline-offset: 4px;
}