/* Karte (abgenommen 16.10.2026, Build 663): gemeinsam für karte-probe.html und das Duell (pixi/). Ein Objekt, eine Stelle.
   Reihenfolge im Dokument: holo/*.css → Stile der Vorlage v1.2 (werden von karte.mjs vor diese Datei gesetzt) → diese Datei. */
:root { --card-aspect: .6667; --card-radius: 5.5% / 3.67%;   /* wie Pokerkarten: 3,5 mm Radius bei 63,5 mm Breite = 5,5 % der Breite */ --card-edge: #e2c07e; --card-glow: #c3a2e8; }
/* Vorderseite: v1.2-Karte füllt die Fläche */
.card__front > * { grid-area: 1 / 1; }
.card__front { text-align: left; }   /* die Karte liegt in einem <button> (wie im Original); Buttons zentrieren Text */
.card__front > .mmk { --w: 100%; --ratio: 2 / 3; --radius: 0; width: 100%; box-shadow: none; }
.card__back { object-fit: cover; }
/* Feldansicht = dieselbe Karte verkleinert (Name, Siegel, Bild, Einfluss) */
.mmk.mmk--feld { --pad-x: 6cqw; --pad-t: 5cqw; --pad-b: 3.5cqw; }
.mmk--feld .mmk__epithet, .mmk--feld .mmk__headorn, .mmk--feld .mmk__factionname, .mmk--feld .mmk__sealline,
.mmk--feld .mmk__typeline, .mmk--feld .mmk__knot, .mmk--feld .mmk__text, .mmk--feld .mmk__meta,
.mmk--feld .mmk__stat:not(:first-child), .mmk--feld .mmk__sep, .mmk--feld .mmk__statlbl, .mmk--feld .mmk__statflake { display: none; }
.mmk--feld .mmk__name { font-size: 12.5cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mmk--feld .mmk__seal { width: 15cqw; height: 15cqw; }
/* kein schwarzer Streifen unten: Sockel ohne Fläche, Wert steht frei auf dem Bild */
.mmk--feld .mmk__base { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.mmk--feld .mmk__base::before, .mmk--feld .mmk__statwrap::before { display: none; }
.mmk--feld .mmk__statwrap { margin-top: 0; }
.mmk--feld .mmk__stats { grid-template-columns: 1fr !important; padding: 0; }
.mmk--feld .mmk__stat > svg { width: 15cqw; height: 15cqw; }
.mmk--feld .mmk__statval { font-size: 17cqw; margin-top: 0; text-shadow: 0 .4cqw 1.6cqw rgba(0,0,0,.95), 0 0 3cqw rgba(0,0,0,.7); }
.mmk__statval.minus { color: #ff8f7a; }
/* ---------- Lesbarkeit (impeccable typeset, 16.10., 21:45) ----------
   1 · Schärfe: base.css setzt will-change: transform auf die Hülle. Chrome rastert die Karte dann einmal in
       Feldgröße und vergrößert das Bild in der Lupe 2,6-fach → unscharfe Schrift. In der Lupe ohne will-change,
       damit der Text in Endgröße neu gezeichnet wird.
   2 · Größen: v1.2 ist für den Druck (63 × 88 mm) gesetzt. Für den Bildschirm die Leserollen größer und eine Stufe
       kräftiger; Größen in cqw der Kartenbreite, wirken also in Feld und Lupe gleich. Effektiv in der Lupe (442 px):
       Regeltext ≈ 15,5 px, Flavour ≈ 14 px, Typzeile/Beiname ≈ 13 px, Werte-Beschriftung und Fußzeile ≈ 10–11 px. */
/* Abweichung (Maxim 23:15: „hakeln und stockeln“): ohne will-change rastert der Browser die Karte in JEDEM Bild der
   Vergrößerung neu. Jetzt erst, wenn die Lupe steht (Klasse `ruhig`, setzt karte.mjs) — Bewegung flüssig, Endbild scharf. */
.card.active.ruhig .card__translater, .card.active.ruhig .card__rotator { will-change: auto; }
.card__front > .mmk {
  --fs-epithet: 2.95cqw; --fs-faction: 2.4cqw; --fs-type: 2.95cqw; --fs-key: 3.3cqw;
  --fs-rules: 3.5cqw; --fs-flavor: 3.15cqw; --fs-statlbl: 2.35cqw; --fs-meta: 2cqw;
}
.card__front > .mmk .mmk__rules p { line-height: 1.38; color: #f1eadb; font-weight: 500; letter-spacing: .005em; }
.card__front > .mmk .mmk__keywords { font-weight: 500; color: #efe7d6; }
.card__front > .mmk .mmk__flavor { color: #d9d0bd; line-height: 1.36; }
.card__front > .mmk .mmk__typeline span, .card__front > .mmk .mmk__statlbl { color: #e6ddca; letter-spacing: .16em; }
.card__front > .mmk .mmk__meta { color: #e6ddca; letter-spacing: .03em; gap: 1cqw; }
.card__front > .mmk .mmk__meta b { letter-spacing: .12em; }
.card__front > .mmk .mmk__epithet { letter-spacing: .24em; }
/* Name und Beiname über hellem Himmel: dichterer Schleier oben statt stärkerem Schatten */
.card__front > .mmk .mmk__veil { background:
  linear-gradient(180deg, rgba(6,13,26,.78) 0%, rgba(6,13,26,.42) 13%, rgba(6,13,26,0) 26%),
  radial-gradient(120% 78% at 50% 42%, transparent 52%, rgba(6,13,26,.52) 100%); }
/* Regeltext steht auf festem Grund (v1.2 lässt das Bild bis 58 % durchscheinen) */
.card__front > .mmk:not(.mmk--feld) .mmk__base { background: linear-gradient(180deg, rgba(7,15,28,.72) 0%, rgba(6,13,25,.94) 9%, rgba(6,12,23,.97) 100%); }

/* ---------- Einfluss im Siegelrahmen (beide Größen) ---------- */
.mmk__faction--wert { position: relative; }
.wertsiegel { position: absolute; left: 50%; bottom: 0; width: 12.8cqw; height: 12.8cqw; transform: translateX(-50%);
  display: grid; place-items: center; pointer-events: none; }
.wertsiegel__zahl { font: 500 6.6cqw/1 "Cormorant Garamond", Garamond, serif; color: #f7f0e1; font-variant-numeric: lining-nums;
  text-shadow: 0 0 .6cqw rgba(4,10,20,.95), 0 .3cqw 1cqw rgba(4,10,20,.9), 0 0 2.4cqw var(--glow, transparent);
  /* Mitte (Maxim 16.10., 23:15: „Zahlen sitzen krumm und schief“): Der Zeilenkasten der Schrift ist oben 92, unten 29 hoch
     (bei 100 px) — die Ziffer saß darum nie in der Mitte. Auf Ziffernhöhe beschnitten liegt jede Ziffer genau mittig. */
  text-box: trim-both cap alphabetic; }
.wertsiegel__zahl--lang { font-size: 3.6cqw; letter-spacing: -.02em; }
.wertsiegel__zahl.minus { color: #ff9a86; }
.mmk__seal { filter: drop-shadow(0 .4cqw 1.2cqw rgba(4,10,20,.9)) brightness(1.05); }
.typsymbol { width: 1.5em; height: 1.5em; vertical-align: -.42em; margin-right: .45em; color: var(--accent); }
/* kleine Karte: Siegel mit Wert größer, Werteleiste ganz weg */
.mmk--feld .mmk__seal, .mmk--feld .wertsiegel { width: 30cqw; height: 30cqw; }   /* größer (Maxim 16.10., 22:51: „die Zahlen sind sehr, sehr klein“) */
.mmk--feld .wertsiegel__zahl { font-size: 16cqw; }
.mmk--feld .wertsiegel__zahl--lang { font-size: 6.4cqw; }   /* „0 → 8“ passt in den Rahmen (8,6 lief über) */
.mmk--feld .mmk__statwrap { display: none; }
.mmk--feld .mmk__name { font-size: 11.5cqw; align-self: center; }

/* Schwärze als Rost (über dem Bild, unter Schein und Glanz) */
.schwaerze { position: relative; pointer-events: none; overflow: hidden; }
.schwaerze .rost { position: absolute; inset: 0; background-size: 100% 100%; opacity: 0; transition: opacity .9s; }
.schwaerze .rand { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; box-shadow: inset 0 0 18px 4px rgba(30,8,40,.85), inset 0 0 4px 2px rgba(140,70,40,.4); animation: puls 2.6s ease-in-out infinite; }
@keyframes puls { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
.card[data-schwaerze] .rand { opacity: 1; }
.card .mmk__art { transition: filter .9s; }
.card[data-schwaerze="i1"] .mmk__art { filter: saturate(.9); }   /* nur Farbe raus, Helligkeit bleibt (Maxim 21:43) */
.card[data-schwaerze="i2"] .mmk__art { filter: saturate(.75); }
.card[data-schwaerze="i3"] .mmk__art { filter: saturate(.55); }
.card[data-schwaerze="null"] .mmk__art { filter: saturate(0); }
.card[data-schwaerze^="i"] .card__shine, .card[data-schwaerze="null"] .card__shine { filter: brightness(.6) contrast(1.6) saturate(.3) !important; }