/* Leiter der Computer-Gegner (play-ladder.js, end-screen-ladder.js).
   Rauten wie die Profilbilder (avatar-diamond.css): Goldrand als Hintergrund,
   Portraet als eingerueckte zweite Raute. Geschlagene tragen einen kleinen
   Haken, gesperrte liegen dunkel hinter einem Schloss; der goldene Pfad reicht
   bis zum hoechsten offenen Gegner. */
.duell .lad-row {
  --gem: 46px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 330px;
  padding: 4px 0 6px;
}
.duell .lad-row::before,
.duell .lad-row::after {
  content: '';
  position: absolute;
  left: calc(var(--gem) / 2);
  top: calc(4px + var(--gem) / 2);
  height: 1px;
  pointer-events: none;
}
.duell .lad-row::before { right: calc(var(--gem) / 2); background: rgba(216, 177, 90, 0.16); }
.duell .lad-row::after {
  width: calc((100% - var(--gem)) * (var(--open, 1) - 1) / (var(--n, 5) - 1));
  background: linear-gradient(90deg, rgba(216, 177, 90, 0.7), rgba(240, 210, 122, 0.9));
  transition: width 600ms cubic-bezier(.22, .8, .24, 1);
}

.duell .lad-step {
  position: relative;
  z-index: 1;
  width: var(--gem);
  height: var(--gem);
  padding: 0;
  border: 0;
  background: none;
  cursor: var(--mp-cur-pointer);
  transition: transform 220ms cubic-bezier(.22, .8, .24, 1);
}
.duell .lad-step:hover:not(.is-locked) { transform: translateY(-2px); }
.duell .lad-step.active { transform: scale(1.14); }
.duell .lad-step.active:hover { transform: scale(1.14) translateY(-2px); }
.duell .lad-step.is-locked { cursor: var(--mp-cur-arrow); }

.lad-gem {
  --rim: 1.5px;
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: rgba(216, 177, 90, 0.34);
  transition: background 220ms ease;
}
.lad-gem > img {
  position: absolute;
  inset: var(--rim);
  width: calc(100% - 2 * var(--rim));
  height: calc(100% - 2 * var(--rim));
  object-fit: cover;
  object-position: 50% 26%;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: #14171f;
  transition: filter 300ms ease;
}
.lad-step.is-done .lad-gem { background: var(--mp-gold-2, #b8923f); }
.lad-step.active .lad-gem { --rim: 2.5px; background: linear-gradient(180deg, #f0d27a, #c89a3e); }
.lad-step.is-locked .lad-gem { background: rgba(216, 177, 90, 0.12); }
.lad-step.is-locked .lad-gem > img { filter: grayscale(1) brightness(0.32); }

.lad-mark,
.lad-lock {
  position: absolute;
  left: 50%;
  display: grid;
  place-items: center;
  pointer-events: none;
}
/* Haken: kleine Gold-Raute am unteren Spitz. */
.lad-mark {
  bottom: -5px;
  width: 15px;
  height: 15px;
  translate: -50% 0;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: linear-gradient(180deg, #f0d27a, #c89a3e);
  color: #0c0e13;
}
.lad-mark svg { width: 8px; height: 8px; }
.lad-lock {
  top: 50%;
  translate: -50% -50%;
  color: var(--mp-ink-dim, #8a8f9a);
}

body.mp-phone.mode-play .duell .lad-row { --gem: 42px; max-width: none; }

/* Endbildschirm: der naechste Gegner steigt aus dem Dunkel (einmal, ruhig). */
.eg-foe {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 2px 4px;
}
.eg-foe .lad-step {
  position: relative;
  flex: none;
  width: 52px;
  height: 52px;
}
.eg-foe .lad-gem { --rim: 2px; background: linear-gradient(180deg, #f0d27a, #c89a3e); }
.eg-foe-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.eg-foe-label {
  font-size: 9px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mp-gold-1, #d8b15a);
}
.eg-foe-name { font-family: var(--mp-serif, Georgia, serif); font-size: 19px; color: var(--mp-bone, #efe6d2); }
.eg-foe.is-fresh .lad-gem > img { animation: eg-foe-wake 1400ms 900ms cubic-bezier(.22, .8, .24, 1) both; }
.eg-foe.is-fresh .eg-foe-text { animation: eg-foe-text 700ms 1500ms ease-out both; }
@keyframes eg-foe-wake {
  from { filter: grayscale(1) brightness(0.3); }
  to { filter: none; }
}
@keyframes eg-foe-text {
  from { opacity: 0; translate: -6px 0; }
  to { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .duell .lad-row::after, .duell .lad-step, .lad-gem, .lad-gem > img { transition: none; }
  .eg-foe.is-fresh .lad-gem > img, .eg-foe.is-fresh .eg-foe-text { animation: none; }
}