/* Live-Figurenkarte: Aktionsart ohne Beschriftung (render/live-card-act.js).
   Farbsprache wie am Brett: Bewegung gold, Schlag rot, Faehigkeit blau (--ac
   setzt live-card.js je Karte). Einmal-Animationen nur mit .lcx-act-play; die
   negative Verzoegerung --mp-t setzt sie nach einem Neuaufbau an ihrer Stelle fort. */

/* ---- Eckwinkel: oben rechts + unten links wie am Zielfeld des letzten Zugs ----
   Nur diese zwei, wie am Brett; die vier feinen Gold-Ecken behalten Karten ohne
   Zug (gewaehlte oder angesehene Figur). Buendig auf dem Rand, nichts ragt
   ueber die Karte hinaus (sonst scrollt die Akademie-Leiste seitlich). */
.lcxDock :where(.fc-card.lcx-act) {
  border-color: color-mix(in srgb, var(--ac) 34%, rgba(216, 177, 90, 0.3));
}
.lcxDock .fc-card.lcx-act > .fc-corner:is(.tl, .br) { display: none; }
.lcxDock .fc-card.lcx-act > .fc-corner:is(.tr, .bl) {
  width: 24px;
  height: 24px;
  border-width: 2px;
  border-color: var(--ac);
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--ac) 75%, transparent));
}
.lcxDock .fc-card.lcx-act-play > .fc-corner.tr {
  animation: lcxCornerSnapTr 460ms cubic-bezier(.2, 1.5, .4, 1) calc(140ms + var(--mp-t, 0ms)) both;
}
.lcxDock .fc-card.lcx-act-play > .fc-corner.bl {
  animation: lcxCornerSnapBl 460ms cubic-bezier(.2, 1.5, .4, 1) calc(200ms + var(--mp-t, 0ms)) both;
}
@keyframes lcxCornerSnapTr {
  0%   { opacity: 0; translate: 7px -7px; }
  60%  { opacity: 1; translate: -1px 1px; }
  100% { opacity: 1; translate: 0 0; }
}
@keyframes lcxCornerSnapBl {
  0%   { opacity: 0; translate: -7px 7px; }
  60%  { opacity: 1; translate: 1px -1px; }
  100% { opacity: 1; translate: 0 0; }
}

/* ---- Geschlagene Figur: erloschene Raute rechts im Kartenkopf ---- */
.lcx-victim {
  --vc: #e8746a;
  position: relative;
  flex-shrink: 0;
  align-self: center;
  width: 50px;
  height: 50px;
  margin: -7px 1px -8px 0;
  display: grid;
  place-items: center;
}
.lcx-victim-gem {
  position: relative;
  width: 36px;
  height: 36px;
  overflow: hidden;
  transform: rotate(45deg);
  border: 1.5px solid color-mix(in srgb, var(--vc) 80%, transparent);
  background: radial-gradient(circle at 50% 40%, rgba(232, 116, 106, 0.2), rgba(9, 10, 14, 0.95) 76%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.65), 0 0 10px -3px color-mix(in srgb, var(--vc) 85%, transparent), inset 0 0 8px rgba(0, 0, 0, 0.75);
}
/* Absolut und gleich weit nach allen Seiten ueberstehend: im Grid lief das
   uebergrosse Bild aus der Mitte (nach links unten). Die Figurenbilder sind
   selbst mittig freigestellt, also genuegt die Boxmitte. */
.lcx-victim-gem img {
  position: absolute;
  left: -14%;
  top: -14%;
  width: 128%;
  height: 128%;
  object-fit: contain;
  transform: rotate(-45deg);
  filter: grayscale(1) brightness(0.86);
  opacity: 0.9;
  pointer-events: none;
}
.lcx-victim-slash {
  position: absolute;
  left: 3px;
  right: 3px;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, #ffb0a5 16%, var(--vc) 50%, #ffb0a5 84%, transparent);
  box-shadow: 0 0 5px rgba(232, 116, 106, 0.85);
  transform: rotate(-45deg);
}
/* Dunkle Figuren erloeschen zu hellerem Aschgrau, sonst verschwinden sie im Grund. */
.lcx-victim.is-b .lcx-victim-gem img { filter: grayscale(1) brightness(2) contrast(0.85); }
/* Skelett im zweiten Leben: getroffen, aber nicht erloschen. */
.lcx-victim.survived .lcx-victim-gem img { filter: none; }
.lcx-victim.survived .lcx-victim-slash { opacity: 0.6; }

