:root {
    --player-portrait-aspect-ratio: 5 / 4;
}

.player-portrait {
    display: inline-block;
    flex: 0 0 auto;
    width: 3rem;
    max-width: 100%;
    aspect-ratio: var(--player-portrait-aspect-ratio);
    border-radius: .25rem;
    overflow: hidden;
    vertical-align: middle;
}

.player-portrait--empty {
    background: var(--theme-surface-alt, #1b211e);
    box-shadow: inset 0 0 0 1px var(--theme-border, #303934);
}

.player-portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.player-portrait__fallback {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: var(--theme-muted, #ada99e);
    font: 500 1.25em Georgia, serif;
}

.player-identity { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.player-identity > .player-portrait { width: 12rem; }
.player-identity__copy { flex: 1 1 14rem; min-width: 0; }
.player-favorite-card { display: flex; flex-wrap: wrap; gap: .25rem .65rem; margin: .85rem 0 0; color: var(--theme-muted, #ada99e); font-size: .85rem; }
.player-picture-action { display: inline-block; margin-top: 1rem; font-size: .85rem; }
.player-picture-action:focus-visible { outline: 2px solid #d7b46a; outline-offset: 4px; }
.leaderboard-player { display: inline-flex; align-items: center; gap: .65rem; max-width: 100%; vertical-align: middle; }
.leaderboard-player > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.contender-creator { display: inline-flex; align-items: center; gap: .5rem; vertical-align: middle; }
.contender-creator .player-portrait { width: 2.5rem; }
@media (max-width: 650px) {
    .player-identity { gap: 1rem; }
    .player-identity > .player-portrait { width: 8rem; }
    .leaderboard-player { gap: .45rem; }
    .leaderboard-player .player-portrait { width: 2.5rem; }
}