/* Ausschließlich der aktive Fokuszustand; der Platz der Originalkarte bleibt bestehen. */
.character-focus-source { visibility: hidden; }
.character-focus-veil {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(41, 30, 23, .34);
  opacity: 0; pointer-events: none;
  transition: opacity 650ms cubic-bezier(.22,.68,.18,1);
}
.character-focus-veil.is-visible { opacity: 1; pointer-events: auto; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.character-focus-viewport {
  position: fixed; inset: 0; z-index: 1001; pointer-events: none;
}
.character-focus-frame {
  position: absolute; left: 50%; top: 50%; width: 820px;
  pointer-events: auto; transform: scale(var(--character-focus-scale, 1));
  transform-origin: center center;
}
.character.character-focus-panel {
  position: relative;
  z-index: auto;
  inset: auto;
  margin: 0;
  width: 820px;
  padding: 28px 36px 32px;
  background: #fffdf8;
  height: fit-content;
  max-height: none;
  overflow: visible;
  transform-origin: center center;
  box-shadow: 0 20px 70px #392b3059;
  cursor: zoom-out;
}
.character-focus-panel .character-picture {
  height: 500px;
  padding-bottom: 0;
  background: transparent;
}
.character-focus-panel h2 { font-size: 2rem; text-align: center; margin: 16px auto 12px; }
.character-focus-panel p { max-width: 700px; margin: 0 auto; font-size: 1.18rem; line-height: 1.65; text-align: justify; text-align-last: left; hyphens: auto; overflow-wrap: break-word; }
.character-focus-panel:focus { outline: none; }
.character-focus-panel:focus-visible { outline: 2px solid #915341; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .character-focus-veil { transition: none; }
}

/* Nur vorübergehende Lichtpunkte während der Kartenbewegung. */
.character-focus-dust {
  position: fixed; left: 0; top: 0; z-index: 1100;
  pointer-events: none; border-radius: 50%;
  background: var(--dust-color, #fff5d6);
  box-shadow: 0 0 9px 3px #fff2cbe6, 0 0 20px 5px #ffd58ba6;
  opacity: 0;
}

.character-focus-dust.is-spark {
  border-radius: 0;
  clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
  filter: drop-shadow(0 0 7px #ffe9ac);
}