/* --- Item Slot Layout --- */

/* Basic Slot Container (Flex Column for Image + Bar) */
.item-slot {
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid transparent;
    overflow: hidden;
    background: var(--slot-bg);
    box-sizing: border-box;
}

/* Equipped Slot Sizing */
.equipped-slot .item-slot {
    width: 64px;
    height: auto;
    min-height: 64px;
}

/* Inventory Grid Sizing */
.inventory-mini-grid .item-slot {
    width: 48px;
    height: auto;
    min-height: 48px;
}

/* Empty Slot */
.empty-slot {
    border: 1px solid var(--slot-border);
    background-color: var(--slot-bg);
    cursor: default;
    height: 48px;
}

.empty-slot:hover {
    border-color: var(--slot-border);
}

/* Image Container */
.item-icon-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
}

.item-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.item-placeholder {
    background: var(--slot-bg);
    border: 1px dashed var(--slot-border);
    color: var(--text-secondary);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 4px;
}

/* --- OVERLAYS --- */

.item-watermark {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 64px;
    height: 64px;
    z-index: 5;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.8));

    /* Background Scaling Logic - For Large Banners */
    /* This scales the image height to 14px (100%), keeping aspect ratio. */
    /* Only the left-most 14px (where the icon usually is) will be visible. */
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
}

.item-intrinsic-icon {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 15px;
    height: 15px;
    z-index: 5;
    /* Ensure it's above image */
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    padding: 1px;
}

.item-mw-tier {
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    border-left: 2px solid #e1c944;
    z-index: 4;
    box-shadow: 0 0 2px black;
}

.item-mw-tier.group-tier-10 {
    height: 36px;
    border-left: 3px solid #ffd700;
    box-shadow: 0 0 5px #ffd700;
}

.item-state-icons {
    position: absolute;
    bottom: 2px;
    right: 2px;
    z-index: 5;
    display: flex;
    gap: 2px;
}

.lock-icon {
    width: 10px;
    height: 10px;
    background-color: #2ecc71;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-9-2c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm9 14H6V10h12v10zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z'/%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-9-2c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm9 14H6V10h12v10zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

/* --- Bottom Bar --- */
.item-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Right Align */
    gap: 3px;
    height: 14px;
    background: #111;
    width: 100%;
    padding: 0 4px;
    box-sizing: border-box;
    z-index: 5;
    flex-shrink: 0;
}

.item-element img {
    width: 10px;
    height: 10px;
    display: block;
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.3));
}

.item-power {
    position: static;
    transform: none;
    font-size: 10px;
    font-weight: 600;
    color: #f5f5f5;
    text-shadow: none;
    background: transparent;
    padding: 0;
}