/* Характеристики скінів */
.skin-characteristics .characteristic-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--postgray-background);
    padding: 6px 10px;
    margin: 10px 5px 0 0;
    border-radius: 5px;
    font-family: "Segoe UI", sans-serif !important;
    font-size: 15px;
    line-height: 1.5;
    font-weight: inherit;
    color: inherit;
}

.skin-characteristics .characteristic-item span {
    font-size: inherit;
    line-height: inherit;
}

.skin-characteristics .characteristic-item .icon,
.skin-characteristics .characteristic-button .icon {
    display: inline-block;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin: 0;
    vertical-align: middle;
    background-color: currentColor;
    background-size: contain;
    background-repeat: no-repeat;
}

.skin-characteristics .characteristic-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Фони рідкісності */
.skin-characteristics .icon-gradient-archive,
.skin-characteristics .icon-gradient-default {
    background: var(--postgray-background);
}

.skin-characteristics .icon-gradient-common {
    background: linear-gradient(45deg, #4bff691c, #29ff4f2b);
}

.skin-characteristics .icon-gradient-epic {
    background: linear-gradient(45deg, #4bd5ff1c, #29e0ff2b);
}

.skin-characteristics .icon-gradient-legendary {
    background: linear-gradient(45deg, #c200001c, #ff4c4c2b);
}

.skin-characteristics .icon-gradient-mythic {
    background: linear-gradient(45deg, #4200c21c, #824cff2b);
}

.skin-characteristics .icon-gradient-ultimate {
    background: linear-gradient(45deg, #ff8d001c, #ffa5452b);
}

.skin-characteristics .icon-gradient-transcendent {
    background: linear-gradient(45deg, #f7f4ff1c, #966fff1c, #ffa4df2b);
}

.skin-characteristics .icon-gradient-exalted {
    background: linear-gradient(45deg, #4bffa31c, #ffe6292b);
}

/* Посилання виглядають як звичайні рядки */
.skin-characteristics a.characteristic-link,
.skin-characteristics a.characteristic-link:visited,
.skin-characteristics a.characteristic-link:hover,
.skin-characteristics a.characteristic-link:focus {
    color: inherit;
    text-decoration: none;
    background: var(--postgray-background);
    box-shadow: none;
}

.skin-characteristics a.characteristic-link {
    cursor: pointer;
}

.skin-characteristics .characteristic-link .characteristic-text {
    transition: filter 0.2s ease;
}

.skin-characteristics .characteristic-link:hover .characteristic-text,
.skin-characteristics .characteristic-link:focus-visible .characteristic-text {
    filter: brightness(1.05);
}

.skin-characteristics .characteristic-link:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 2px;
}

/* Кнопка 3D-перегляду */
.skin-characteristics .characteristic-button {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    background-color: var(--bth-background);
    padding: 6px 10px;
    margin: 10px 5px 0 0;
    border-radius: 5px;
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.skin-characteristics .characteristic-button:hover {
    background-color: #a07a30;
    color: #fff;
}