/* =====================================================================
   CODEX-BILDER (app/codex-art.js): Mini-Brett, Mana-Leiste, Effekt-Chips
   im Look des echten Spiels. Farben wie am Brett: Gold = Zug, Rot = Schlag,
   Blau (Brett-Teal) = Faehigkeit. Jedes Bild spielt seinen Moment einmal,
   sobald seine Regel-Karte ins Bild kommt (.cx-rule.is-live); vorher steht
   es im Ausgangszustand, danach still im Endzustand.
   ===================================================================== */

/* ── Mini-Brett (Look wie .fc-mini-board / #board) ── */
.codex .cx-board {
  --sq: 38px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--sq));
  grid-template-rows: repeat(var(--rows), var(--sq));
  gap: 1px;
  padding: 4px;
  border: 2px solid var(--rift-gold);
  border-radius: 6px;
  background: var(--mp-board-frame);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .86),
    0 10px 24px rgba(0, 0, 0, .45),
    inset 0 0 0 1px rgba(240, 210, 131, .22);
}
.codex .cx-board--goal { --sq: 48px; }
.codex .cx-board--moves { --sq: 36px; }
.codex .cx-sq { position: relative; display: grid; place-items: center; background: var(--mp-sq-dark); }
.codex .cx-sq.is-light { background: var(--mp-sq-light); }
.codex .cx-pc {
  position: relative;
  z-index: 1;
  width: 90%;
  height: 90%;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .7));
}

/* Ausgewaehlte Figur: Teal-Feld, Figur leicht angehoben (wie im Spiel). */
.codex .cx-sq.is-selected {
  background: linear-gradient(rgba(77, 208, 196, .22), rgba(77, 208, 196, .22)), var(--mp-sq-dark);
  box-shadow: inset 0 0 0 1px rgba(77, 208, 196, .7);
}
.codex .cx-sq.is-selected .cx-pc { translate: 0 -6%; scale: 1.06; }

/* Zugpunkte: Gold = Zug, Teal = Faehigkeit; Schlag = rotes Fadenkreuz aus vier Ecken. */
.codex .cx-mk { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.codex .cx-mk.is-move { background: radial-gradient(circle, rgba(236, 200, 110, .95) 0 12%, rgba(216, 177, 90, .35) 13% 19%, transparent 20%); }
.codex .cx-mk.is-ability { background: radial-gradient(circle, rgba(120, 236, 224, .95) 0 12%, rgba(77, 208, 196, .35) 13% 19%, transparent 20%); }
.codex .cx-mk.is-capture {
  --ret: rgba(255, 96, 96, .95);
  inset: 5%;
  border-radius: 4px;
  background:
    linear-gradient(var(--ret), var(--ret)) left top / 28% 2px no-repeat,
    linear-gradient(var(--ret), var(--ret)) left top / 2px 28% no-repeat,
    linear-gradient(var(--ret), var(--ret)) right top / 28% 2px no-repeat,
    linear-gradient(var(--ret), var(--ret)) right top / 2px 28% no-repeat,
    linear-gradient(var(--ret), var(--ret)) left bottom / 28% 2px no-repeat,
    linear-gradient(var(--ret), var(--ret)) left bottom / 2px 28% no-repeat,
    linear-gradient(var(--ret), var(--ret)) right bottom / 28% 2px no-repeat,
    linear-gradient(var(--ret), var(--ret)) right bottom / 2px 28% no-repeat,
    radial-gradient(circle, transparent 42%, rgba(226, 70, 70, .3) 100%);
  filter: drop-shadow(0 0 3px rgba(255, 90, 90, .7));
}
.codex .cx-rule:not(.is-live) .cx-mk { opacity: 0; scale: 0; }
.codex .cx-rule.is-live .cx-mk {
  animation: cxDotIn 340ms cubic-bezier(.3, 1.6, .5, 1) both;
  animation-delay: calc(260ms + var(--d) * 110ms);
}
@keyframes cxDotIn {
  from { opacity: 0; scale: 0; }
  to { opacity: 1; scale: 1; }
}

/* Matt: die Dame setzt auf, danach glueht das Feld des Koenigs tiefrot. */
.codex .cx-sq.is-mated::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 58%, rgba(205, 40, 40, .55), rgba(120, 12, 12, .3) 58%, transparent 88%);
  box-shadow: inset 0 0 0 1px rgba(224, 86, 79, .65), inset 0 0 14px rgba(160, 20, 20, .55);
  opacity: 0;
}
.codex .cx-rule:not(.is-live) .cx-sq.is-arrive .cx-pc { opacity: 0; }
.codex .cx-rule.is-live .cx-sq.is-arrive .cx-pc { animation: cxPlace 560ms cubic-bezier(.2, .9, .3, 1.15) 180ms both; }
.codex .cx-rule.is-live .cx-sq.is-mated::before { animation: cxMate 900ms ease 700ms both; }
.codex .cx-rule.is-live .cx-sq.is-mated .cx-pc { animation: cxMateKing 900ms ease 700ms both; }
@keyframes cxPlace {
  from { opacity: 0; translate: 0 -34%; scale: 1.18; }
  60% { opacity: 1; translate: 0 3%; scale: .98; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes cxMate { from { opacity: 0; } to { opacity: 1; } }
@keyframes cxMateKing {
  from { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .7)); }
  to { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .7)) drop-shadow(0 0 6px rgba(230, 60, 60, .55)); }
}

