.character-card-open {
    overflow: hidden;
}



.cc_short {
text-align: justify;
  line-height: 170%;
  height: 220px;
  overflow: auto;
  padding-right: 10px;
  margin-top: 20px;
  font-size: 12px;
}

.character-card-overlay {
    position: fixed;
    inset: 0;
    z-index: 99998;
    opacity: 0;
    visibility: hidden;
    background: rgba(31, 27, 23, 0.42);
    backdrop-filter: blur(2px);
    transition: opacity .25s ease, visibility .25s ease;
}

.character-card-overlay[data-disabled="1"] {
    display: none;
}

.character-card-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.character-card {
    position: fixed;
  top: 0;
  bottom: 0;
  z-index: 99999;
  width: min(var(--character-card-width, 360px), 94vw);
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--accent1);
  color: var(--maincolor);
  box-shadow: 0 0 48px rgba(25, 20, 15, .24);
  transition: transform .3s ease;
  border-right: 1px solid var(--line1);
}

.character-card--left { left: 0; transform: translateX(-105%); }
.character-card--right { right: 0; transform: translateX(105%); }
.character-card.is-open { transform: translateX(0); }

.character-card__close {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 3;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(49, 45, 40, .08);
    color: inherit;
    font: inherit;
    font-size: 26px;
    cursor: pointer;
}

.character-card__close:focus-visible,
.character-card__profile-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.character-card__status {
    padding: 76px 28px 20px;
    text-align: center;
}

.character-card__status:empty { display: none; }
.character-card__content { padding: 56px 28px 34px; }
.character-card__header { text-align: center; }
.character-card__avatar { display: flex; justify-content: center; margin-bottom: 18px; }
.character-card__avatar img,
.character-card__avatar-placeholder {
 width: 136px;
  height: 136px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid var(--accent2);
}
.character-card__avatar-placeholder { display: grid; place-items: center; background: rgba(49,45,40,.09); font-size: 42px; }
.character-card__eyebrow { display: block; margin-bottom: 5px; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; opacity: .58; }

.character-card__identity h2 { 
margin: 0;
  font-size: 25px;
  line-height: 1.2;
  font-family: var(--mainfont);
  text-transform: uppercase;
}

.character-card__online { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.character-card__online::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.character-card__online--yes { color: #548b65; }
.character-card__online--no { color: #8d8580; }
.character-card__subtitle { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; opacity: .72; }
.character-card__subtitle-separator { opacity: .5; }
.character-card__facts { margin: 27px 0; border-top: 1px solid rgba(49,45,40,.13); }
.character-card__fact { padding: 12px 0; border-bottom: 1px solid rgba(49,45,40,.13); }
.character-card__fact-label { display: block; margin-bottom: 3px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .58; }
.character-card__fact-value { line-height: 1.55; }
.character-card__summary { margin: 24px 0; line-height: 1.75; }
.character-card__summary h3 { margin: 0 0 8px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.character-card__profile-link { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; padding: 16px 0 5px; border-top: 1px solid rgba(49,45,40,.16); color: inherit; text-decoration: none; font-weight: 700; }
.character-card__message { padding: 76px 28px 30px; text-align: center; line-height: 1.6; }
.character-card-link { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
    .character-card,
    .character-card-overlay { transition: none; }
}

@media (max-width: 480px) {
    .character-card { width: 100%; max-width: none; }
    .character-card__content { padding-left: 22px; padding-right: 22px; }
}


.character-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.character-card__chip {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(49, 45, 40, .08);
    font-size: 11px;
}