/* Ablauf: Raute erscheint, Hieb zieht durch, Raute zuckt, Figur erlischt. */
.lcx-victim.play { animation: lcxVictimJolt 300ms ease-out calc(640ms + var(--mp-t, 0ms)) both; }
.lcx-victim.play .lcx-victim-gem { animation: lcxVictimIn 380ms cubic-bezier(.2, .9, .3, 1.2) calc(160ms + var(--mp-t, 0ms)) both; }
.lcx-victim.play .lcx-victim-slash { animation: lcxVictimSlash 200ms cubic-bezier(.5, 0, .2, 1) calc(520ms + var(--mp-t, 0ms)) both; }
.lcx-victim.play:not(.survived) .lcx-victim-gem img { animation: lcxVictimFade 520ms ease-out calc(700ms + var(--mp-t, 0ms)) both; }
@keyframes lcxVictimIn {
  0%   { opacity: 0; transform: rotate(45deg) scale(1.6); }
  100% { opacity: 1; transform: rotate(45deg) scale(1); }
}
/* Hieb von oben rechts nach unten links (clip-path wirkt vor der Drehung). */
@keyframes lcxVictimSlash {
  0%   { clip-path: inset(0 0 0 100%); filter: brightness(2.2); }
  100% { clip-path: inset(0 0 0 0); filter: brightness(1); }
}
@keyframes lcxVictimFade {
  from { filter: grayscale(0) brightness(1.1) contrast(1); opacity: 1; }
}
@keyframes lcxVictimJolt {
  0%, 100% { translate: 0 0; }
  25% { translate: 2px -2px; }
  55% { translate: -1px 1px; }
}

/* ---- Eingesetzte Faehigkeit: ihre Zeile leuchtet, das Symbol ist gezuendet ---- */
.lcxDock .fc-power.lcx-power-lit:not(.kind-none) {
  border-color: color-mix(in srgb, var(--pk) 58%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--pk) 24%, transparent), color-mix(in srgb, var(--pk) 5%, transparent) 85%);
  box-shadow: inset 0 0 18px -10px var(--pk), 0 0 16px -9px var(--pk);
}
/* Die Fuellung liegt auf einer eigenen Ebene: so blendet sie weich ein (ein
   Verlauf laesst sich nicht aus "kein Bild" heraus animieren). */
.lcxDock .fc-power.lcx-power-lit:not(.kind-none) .fc-power-ico {
  position: relative;
  isolation: isolate;
  color: #0c0e13;
  border-color: color-mix(in srgb, var(--pk) 70%, white);
}
.lcxDock .fc-power.lcx-power-lit:not(.kind-none) .fc-power-ico::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--pk) 65%, white), var(--pk) 72%);
}
.lcxDock .fc-power.lcx-power-used:not(.kind-none) {
  animation: lcxPowerUsed 1.9s ease-out calc(380ms + var(--mp-t, 0ms)) both;
}
.lcxDock .fc-power.lcx-power-used:not(.kind-none) .fc-power-ico {
  animation: lcxPowerIgnite 520ms ease-out calc(380ms + var(--mp-t, 0ms)) backwards;
}
.lcxDock .fc-power.lcx-power-used:not(.kind-none) .fc-power-ico::before {
  animation: lcxFadeIn 520ms ease-out calc(380ms + var(--mp-t, 0ms)) backwards;
}
@keyframes lcxPowerIgnite {
  from { color: var(--pk); }
}

@media (prefers-reduced-motion: reduce) {
  .lcxDock .fc-card.lcx-act-play > .fc-corner,
  .lcx-victim.play,
  .lcx-victim.play *,
  .lcxDock .fc-power.lcx-power-used .fc-power-ico,
  .lcxDock .fc-power.lcx-power-used .fc-power-ico::before { animation: none !important; }
}