/* ── Mana: Kopf der eigenen Effektleiste (Kristall-Raute + Leiste + Zahl) ── */
.codex .cx-mana {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 184px;
  padding: 16px 14px;
  border: 1px solid rgba(77, 208, 196, .38);
  background: linear-gradient(180deg, rgba(10, 22, 26, .92), rgba(6, 10, 13, .96));
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
}
.codex .cx-gem { position: relative; display: grid; place-items: center; width: 40px; height: 40px; flex: none; }
.codex .cx-gem::before {
  content: "";
  position: absolute;
  inset: 4px;
  rotate: 45deg;
  border: 1px solid var(--mp-gold-2);
  background: rgba(8, 10, 14, .9);
}
.codex .cx-gem-img { position: relative; width: 24px; height: 24px; object-fit: contain; }
.codex .cx-mana-main { display: grid; gap: 8px; flex: 1; min-width: 0; }
.codex .cx-mana-bar { position: relative; display: flex; gap: 3px; }
.codex .cx-pip { flex: 1 1 0; height: 5px; background: rgba(77, 208, 196, .13); }
.codex .cx-pip.is-full,
.codex .cx-rule.is-live .cx-pip.is-gain {
  background: linear-gradient(180deg, #7ff4e9, #43c7bd);
  box-shadow: 0 0 6px rgba(77, 208, 196, .54);
}
.codex .cx-rule.is-live .cx-pip.is-gain { animation: cxPipFill 700ms ease 700ms both; }
@keyframes cxPipFill {
  from { background: rgba(77, 208, 196, .13); box-shadow: none; }
  40% { box-shadow: 0 0 14px rgba(127, 244, 233, .95); }
}
/* „+1" steigt ueber dem fuenften Segment auf und verblasst. */
.codex .cx-plus {
  position: absolute;
  left: 56%;
  bottom: 8px;
  translate: -50% 0;
  font-family: var(--mp-mono);
  font-size: 11px;
  color: var(--mp-teal-1);
  text-shadow: 0 0 8px rgba(77, 208, 196, .7);
  opacity: 0;
}
.codex .cx-rule.is-live .cx-plus { animation: cxPlus 1300ms ease 520ms both; }
@keyframes cxPlus {
  0% { opacity: 0; translate: -50% 4px; }
  30% { opacity: 1; }
  100% { opacity: 0; translate: -50% -14px; }
}
.codex .cx-mana-num { display: flex; justify-content: flex-end; font-family: var(--mp-mono); font-size: 13px; line-height: 1; color: var(--mp-teal-1); }
.codex .cx-mana-num .cap { color: var(--mp-ink-faint, #4a4537); }
.codex .cx-roll { display: inline-grid; height: 1em; overflow: hidden; }
.codex .cx-roll > span { display: block; height: 1em; }
.codex .cx-rule.is-live .cx-roll > span { animation: cxRoll 420ms cubic-bezier(.3, .8, .3, 1) 760ms both; }
@keyframes cxRoll { to { translate: 0 -100%; } }

/* ── Effektleiste: zwei Chips, die Galeone wird bereit ── */
.codex .cx-rail { display: grid; gap: 7px; width: 188px; }
.codex .cx-chip {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 6px 8px 6px 6px;
  overflow: hidden;
  border: 1px solid rgba(216, 177, 90, .16);
  background: rgba(10, 13, 18, .9);
  opacity: .55;
  filter: grayscale(.55);
}
.codex .cx-chip-pt { width: 32px; height: 32px; overflow: hidden; border: 1px solid rgba(216, 177, 90, .28); }
.codex .cx-chip-img, .codex .cx-coin .cx-chip-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.codex .cx-chip-tx { display: grid; gap: 3px; min-width: 0; }
.codex .cx-chip-tx .nm { font-family: var(--mp-sans); font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mp-bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.codex .cx-chip-tx .ab { font-family: var(--mp-sans); font-size: 8.5px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--mp-ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.codex .cx-orb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px 2px 4px;
  border: 1px solid rgba(77, 208, 196, .5);
  border-radius: 999px;
  background: rgba(6, 10, 13, .9);
  font-family: var(--mp-mono);
  font-size: 10px;
  line-height: 1;
  color: var(--mp-teal-1);
}
.codex .cx-orb .dot { width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #9ee9e0, #2c8a82); }
.codex .cx-chip:not(.is-ready) .cx-orb, .codex .cx-coin:not(.is-ready) .cx-orb { border-color: rgba(160, 130, 220, .4); color: #b9a6e6; }
.codex .cx-chip:not(.is-ready) .cx-orb .dot, .codex .cx-coin:not(.is-ready) .cx-orb .dot { background: radial-gradient(circle at 35% 30%, #c9b4f2, #5b4691); }
/* Bereit: Teal-Rand, Lichtstreif laeuft einmal durch (wie effectJustReady). */
.codex .cx-rule.is-live .cx-chip.is-ready {
  border-color: rgba(77, 208, 196, .7);
  background: linear-gradient(90deg, rgba(77, 208, 196, .13), rgba(10, 13, 18, .9) 72%);
  box-shadow: 0 0 0 1px rgba(77, 208, 196, .22), 0 0 16px rgba(77, 208, 196, .16);
  opacity: 1;
  filter: none;
  transition: opacity 500ms ease 300ms, filter 500ms ease 300ms, border-color 500ms ease 300ms, box-shadow 500ms ease 300ms, background 500ms ease 300ms;
}
.codex .cx-chip.is-ready::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(170, 255, 246, .28) 50%, transparent 70%);
  translate: -110% 0;
  pointer-events: none;
}
.codex .cx-rule.is-live .cx-chip.is-ready::after { animation: cxSweep 900ms ease 650ms both; }
@keyframes cxSweep { to { translate: 110% 0; } }

/* Handy: runde Portraits mit Kosten-Kugel (wie unter der Spielerleiste). */
.codex .cx-coins { gap: 16px; align-items: center; }
.codex .cx-coin {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2px solid rgba(216, 177, 90, .3);
  opacity: .55;
  filter: grayscale(.55);
}
.codex .cx-coin .cx-chip-img { border-radius: 50%; }
.codex .cx-coin .cx-orb { position: absolute; top: -8px; right: -12px; }
.codex .cx-rule.is-live .cx-coin.is-ready {
  border-color: rgba(77, 208, 196, .85);
  box-shadow: 0 0 0 2px rgba(77, 208, 196, .3), 0 0 16px rgba(77, 208, 196, .4);
  opacity: 1;
  filter: none;
  transition: opacity 500ms ease 300ms, filter 500ms ease 300ms, border-color 500ms ease 300ms, box-shadow 500ms ease 300ms;
}

@media (prefers-reduced-motion: reduce) {
  .codex .cx-rule.is-live .cx-mk,
  .codex .cx-rule.is-live .cx-sq.is-arrive .cx-pc,
  .codex .cx-rule.is-live .cx-sq.is-mated::before,
  .codex .cx-rule.is-live .cx-sq.is-mated .cx-pc,
  .codex .cx-rule.is-live .cx-pip.is-gain,
  .codex .cx-rule.is-live .cx-roll > span,
  .codex .cx-rule.is-live .cx-chip.is-ready::after { animation-duration: 1ms; animation-delay: 0ms; }
  .codex .cx-rule.is-live .cx-plus { animation: none; }
  .codex .cx-rule.is-live .cx-chip.is-ready,
  .codex .cx-rule.is-live .cx-coin.is-ready { transition: none; }
}