/* ---- Perfil: equipamentos ---- */
body.vmu-body-root .vmu-content .equipments,
.equipments {
    overflow: visible;
    display: block !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}

.vmu-perfil-equip {
    padding: 18px 16px 14px !important;
}

.vmu-perfil-equip-stage {
    position: relative;
    max-width: 460px;
    margin: 0 auto;
    padding: 18px 22px 22px;
    background:
        radial-gradient(ellipse 70% 55% at 50% 42%, rgba(201, 162, 39, 0.14), transparent 68%),
        linear-gradient(180deg, #2e2c3e 0%, #1a1a2e 48%, #12121f 100%);
    border: 2px solid rgba(201, 162, 39, 0.55);
    box-shadow:
        0 10px 28px rgba(26, 26, 46, 0.28),
        inset 0 0 48px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(232, 197, 71, 0.12);
}

.vmu-perfil-equip-stage-border {
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(201, 162, 39, 0.22);
    pointer-events: none;
    z-index: 0;
}

.vmu-perfil-equip-stage-border::before,
.vmu-perfil-equip-stage-border::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-color: rgba(232, 197, 71, 0.55);
    border-style: solid;
}

.vmu-perfil-equip-stage-border::before {
    top: -1px;
    left: -1px;
    border-width: 2px 0 0 2px;
}

.vmu-perfil-equip-stage-border::after {
    right: -1px;
    bottom: -1px;
    border-width: 0 2px 2px 0;
}

.vmu-perfil-equip-scaler {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    overflow: visible;
}

.vmu-perfil-equip-scaler > .mapping {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto !important;
    aspect-ratio: 400 / 388;
    z-index: 1;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.45));
}

.equipments .mapping .vmu-perfil-equip-silhouette {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.42;
    mix-blend-mode: screen;
    pointer-events: none;
    user-select: none;
}

.equipments .mapping .item-mapping {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background:
        linear-gradient(145deg, rgba(38, 36, 52, 0.92), rgba(22, 22, 34, 0.88));
    border: 1px solid rgba(201, 162, 39, 0.32);
    box-shadow:
        inset 0 0 14px rgba(0, 0, 0, 0.55),
        0 2px 6px rgba(26, 26, 46, 0.35);
    border-radius: 2px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.equipments .mapping .item-mapping:not(:has(img))::after {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px dashed rgba(201, 162, 39, 0.18);
    border-radius: 1px;
    pointer-events: none;
}

.equipments .mapping .item-mapping:has(img) {
    border-color: rgba(232, 197, 71, 0.62);
    box-shadow:
        inset 0 0 10px rgba(201, 162, 39, 0.12),
        0 0 14px rgba(201, 162, 39, 0.18);
}

.equipments .mapping .item-mapping:hover {
    border-color: rgba(232, 197, 71, 0.85);
    box-shadow:
        inset 0 0 12px rgba(201, 162, 39, 0.2),
        0 0 18px rgba(201, 162, 39, 0.28);
    z-index: 3;
}

.equipments .mapping .vmu-perfil-equip-item {
    display: block;
    position: relative;
    max-width: 94%;
    max-height: 94%;
    width: auto;
    height: auto;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
    transition: transform 0.15s ease, filter 0.15s ease;
    pointer-events: auto;
}

.equipments .mapping .item-mapping:hover .vmu-perfil-equip-item {
    transform: scale(1.04);
    filter: drop-shadow(0 0 8px rgba(201, 162, 39, 0.45)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
}

/* Slots em % — acompanham a largura da coluna sem cortar (base 400x388) */
.equipments .mapping .item0 {
    top: 30.15%;
    left: 0.5%;
    width: 23%;
    height: 37.63%;
}

.equipments .mapping .item1 {
    top: 30.15%;
    right: 1.25%;
    width: 22.75%;
    height: 37.63%;
}

.equipments .mapping .item2 {
    top: 2.06%;
    left: 37.5%;
    width: 24.25%;
    height: 23.71%;
}

.equipments .mapping .item3 {
    top: 30.15%;
    left: 37.5%;
    width: 24.25%;
    height: 37.63%;
}

.equipments .mapping .item4 {
    bottom: 2.32%;
    left: 37.5%;
    width: 23.75%;
    height: 25%;
}

.equipments .mapping .item5 {
    bottom: 2.32%;
    left: 0.5%;
    width: 23%;
    height: 25.77%;
}

.equipments .mapping .item6 {
    bottom: 2.84%;
    right: 0.75%;
    width: 23%;
    height: 24.48%;
}

.equipments .mapping .item7 {
    top: 2.06%;
    right: 0.75%;
    width: 34.75%;
    height: 24.48%;
}

.equipments .mapping .item8 {
    top: 1.55%;
    left: 0.5%;
    width: 23%;
    height: 24.48%;
}

.equipments .mapping .item9 {
    top: 30.15%;
    left: 25.5%;
    width: 11%;
    height: 11.34%;
}

.equipments .mapping .item10 {
    bottom: 15.72%;
    left: 25.5%;
    width: 10.5%;
    height: 11.86%;
}

.equipments .mapping .item11 {
    bottom: 15.72%;
    right: 25.75%;
    width: 9.75%;
    height: 11.86%;
}

.equipments .mapping .item12,
.equipments .mapping .item13,
.equipments .mapping .item14 {
    position: absolute;
    width: 11%;
    height: 11.08%;
    background: linear-gradient(145deg, rgba(38, 36, 52, 0.92), rgba(22, 22, 34, 0.88));
    border: 1px solid rgba(201, 162, 39, 0.32);
    border-radius: 2px;
}

.equipments .mapping .item12 {
    top: 86.86%;
    right: 25.75%;
}

.equipments .mapping .item13 {
    top: 47.42%;
    left: 25.5%;
}

.equipments .mapping .item14 {
    top: 47.42%;
    right: 25.75%;
}

.vmu-perfil-equip-hint {
    margin: 14px 0 0;
    text-align: center;
    font-size: 11px;
    color: #5a5a6e;
    letter-spacing: 0.02em;
}

.vmu-perfil-equip-hint i {
    margin-right: 5px;
    color: #8b6914;
}

@media (max-width: 520px) {
    .vmu-perfil-equip-stage {
        padding: 12px 10px 16px;
    }
}