.character-portrait-placeholder {
    display: grid;
    width: 100%;
    aspect-ratio: 4 / 5;
    place-content: center;
    justify-items: center;
    gap: 12px;
    padding: 24px;
    border-radius: 7px;
    background: radial-gradient(circle at 50% 38%, rgba(244, 212, 124, .16), transparent 34%), linear-gradient(145deg, #101827, #182438);
    color: #f4d47c;
    text-align: center;
}

.character-portrait-placeholder[hidden] {
    display: none;
}

.character-portrait-placeholder strong {
    font-size: clamp(48px, 7vw, 72px);
    line-height: 1;
    text-shadow: 0 0 12px rgba(244, 212, 124, .42);
}

.character-portrait-placeholder small {
    font-family: var(--title-font);
    font-size: 15px;
    letter-spacing: .7px;
    color: #fff0ad;
}

.portrait-card.is-missing {
    cursor: default;
}

.portrait-card.is-missing:hover {
    transform: none;
}

.character-directory-image-wrap.is-missing {
    display: grid;
    place-items: center;
    min-height: 260px;
    background: radial-gradient(circle at 50% 38%, rgba(244, 212, 124, .15), transparent 35%), linear-gradient(145deg, #101827, #182438);
}

.character-directory-image-wrap.is-missing::after {
    content: "✦";
    font-size: 54px;
    line-height: 1;
    color: #f4d47c;
    text-shadow: 0 0 12px rgba(244, 212, 124, .42);
}