/* ════════════════════════════════════════════════════════════════════════
   TrioMi Card Render – gemeinsame Kartendarstellung (Creator, Admin, Freigabe, Druck)

   Aufgelöst aus den im alten CardCreator tatsächlich wirksamen Regeln
   (css/studio-horizon.css + Frame-Tuner-Overrides). Alles ist relativ zur
   Kartenbreite: 1 --tcr-px entspricht 1px bei 540px Kartenbreite (alte Vorschau),
   Schriftgrößen in em relativ zur Kartenbasis (Breite × fontRatio / 747).
   Positionen der Elemente kommen per Inline-Style aus dem Rahmen-Layout.
   ════════════════════════════════════════════════════════════════════════ */

.tcr-card {
  position: relative;
  width: 100%;
  aspect-ratio: 745 / 1040;
  container-type: inline-size;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.tcr-card.tcr-rounded { border-radius: 5.185% / 3.714%; }
.tcr-card *, .tcr-card *::before, .tcr-card *::after { box-sizing: border-box; margin: 0; padding: 0; }
.tcr-card img { -webkit-user-drag: none; }

.tcr-face {
  --tcr-px: calc(100cqw / 540);
  --tcr-outline: calc(4.5 * var(--tcr-px));
  --tcr-outline-color: #FFFFFF;
  --tcr-shadow: drop-shadow(0 calc(1 * var(--tcr-px)) calc(2 * var(--tcr-px)) #000000);
  position: absolute;
  inset: 0;
  font-size: calc(100cqw * var(--tcr-font-ratio, 20) / 747);
  line-height: normal;
}

/* ── Ebenen ─────────────────────────────────────────────────────────────── */
.tcr-art {
  position: absolute;
  top: 10.5%; left: 7.2%; width: 85.6%; height: 42.5%;
  overflow: hidden;
  z-index: 2;
}
.tcr-art.tcr-full-art { top: 0; left: 0; width: 100%; height: 100%; }
.tcr-art img { display: block; width: 100%; height: 100%; object-fit: cover; }

.tcr-prevolve-img {
  position: absolute;
  top: 7.9%; left: 4.6%; width: 11%; height: 8%;
  overflow: hidden;
  z-index: 5;
  box-shadow: 0 calc(2 * var(--tcr-px)) calc(6 * var(--tcr-px)) rgba(0, 0, 0, 0.4);
}
.tcr-prevolve-img img { display: block; width: 100%; height: 100%; object-fit: cover; }

.tcr-frame {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: fill;
  pointer-events: none;
  z-index: 4;
  display: block;
}

.tcr-content { position: absolute; inset: 0; z-index: 10; }
.tcr-content > * { z-index: 12; }

/* Kontur + Schatten für Kartentexte (Stärke relativ zur globalen Konturbreite) */
.tcr-stroke {
  -webkit-text-stroke: calc(var(--tcr-outline) * var(--tcr-k, 1)) var(--tcr-outline-color);
  paint-order: stroke fill;
  filter: var(--tcr-shadow);
}

/* ── Name ───────────────────────────────────────────────────────────────── */
.tcr-namebar {
  position: absolute;
  top: 3.3%; left: 6.5%; width: 65%; height: 5.5%;
  display: flex;
  align-items: center;
}
.tcr-namebar.tcr-vstar { max-width: 52%; width: auto; z-index: 10; }
.tcr-name {
  --tcr-k: 0.9;
  font-family: 'GillSansStdRegularBold', 'GillSans', sans-serif;
  font-weight: 700;
  font-size: 2.15em;
  letter-spacing: -0.04em;
  color: #000000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.15em;
}
.tcr-name-badge {
  height: 1.15em;
  width: auto;
  vertical-align: -0.08em;
  margin-left: 0.25em;
  display: inline-block;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 calc(2 * var(--tcr-px)) calc(4 * var(--tcr-px)) rgba(0, 0, 0, 0.5));
}

.tcr-sub-banner {
  position: absolute;
  top: 4.8em; left: 6.2em;
  z-index: 26;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 0.75em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #EC4899, #F43F5E);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 calc(1 * var(--tcr-px)) calc(2 * var(--tcr-px)) rgba(0, 0, 0, 0.9));
}

/* ── KP ─────────────────────────────────────────────────────────────────── */
.tcr-hp {
  position: absolute;
  top: 2.5%; right: 13.8%;
  display: flex;
  align-items: baseline;
  gap: 0.12em;
  text-align: right;
}
.tcr-hp-label {
  --tcr-k: 0.85;
  font-family: 'GillSansStdUltraBold', 'GillSans', sans-serif;
  font-weight: 900;
  font-size: 1.15em;
  letter-spacing: -0.035em;
  color: #000000;
}
.tcr-hp-value {
  --tcr-k: 0.85;
  font-family: 'FuturaLTMediumBold', 'Futura', sans-serif;
  font-weight: 700;
  font-size: 2.8em;
  letter-spacing: -0.05em;
  color: #000000;
  line-height: 1;
}

.tcr-type-icon {
  position: absolute;
  top: 2.4%; right: 4.55%; width: 8.5%; height: 7.5%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tcr-type-icon img, .tcr-energy img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ── Vorentwicklung / VSTAR ─────────────────────────────────────────────── */
.tcr-prevolve-name {
  --tcr-k: 0.4;
  position: absolute;
  top: 9.7%; left: 17.8%; width: 58%;
  font-family: 'FrutigerLT66BoldItalic', 'FuturaLTMedium', sans-serif;
  font-size: 0.95em;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #000000;
  white-space: nowrap;
  overflow: hidden;
}

.tcr-vstar-banner {
  position: absolute;
  top: 51.5%; left: 5%; width: 90%; height: 3.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
}
.tcr-vstar-banner-text {
  --tcr-k: 0.4;
  font-family: 'GillSansStdRegularBold', sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: 1.4em;
  letter-spacing: 0.05em;
  color: #78350F;
}

/* ── Beschreibung (Trainer / Energie) ──────────────────────────────────── */
.tcr-description {
  --tcr-k: 0.45;
  position: absolute;
  top: 54%; left: 11.9%; width: 77%; height: 31.7%;
  font-family: 'FrutigerLT55Roman', 'GillSans', sans-serif;
  font-size: 1.6em;
  line-height: 1.3em;
  color: #000000;
  text-align: justify;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: hidden;
}
.tcr-description.tcr-energy-desc { line-height: 1.4em; }

.tcr-trainer-rule {
  --tcr-k: 0.45;
  position: absolute;
  bottom: 5.5%; left: 7.5%; width: 85%;
  font-family: 'GillSansStdRegularBold', sans-serif;
  font-weight: 600;
  font-size: 0.9em;
  color: #000000;
  text-align: center;
}

/* ── Attacken / Fähigkeiten ────────────────────────────────────────────── */
.tcr-moves {
  position: absolute;
  top: 54%; left: 5%; width: 90%; height: 30.5%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 0.4em;
  overflow: hidden;
}
.tcr-ability, .tcr-move { position: relative; display: flex; flex-direction: column; width: 100%; }
.tcr-ability-header { display: flex; align-items: center; gap: 0.4em; }
.tcr-ability-badge { height: 2em; width: auto; object-fit: contain; display: inline-block; vertical-align: middle; }
.tcr-ability-name {
  --tcr-k: 0.75;
  font-family: 'GillSansStdBoldCondensed', 'GillSansCondensed', sans-serif;
  font-weight: 700;
  font-size: 2.2em;
  letter-spacing: -0.04em;
  color: #C00000;
  line-height: 1;
}
.tcr-move-header { display: flex; align-items: center; width: 100%; min-height: 2.2em; position: relative; }
.tcr-move-cost { display: flex; align-items: center; gap: 0.15em; margin-right: 0.4em; flex-shrink: 0; }
.tcr-move-cost .tcr-energy { width: 2.2em; height: 2.2em; }
.tcr-move-name {
  --tcr-k: 0.75;
  font-family: 'GillSansStdBoldCondensed', 'GillSansCondensed', sans-serif;
  font-weight: 700;
  font-size: 2.3em;
  letter-spacing: -0.04em;
  color: #000000;
  flex: 1 1 0%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
}
.tcr-move-damage {
  --tcr-k: 0.75;
  font-family: 'FuturaLTMediumBold', 'Futura', sans-serif;
  font-weight: 700;
  font-size: 2.6em;
  letter-spacing: -0.04em;
  color: #000000;
  margin-left: 0.4em;
  flex-shrink: 0;
}
.tcr-ability-text, .tcr-move-text {
  --tcr-k: 0.45;
  font-family: 'GillSansStdRegularBold', 'GillSans', sans-serif;
  font-size: 1.35em;
  line-height: 1.15;
  color: #000000;
  margin-top: 0.1em;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
}
.tcr-move-text { letter-spacing: -0.015em; }
.tcr-inline-energy { width: 1.15em; height: 1.15em; vertical-align: middle; display: inline-block; margin: 0 0.05em; }

/* ── Schwäche / Resistenz / Rückzug ────────────────────────────────────── */
.tcr-typebar {
  position: absolute;
  bottom: 11.2%; left: 4.2%; width: 88.8%; height: 3%;
  display: flex;
  align-items: center;
  font-family: 'FuturaLTMediumBold', 'Futura', sans-serif;
  font-weight: 700;
  color: #000000;
}
.tcr-weakness, .tcr-resistance {
  --tcr-k: 0.4;
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.2em;
  font-size: 1.25em;
}
.tcr-weakness { left: 13.3%; }
.tcr-resistance { left: 42.5%; }
.tcr-retreat { position: absolute; right: 0.3%; width: 23%; display: flex; gap: 0.15em; justify-content: flex-end; }
.tcr-typebar .tcr-energy { width: 1.8em; height: 1.8em; display: inline-flex; }
.tcr-modifier { --tcr-k: 0.4; font-size: 1.25em; font-weight: 700; color: #000000; line-height: 1; }

/* ── Regelbox ──────────────────────────────────────────────────────────── */
.tcr-rule-box {
  position: absolute;
  bottom: 2.8em; right: 1.8em;
  z-index: 25;
  background: rgba(15, 15, 20, 0.92);
  border: calc(1.5 * var(--tcr-px)) solid #FFFFFF;
  border-radius: calc(20 * var(--tcr-px));
  padding: 0.22em 0.75em;
  display: flex;
  align-items: center;
  gap: 0.5em;
  color: #FFFFFF;
  font-family: 'Roboto', sans-serif;
  font-size: 0.65em;
  box-shadow: 0 calc(4 * var(--tcr-px)) calc(12 * var(--tcr-px)) rgba(0, 0, 0, 0.7);
  max-width: 80%;
}
.tcr-rule-badge {
  font-weight: 900;
  font-style: italic;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  background: linear-gradient(135deg, #FFFFFF 0%, #D1D5DB 100%);
  color: #000000;
  padding: 0.1em 0.45em;
  border-radius: calc(4 * var(--tcr-px));
  letter-spacing: 0.02em;
  white-space: nowrap;
  font-size: 0.9em;
}
.tcr-rule-text { font-weight: 600; color: #F3F4F6; font-size: 0.92em; line-height: 1.1; }

/* ── Fußzeile ──────────────────────────────────────────────────────────── */
.tcr-info {
  --tcr-k: 0.4;
  position: absolute;
  bottom: 3.6%; left: 6.6%; width: 86.8%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-family: 'FuturaLTMediumBold', 'Futura', sans-serif;
  font-size: 0.88em;
  color: #000000;
}
.tcr-info-left { display: flex; align-items: flex-end; gap: 0.6em; }
.tcr-illustrator { font-style: italic; font-weight: 700; }
.tcr-card-number { font-style: italic; font-weight: 800; }
.tcr-info-right { display: flex; align-items: center; gap: 0.3em; }
.tcr-regulation {
  background: #000000;
  color: #FFFFFF;
  font-weight: 800;
  padding: 0.05em 0.25em;
  border-radius: 0.15em;
  -webkit-text-stroke: 0 transparent;
}
.tcr-rarity-symbol { font-size: 1.1em; }

/* ── Modus „Fertiges Bild“: nur das hochgeladene Bild, randlos ─────────── */
.tcr-card.tcr-full-image .tcr-frame,
.tcr-card.tcr-full-image .tcr-content,
.tcr-card.tcr-full-image .tcr-prevolve-img { display: none; }
.tcr-card.tcr-full-image .tcr-art { top: 0; left: 0; width: 100%; height: 100%; }

/* Freie Felder (modulare Kartenfelder) */
.tcr-field { position: absolute; z-index: 12; line-height: 1.15; overflow: hidden; }
.tcr-field-text { white-space: nowrap; }
.tcr-field-textarea { white-space: pre-wrap; overflow-wrap: anywhere; }
.tcr-field-symbol img, .tcr-field-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tcr-field-image img { object-fit: cover; }
.tcr-field-empty { outline: 1px dashed rgba(0, 0, 0, .35); outline-offset: -1px; background: rgba(255, 255, 255, .25); }
.tcr-field.tcr-ph { opacity: .45; }

/* Rahmen mit heller Schrift (layout.textColor) – alle Texte in der Rahmenfarbe, Kontur aus outlineColor */
.tcr-face.tcr-hell .tcr-content, .tcr-face.tcr-hell .tcr-content * { color: var(--tcr-text-color) !important; }

/* Hintergrund des Rahmens hinter dem (freigestellten) Motiv */
.tcr-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }