/* Shared by all pages, including portraits loaded into the tavern inspection dialog. */
.framed-character {
    --portrait-size: 80px;
    position: relative;
    display: inline-block;
    width: var(--portrait-size);
    height: var(--portrait-size);
    flex: 0 0 var(--portrait-size);
    vertical-align: middle;
    isolation: isolate;
}
.framed-character.framed-character > .framed-character-avatar {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    object-fit: cover;
    border: 1px solid #64532b;
    border-radius: 6px;
    background: #090909;
}
.framed-character.framed-character.has-character-frame > .framed-character-avatar {
    inset: 18%;
    width: 64%;
    height: 64%;
    border: 0;
    border-radius: 0;
}
.framed-character.framed-character > .framed-character-decoration {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    object-fit: contain;
    pointer-events: none;
    z-index: 1;
}
.framed-character.framed-character > .framed-character-decoration[hidden] { display: none; }
.framed-character--account { --portrait-size: 110px; }
.framed-character--fight { --portrait-size: 80px; }
.framed-character--turn { --portrait-size: 28px; }
.framed-character--region { --portrait-size: 58px; }
.framed-character--beta { --portrait-size: 46px; }
.framed-character--moderation { --portrait-size: 52px; }
.framed-character--inspect { --portrait-size: 160px; max-width: 100%; }
.turn-slot > .framed-character { margin: 0; }
@media (max-width: 900px) {
    .mobile-dashboard .framed-character--fight { --portrait-size: 56px; }
}
@media (max-width: 860px) {
    .framed-character--inspect { --portrait-size: 120px; }
}
@media (max-width: 540px) {
    .framed-character--inspect { --portrait-size: 88px; }
}