/*----------------------------КАРТОЧКА ПЕРСОНАЖА---------------------------------*/
/* Карточка персонажа - десктоп */

/* ===== БАЗА (общие стили карточки) ===== */
.person-img img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.person-info {
    display: flex;
    justify-content: flex-start;
    gap: 22px;
}

.person-img br { display: none; }

.person-list b {
    text-transform: uppercase;
    color: #ffcf70;
    font-size: 17px;
}

.person-list i {
    font-style: normal !important;
    font-size: 14px;
    font-weight: 500;
}

.peron-about {
    padding: 10px;
    border: 1px solid #ffcf706e;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    max-height: 100px;
    overflow-y: auto;
}

.achive-lslist {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    height: 147px;
    overflow-y: auto;
    justify-content: flex-start;
    align-items: flex-start;
}

.achive-lslist img {
    width: 100%;
    object-fit: contain;
    height: 100%;
}

.plashk-lslist {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    justify-content: flex-start;
    height: 147px;
    overflow-y: auto;
    padding-right: 4px;
}

.plashk-lslist img {
    width: 180px;
    max-height: 40px;
    object-fit: contain;
}

.way-info {
    display: flex;
    gap: 10px;
    padding: 10px;
    align-items: flex-start;
    border: 1px solid #ffcf7070;
    max-width: 500px;
    margin: 0px 8px 8px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.way-text b {
    text-transform: uppercase;
    color: #ffcf70;
}

.way-img {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
}

.way-img img {
    width: 34px;
    height: 34px;
    border-radius: 3px;
    border: 1px solid #ffcf704a;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    display: block;
}

.way-list {
    height: 147px;
    overflow-y: auto;
    padding: 0;
    margin: 0;
}

/* ===== КАРТОЧКА В ТЕМЕ (оформление как у модалки) ===== */
.character{
    position: relative;
    margin: 12px auto;
    background: url(https://forumstatic.ru/files/001c/37/ca/60359.webp) bottom center no-repeat;
    background-size: cover;
    border-radius: 18px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    max-width: 660px;
    width: min(90vw, 660px);

    /* ✅ В ТЕМЕ: верхний отступ = 0 */
    padding: 0px 0px 18px 0px;
}

.character img{ max-width: 100%; }

/* &#9989; В ТЕМЕ: если форум/редактор подкидывает <br> прямо внутри .character */
.character > br{ display:none !important; }
.character .ls-name + br{ display:none !important; }

/* Заголовок */
.ls-name {
    color: #ffcf70;
    text-transform: uppercase;
    font-family: DIN Pro;
    text-align: center;
    background: url(https://forumstatic.ru/files/001c/37/ca/84006.png) center no-repeat;

    height: 24px;
    line-height: 24px;

    /* &#9989; В ТЕМЕ: без “воздуха” сверху */
    margin: 0 12px 12px 12px;

    /* &#9989; “такое же округление” как у карточки (визуально совпадает) */
    border-top-right-radius: 18px;
    border-bottom-left-radius: 18px;

    /* чтобы радиус был виден даже на прозрачной картинке */
    overflow: hidden;
}

/* ===== ТАБЫ (общая разметка, как в модалке) ===== */
.modal__tabs { 
    display: flex;
    margin-bottom: 18px;
    width: auto;
    justify-content: center;
    margin-top: 20px;
}

.modal__tab {
    cursor: pointer;
    border: none;
    border-radius: 5px;
    background: #272e46;
    display: flex;
    margin-right: 8px;
    padding: 3px 10px 3px;
    color: #ffcf70;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 500;
    font-family: 'DIN Pro';
}

.modal__tab.active {     
    color: #242841;
    background: #ffcf70;
    font-weight: 600;
}

.modal__tab:not(.active):hover { background: #323b65; }

/* Контент вкладок: по умолчанию скрыт, показываем active */
.modal__content { 
    display: none;
    background: #1f1d3d80;
    border-top-right-radius: 12px;
    border-bottom-left-radius: 12px;
    margin: 5px auto;
    padding: 10px 12px;
    color: #cac1b2!important;
    font-size: 13px;

    width: 580px;
    max-width: calc(100% - 24px);
    box-sizing: border-box;
}

.modal__content.active { display: block; }

/* ===== 1) ПЕРЕКЛЮЧЕНИЕ ВКЛАДОК В ТЕМЕ НА CSS (НЕ ТРОГАЕМ МОДАЛКУ, КЛАССЫ НЕ МЕНЯЕМ) ===== */
/* Таб 1 */
.character:has(.modal__tabs .modal__tab:nth-of-type(1):is(:focus, :focus-visible)) .modal__content{ display: none; }
.character:has(.modal__tabs .modal__tab:nth-of-type(1):is(:focus, :focus-visible)) .modal__content:nth-of-type(1){ display: block; }
/* Таб 2 */
.character:has(.modal__tabs .modal__tab:nth-of-type(2):is(:focus, :focus-visible)) .modal__content{ display: none; }
.character:has(.modal__tabs .modal__tab:nth-of-type(2):is(:focus, :focus-visible)) .modal__content:nth-of-type(2){ display: block; }
/* Таб 3 */
.character:has(.modal__tabs .modal__tab:nth-of-type(3):is(:focus, :focus-visible)) .modal__content{ display: none; }
.character:has(.modal__tabs .modal__tab:nth-of-type(3):is(:focus, :focus-visible)) .modal__content:nth-of-type(3){ display: block; }
/* Таб 4 */
.character:has(.modal__tabs .modal__tab:nth-of-type(4):is(:focus, :focus-visible)) .modal__content{ display: none; }
.character:has(.modal__tabs .modal__tab:nth-of-type(4):is(:focus, :focus-visible)) .modal__content:nth-of-type(4){ display: block; }

/* Защита: модалка продолжает жить строго по .active (игнорируя фокусные правила) */
.modal .character:has(.modal__tabs .modal__tab:is(:focus, :focus-visible)) .modal__content{ display: none !important; }
.modal .character:has(.modal__tabs .modal__tab:is(:focus, :focus-visible)) .modal__content.active{ display: block !important; }

/* ===== Карточка персонажа - модал ===== */
.modal.hidden { display: none; }
.modal { position: fixed; z-index: 1000; top: 0; left: 0; width: 100vw; height: 100vh; }
.modal__bg { position: absolute; inset: 0; background: rgb(30 30 54 / 80%); }

.modal__container{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.97);

    background: url(https://forumstatic.ru/files/001c/37/ca/60359.webp) bottom center no-repeat;
    background-size: cover;

    border-radius: 18px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);

    min-width: 320px;
    max-width: 660px;
    width: 90vw;
    min-height: 120px;

    padding: 0px 0px 18px 0px;

    transition: opacity 250ms cubic-bezier(.42,0,.58,1), transform 250ms;
    opacity: 0;
    pointer-events: none;
}

.modal.open .modal__container{
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%,-50%) scale(1);
}

.modal__close {    
    position: absolute;
    right: -1em;
    top: -.5em;
    font-size: 2rem;
    color: #ffcf70 !important;
    cursor: pointer;
    text-decoration: none;
}

.modal__wrap{
    margin: 0;
    padding: 0;
}

/* В модалке .character не должна быть вторым контейнером */
.modal .character{
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    max-width: none !important;
    width: auto !important;
}

/* В модалке вкладки плотнее */
.modal .modal__tabs{
    margin-top: 8px;
    margin-bottom: 14px;
}

/*----------------------------КАРТОЧКА ПЕРСОНАЖА---КОНЕЦ---------------------------------*/

/*----------------------------КАРТОЧКА ПЕРСОНАЖА---------------------------------*/
/* FIX: модалка — убираем верхний “воздух” у вкладок + фикс высоты (не скачет) */

/* убираем верхний отступ у всех вкладок в модалке */
.modal .modal__content{
    padding-top: 0 !important;
}

/* фиксируем одинаковую высоту корпуса вкладки (под ваши текущие отступы: top=0, bottom=10) */
.modal .modal__content{
    height: 157px;
    overflow: hidden;
}

/* внутренние скроллы остаются внутри контента */
.modal .way-list,
.modal .plashk-lslist,
.modal .achive-lslist{
    height: 147px;
    overflow-y: auto;
}

/* О себе: делаем высоту как у остальных */
.modal .peron-about{
    max-height: 147px;
    overflow-y: auto;
}

/* На всякий: убираем стартовый марджин у первого пути */
.modal .way-info:first-child{ margin-top: 0; }
/*----------------------------КАРТОЧКА ПЕРСОНАЖА---КОНЕЦ---------------------------------*/

/* Карточка персонажа - мобил */
@media screen and (max-width: 1000px) {
    .modal__content.active { max-width: 316px; }

    .modal__close {
        right: -8px;
        top: -20px;
    }

    .character{
        width: min(92vw, 660px);
    }

    .character .modal__content{
        width: 100%;
        max-width: calc(100% - 24px);
    }

    /* на мобилке тоже фиксируем высоту вкладок в модалке */
    .modal .modal__content{
        height: 157px;
    }
}
/*----------------------------КАРТОЧКА ПЕРСОНАЖА---КОНЕЦ---------------------------------*/