/* Компактная сетка из двенадцати слотов экипировки. */
.equipment-theme {
    background:
        radial-gradient(
            circle at 80% 22%,
            #9eb9d83d,
            transparent 20%
        ),
        radial-gradient(
            circle at 63% 88%,
            #805f3630,
            transparent 26%
        ),
        linear-gradient(
            125deg,
            #10151c 26%,
            #293541 68%,
            #151a21
        );
}

/* Лёгкий силуэт оружейной стены на заднем плане сцены. */
.equipment-theme::before {
    background:
        linear-gradient(
            90deg,
            transparent 0 57%,
            #080d138c 57% 100%
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0 54px,
            #d8e6f20a 55px 57px
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0 42px,
            #d8e6f208 43px 45px
        );
    clip-path: polygon(
        56% 25%,
        63% 15%,
        70% 25%,
        78% 8%,
        86% 24%,
        94% 14%,
        100% 24%,
        100% 100%,
        56% 100%
    );
}

.equipment-theme .scene-light {
    background: #91abc32c;
}

.equipment-panel {
    grid-column: 1 / -1;
    width: 100%;
    padding: 14px;
    border: 1px solid #8399b638;
    border-radius: 13px;
    background: #0d1117;
    box-shadow: 0 14px 35px #0005;
}

.equipment-slots-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: min(100%, 590px);
    margin: 0 auto 14px;
}

.equipment-slot {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 108px;
    padding: 18px 7px 8px;
    overflow: hidden;
    border: 1px solid var(--rarity-color, #66717e);
    border-radius: 9px;
    color: #dce2e8;
    background:
        radial-gradient(
            circle at 50% 40%,
            var(--rarity-glow, #ffffff0a),
            transparent 58%
        ),
        #131922;
    cursor: pointer;
}

@property --upgrade-sector-one-end {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 0%;
}

@property --upgrade-sector-two-end {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 25%;
}

/* Светящиеся дорожки вырастают по траектории своих секторов. */
.equipment-slot.has-upgrade-effects::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 2px;
    border-radius: inherit;
    background: conic-gradient(
        from -90deg,
        var(--upgrade-sector-one) 0 var(--upgrade-sector-one-end),
        transparent var(--upgrade-sector-one-end) 25%,
        var(--upgrade-sector-two) 25% var(--upgrade-sector-two-end),
        transparent var(--upgrade-sector-two-end) 50%,
        var(--upgrade-sector-three, transparent) 50% 74%,
        transparent 74% 75%,
        var(--upgrade-sector-four, transparent) 75% 99%,
        transparent 99% 100%
    );
    filter: drop-shadow(0 0 3px #dcecff88);
    pointer-events: none;
    animation: equipment-upgrade-trail 1.9s ease-in-out infinite alternate;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
}

@keyframes equipment-upgrade-trail {
    from {
        --upgrade-sector-one-end: 0%;
        --upgrade-sector-two-end: 25%;
        opacity: 0.65;
    }

    to {
        --upgrade-sector-one-end: 24%;
        --upgrade-sector-two-end: 49%;
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .equipment-slot.has-upgrade-effects::before {
        animation: none;
        --upgrade-sector-one-end: 24%;
        --upgrade-sector-two-end: 49%;
    }
}

.equipment-slot-type {
    position: absolute;
    top: 6px;
    left: 7px;
    color: #737d89;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.equipment-upgrade-levels {
    position: absolute;
    top: 5px;
    right: -10px;
    display: grid;
    justify-items: start;
    gap: 1px;
    min-width: 48px;
    color: #c9d9e7;
    font-size: 8px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    text-shadow: 0 1px 3px #000;
}

.equipment-upgrade-levels span {
    display: block;
    min-width: 48px;
    text-align: left;
    white-space: nowrap;
}

.equipment-upgrade-levels:empty {
    display: none;
}

.equipment-slot-icon {
    font-size: 28px;
    filter: drop-shadow(0 3px 5px #0008);
}

.equipment-slot strong {
    max-width: 100%;
    overflow: hidden;
    color: #d8dde3;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.equipment-slot small {
    color: var(--rarity-color, #747d88);
    font-size: 8px;
}

.equipment-slot.empty {
    border-style: dashed;
    opacity: 0.72;
}

.equipment-slot.empty:not(.future) {
    cursor: pointer;
}

.equipment-slot.future {
    border-color: #7f6a9855;
    background: #17131d;
    cursor: default;
}

.equipment-bonuses {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: min(100%, 760px);
    margin: 0 auto;
}

.equipment-bonus-card,
.equipment-bonuses details {
    overflow: hidden;
    border: 1px solid #ffffff10;
    border-radius: 9px;
    background: #111720;
}

.equipment-bonus-card.total {
    grid-column: 1 / -1;
    border-color: #a8864a42;
    background: #171711;
}

.equipment-bonus-card header,
.equipment-bonuses summary {
    padding: 9px 11px;
    color: #aeb8c3;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    cursor: pointer;
}

.equipment-bonus-card > div,
.equipment-bonuses details > div {
    padding: 0 11px 7px;
}

.equipment-stat-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-top: 1px solid #ffffff0c;
    color: #9da6b0;
    font-size: 11px;
}

.equipment-stat-row strong {
    color: #e2c47f;
    font-variant-numeric: tabular-nums;
}

.equipment-no-bonus,
.equipment-loading,
.equipment-error {
    color: #737c87;
    font-size: 10px;
}

.equipment-loading,
.equipment-error {
    grid-column: 1 / -1;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 7px;
    min-height: 130px;
    padding: 20px;
    border: 1px dashed #ffffff12;
    border-radius: 9px;
    text-align: center;
}

.equipment-error strong {
    color: #cf8f85;
    font-size: 13px;
}

.equipment-error button {
    padding: 7px 12px;
    border: 1px solid #8399b655;
    border-radius: 7px;
    color: #c6d5e3;
    background: #18222d;
    cursor: pointer;
}

@media (max-width: 9999px) {
    .equipment-panel {
        padding: 11px;
        border-radius: 10px;
    }

    .equipment-slots-grid {
        gap: 6px;
    }

    .equipment-slot {
        min-height: 91px;
        padding-right: 4px;
        padding-left: 4px;
    }

    .equipment-slot-icon {
        font-size: 24px;
    }

    .equipment-bonuses {
        grid-template-columns: 1fr;
    }

    .equipment-bonus-card.total {
        grid-column: auto;
    }
}

/* Настройка верхней сцены экипировки. */
.equipment-theme .eyebrow,
.equipment-theme .location-copy h1 {
    transform: translateX(70px);
}

/* Отдельно опускает большой щит. */
.equipment-theme .location-mark {
    transform: translateY(50px);
}

/* Подтягивает всю сцену экипировки к верхней шапке единым блоком. */
.equipment-theme .scene-content {
    padding-top: 12px;
    margin-bottom: -20px;
    transform: translateY(-20px);
}