/* ===== css/inventory.css ===== */

/* Grid do Inventário com 15 colunas flexíveis para preencher o espaço */
.inventory-grid {
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    gap: 4px;
    background: #080a0f;
    padding: 8px;
    border: 2px solid #2d333b;
    border-radius: 6px;
    width: 100%;
    box-sizing: border-box;
}

/* Slot individual do Inventário e Baú */
.inv-slot, .inv-slot-box {
    width: 100%; 
    aspect-ratio: 1 / 1;
    background: #12161f;
    border: 1px solid #30363d;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    overflow: visible;
    padding: 2px;
    box-sizing: border-box;
    transition: all 0.15s ease;
}

.inv-slot:hover, .inv-slot-box:hover {
    border-color: #58a6ff;
    background: #1a202c;
    box-shadow: 0 0 6px rgba(88, 166, 255, 0.4);
    transform: translateY(-1px);
}

.inv-slot.filled, .inv-slot-box.filled {
    border-color: #8957e5;
    background: #1b1f2b;
}

.inv-item-name {
    font-size: 10px;
    color: #e6edf3;
    text-align: center;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100%;
    padding: 0 2px;
}

.inv-item-count {
    font-size: 11px;
    color: #f0883e;
    font-weight: bold;
    position: absolute;
    bottom: 2px;
    right: 3px;
}

.inv-item-level {
    z-index: 4;
    padding: 0 2px;
    border: 1px solid #896f2b;
    background: rgba(18, 15, 5, .9);
    color: #ffe59a;
    font: 800 11px Georgia, serif;
    text-shadow: 1px 1px #000;
    position: absolute;
    top: 2px;
    left: 2px;
}

/* ===== Visual Clássico de Poções no Inventário ===== */
.inv-slot.potion-hp {
    background: radial-gradient(circle, #ff4d4d 0%, #8b0000 100%);
    border: 1px solid #ff9999;
    box-shadow: inset 0 0 4px rgba(255,255,255,0.4);
}
.inv-slot.potion-hp:hover {
    border-color: #ff3333;
    box-shadow: 0 0 8px rgba(255, 77, 77, 0.7);
}

.inv-slot.potion-mp {
    background: radial-gradient(circle, #4da6ff 0%, #00008b 100%);
    border: 1px solid #99ccff;
    box-shadow: inset 0 0 4px rgba(255,255,255,0.4);
}
.inv-slot.potion-mp:hover {
    border-color: #3388ff;
    box-shadow: 0 0 8px rgba(77, 166, 255, 0.7);
}

.inv-slot.potion-hp .inv-item-name, 
.inv-slot.potion-mp .inv-item-name {
    color: #ffffff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.9);
    font-weight: bold;
    font-size: 10px;
}

/* Esconde o tooltip de detalhes quando o modal de ações do item estiver aberto */
.inv-slot-box:has(.item-actions-modal) .item-tooltip,
.inv-slot:has(.item-actions-modal) .item-tooltip {
    display: none !important;
}

/* Modal flutuante de ações (Clique no item) */
.item-actions-modal {
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    background: #161b22;
    border: 1px solid #58a6ff;
    border-radius: 4px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 30000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.8);
    min-width: 100px;
}

.item-actions-modal button {
    background: #21262d;
    color: #c9d1d9;
    border: 1px solid #30363d;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 11px;
    cursor: pointer;
    text-align: left;
    font-weight: normal;
}

.item-actions-modal button:hover {
    background: #30363d;
    color: white;
    border-color: #58a6ff;
}

.item-actions-modal button.btn-sell {
    color: #ff7b72;
}

/* ---- Tooltip de Comparação de Itens Estilo MMORPG (Hover) ---- */
.item-tooltip {
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(18, 22, 31, 0.95);
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 10px;
    width: 210px;
    color: #c9d1d9;
    z-index: 20000;
    box-shadow: 0 6px 20px rgba(0,0,0,0.8);
    pointer-events: none;
    font-size: 11px;
    text-align: left;
    display: none;
    backdrop-filter: blur(4px);
}

.inv-slot:hover .item-tooltip,
.inv-slot-box:hover .item-tooltip {
    display: block;
}

.tooltip-title {
    font-weight: bold;
    color: #58a6ff;
    border-bottom: 1px solid #30363d;
    padding-bottom: 4px;
    margin-bottom: 6px;
    font-size: 12px;
}

.tooltip-section {
    margin-bottom: 6px;
}

.tooltip-section-title {
    color: #8b949e;
    font-size: 11px;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.tooltip-diff-better { color: #3fb950; font-weight: bold; }
.tooltip-diff-worse { color: #ff7b72; font-weight: bold; }
.tooltip-diff-equal { color: #8b949e; }

/* Efeito visual quando a joia está selecionada/segurada no inventário */
.inv-slot-box.jewel-selected,
.inv-slot.jewel-selected {
    border-color: #f0883e !important;
    background: #3b2c1a !important;
    box-shadow: 0 0 10px rgba(240, 136, 62, 0.8) !important;
    animation: pulse-select 1.2s infinite alternate;
}

@keyframes pulse-select {
    0% { border-color: #f0883e; box-shadow: 0 0 5px rgba(240, 136, 62, 0.5); }
    100% { border-color: #ffd700; box-shadow: 0 0 12px rgba(255, 215, 0, 0.9); }
}

/* ==========================================================
   JANELA DE INVENTÁRIO (Com suporte a Modo Isolado e Modo Trade)
   ========================================================== */
.mu-inventory-window {
    /* Era 420px com a grade em 5 colunas. Com 10 colunas quadradas a
       janela precisa de mais largura — e sobra espaço para o item aparecer
       maior, que era o pedido. */
    width: min(680px, calc(100% - 20px)) !important;
    margin: 18px auto 28px !important;
    padding: 14px 16px 16px !important;
    background: linear-gradient(145deg, #4d4a3b 0, #151610 7%, #090a09 52%, #27261f 100%) !important;
    border: 2px solid #b6a776 !important;
    box-shadow: inset 0 0 0 3px #090a08, inset 0 0 0 5px #5c573f, 0 12px 30px rgba(0,0,0,.75) !important;
    box-sizing: border-box !important;
}

/* Se o Trade estiver aberto, o inventário se posiciona automaticamente à esquerda de forma fixa e compacta */
body:has(#mu-trade-window[style*="display: flex"]) .mu-inventory-window {
    position: fixed !important;
    top: 50% !important;
    left: calc(50% - 355px) !important;
    transform: translateY(-50%) !important;
    width: 340px !important;
    margin: 0 !important;
    z-index: 1006 !important;
}

.mu-inventory-window h2, .mu-inventory-window h3 { color: #e5d08a; text-shadow: 1px 1px #000; }
.mu-inventory-window > div:first-child { border-bottom: 1px solid #71694b; padding-bottom: 9px; }
.mu-inventory-window > div:nth-of-type(2) { border-color: #71694b !important; }
.mu-inventory-window button { background: linear-gradient(#716643, #262417) !important; border: 1px solid #b7a870 !important; color: #fff0b7 !important; box-shadow: inset 0 0 0 1px #16150e; }

/* ===== Grid de Equipamentos Superior (Alinhamento em 4 Colunas) ===== */
.mu-inventory-window .mu-equipment-layout {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto 10px auto !important;
    padding: 10px !important;
    background: radial-gradient(circle at center, #1e211d 0%, #070807 100%);
    border: 2px solid #8d835d;
    box-shadow: inset 0 0 0 2px #050605, 0 4px 12px rgba(0,0,0,0.8);
    box-sizing: border-box !important;
}

.mu-inventory-window .eq-slot {
    width: 100% !important;
    aspect-ratio: 1 !important;
    padding: 4px;
    color: #b5b0a0;
    background: linear-gradient(135deg, #3a3a2e, #12130f 40%, #1f2018);
    border: 1px solid #726c51;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), inset 0 0 8px #000;
    box-sizing: border-box !important;
    position: relative;
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.mu-inventory-window .eq-slot:hover {
    border-color: #d7bb62;
    box-shadow: inset 0 0 0 1px rgba(215,187,98,0.3), 0 0 8px rgba(215,187,98,0.4);
    transform: translateY(-2px);
}

/* Slot preenchido com item comum (Tom Cinza/Metálico Clássico) */
.mu-inventory-window .eq-slot.filled { 
    border-color: #5c6370; 
    background-color: #161b20;
    background-image: radial-gradient(circle, #2d3139 0%, #13171f 80%);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.9), 0 0 5px rgba(92, 99, 112, 0.3);
}

/* Equipamentos excelentes (Verde Neon Destacado) */
.mu-inventory-window .eq-slot.item-excellent,
.mu-inventory-window .inv-slot.item-excellent {
    border-color: #2ea043;
    background-color: #0d1b13;
    background-image: radial-gradient(circle, #1a3b2b 0%, #0d1b13 80%);
    box-shadow: inset 0 0 0 2px #08261b, inset 0 0 12px #1eea8a44, 0 0 10px rgba(46, 160, 67, 0.5);
}

/* Ícones de equipamentos comuns equipados ficam em tons de cinza/metálico */
.eq-slot.filled:not(.item-excellent) .eq-item-icon,
.eq-slot.filled:not(.item-excellent) .equipment-item-icon {
    filter: grayscale(40%) contrast(110%) drop-shadow(0 2px 3px #000);
    opacity: 0.9;
}

.eq-slot.filled:not(.item-excellent):hover .eq-item-icon,
.eq-slot.filled:not(.item-excellent):hover .equipment-item-icon {
    filter: grayscale(0%) drop-shadow(0 2px 4px #000);
    opacity: 1;
}

.excellent-tooltip { color: #55e9ab; font-weight: 700; margin-top: 3px; }
.item-luck-line { color: #df8cff !important; font-weight: 700; text-shadow: 0 0 5px rgba(183, 79, 232, .52); }
.item-compare-hint { margin-top: 7px; padding-top: 5px; border-top: 1px solid #31505a; color: #86b9ca; font: 700 11px Georgia, serif; text-align: center; letter-spacing: .2px; }
.item-requirement-line { margin-top:4px; color:#a7c8d3; font:700 11px Arial,sans-serif; }
.item-requirement-part { color:#a7c8d3; }
.item-requirement-failed { color:#ff6257; text-shadow:0 1px #120000; }
.inv-slot-box.item-requirements-unmet { border-color:#c43c3c!important; box-shadow:inset 0 0 10px #4a0808,0 0 6px rgba(205,52,52,.34)!important; }
.inv-slot-box.item-advanced-class-unmet { border-color:#b575ff!important; box-shadow:inset 0 0 10px #381158,0 0 7px rgba(190,122,255,.48)!important; }

/* TRAVA ABSOLUTA DE TAMANHO PARA ANULAR QUALQUER CLASSE EXTERNA (.eq-item-icon de 52px) */
.mu-inventory-window .mu-equipment-layout .eq-slot .eq-item-icon, 
.mu-inventory-window .mu-equipment-layout .eq-slot .equipment-item-icon,
.mu-inventory-window .mu-equipment-layout .eq-slot span[class*="equipment-item-icon"],
.mu-inventory-window .mu-equipment-layout .eq-slot span[class*="eq-item-icon"] {
    width: 34px !important;
    height: 34px !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 34px !important;
    min-height: 34px !important;
    margin: auto !important;
    display: block !important;
    background-repeat: no-repeat !important;
    filter: drop-shadow(0 2px 3px #000);
}

.eq-item-level { position: absolute; left: 1px; top: 1px; right: auto; bottom: auto; z-index: 4; min-width: 19px; padding: 1px 2px; color: #fff3b5; background: #15130c; border: 1px solid #806f42; font: 800 11px Georgia, serif; line-height: 11px; text-align:center; text-shadow: 1px 1px #000; box-shadow:0 1px 3px #000; }

/* Capacidade: fica visível antes de não haver espaço para novos drops. */
.inventory-capacity-indicator {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:20px;
    margin:-2px 0 6px;
    padding:2px 7px;
    box-sizing:border-box;
    border:1px solid #465e64;
    background:linear-gradient(180deg,#162326,#090e0f);
    color:#b8d1d4;
    font:700 11px/1.25 Arial,sans-serif;
    letter-spacing:.25px;
    text-align:center;
    text-transform:uppercase;
}

/* Raridade: a borda e o título usam a mesma cor em inventário, equipamento,
   baú e comparações. Excellent preserva o tratamento neon já existente. */
.item-quality-fraco { border-color:#707780 !important; }
.item-quality-comum { border-color:#d6dadd !important; }
/* Incomum e Mágico eram o MESMO azul; agora o Incomum é mais claro. */
.item-quality-incomum { border-color:#4da3d8 !important; background-color:#0e2230 !important; }
.item-quality-magico { border-color:#315f9d !important; background-color:#101b31 !important; }
.item-quality-raro { border-color:#d9b340 !important; background-color:#332a0d !important; }
.item-quality-epico { border-color:#a95bd1 !important; background-color:#2d123b !important; }
/* Ancient saiu do roxo (que era igual ao Épico) para uma brasa alaranjada. */
.item-quality-ancient { border-color:#ff7a33 !important; background-color:#2c1408 !important; box-shadow:inset 0 0 12px #e6603055,0 0 11px #ff7a3388 !important; }
.quality-fraco { color:#969da6 !important; }
.quality-comum { color:#f1f3f5 !important; }
.quality-incomum { color:#6cc0ef !important; text-shadow:0 0 6px #14415e; }
.quality-magico { color:#5487cd !important; text-shadow:0 0 6px #173964; }
.quality-raro { color:#f2c84b !important; text-shadow:0 0 6px #765b0b; }
.quality-epico { color:#d38aff !important; text-shadow:0 0 6px #67258f; }
.quality-excellent { color:#53e8a9 !important; text-shadow:0 0 7px #198f5b; }
.quality-ancient { color:#ff9a5c !important; text-shadow:0 0 8px #c2470f; }
.item-quality-line { margin-top:3px; font-weight:700; }
.ancient-set-line { margin-top:6px; padding-top:5px; border-top:1px solid #713db3; color:#b79acb; line-height:1.35; }
.ancient-set-line b,.ancient-set-line .active { color:#d8a8ff; }
.inventory-capacity-indicator.is-full {
    border-color:#c24642;
    background:linear-gradient(180deg,#4b1c1c,#1a0909);
    color:#ffd18a;
    box-shadow:inset 0 0 10px rgba(176,31,28,.58),0 0 8px rgba(223,67,57,.42);
    animation:inventory-full-pulse 1.15s ease-in-out infinite;
}
@keyframes inventory-full-pulse { 50% { filter:brightness(1.25); } }

/* Acessórios têm leitura cromática fixa em qualquer painel: gelo é azul,
   fogo é vermelho, veneno é verde, e assim por diante. */
.accessory-element { filter:drop-shadow(0 1px 2px #000) saturate(1.28); }
.accessory-ice { filter:drop-shadow(0 0 3px rgba(77,181,255,.9)) hue-rotate(172deg) saturate(1.8) brightness(1.22); }
.accessory-fire { filter:drop-shadow(0 0 3px rgba(255,73,50,.88)) hue-rotate(-18deg) saturate(1.95) brightness(1.16); }
.accessory-poison { filter:drop-shadow(0 0 3px rgba(105,229,62,.84)) hue-rotate(83deg) saturate(1.75) brightness(1.14); }
.accessory-wind { filter:drop-shadow(0 0 3px rgba(97,237,166,.8)) hue-rotate(112deg) saturate(1.62) brightness(1.17); }
.accessory-earth { filter:drop-shadow(0 0 3px rgba(222,173,82,.78)) hue-rotate(22deg) saturate(1.48) brightness(1.13); }
.accessory-lightning { filter:drop-shadow(0 0 3px rgba(191,123,255,.9)) hue-rotate(247deg) saturate(1.9) brightness(1.22); }
.accessory-water { filter:drop-shadow(0 0 3px rgba(46,204,255,.88)) hue-rotate(191deg) saturate(1.7) brightness(1.18); }

/* Grid de Itens Interno do Inventário (Adaptável 5 colunas para caber perfeitamente) */
.mu-inventory-window .inventory-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 3px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 6px !important;
    background: linear-gradient(#191a16, #070807);
    border: 2px solid #8d835d;
    border-radius: 2px;
    box-shadow: inset 0 0 0 2px #050605;
    box-sizing: border-box !important;
    max-height: 300px;
    overflow-y: auto;
}

.mu-inventory-window .inv-slot, .mu-inventory-window .inv-slot-box {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 !important;
    background: linear-gradient(135deg, #34352c, #10110e 40%, #23241d);
    border: 1px solid #68634c;
    border-radius: 1px;
    box-shadow: inset 0 0 0 2px #090a08, inset 0 0 7px #000;
    box-sizing: border-box !important;
}

.mu-inventory-window .inv-slot.filled, .mu-inventory-window .inv-slot-box.filled { border-color: #c4ac68; background: radial-gradient(circle, #343326, #12130e 68%); }
.mu-inventory-window .inv-item-name { color: #f2e8c2; font-size: 10px; text-shadow: 1px 1px #000; }
.mu-inventory-window .inv-item-count { color: #fff3b5; background: #15130c; border: 1px solid #806f42; padding: 0 2px; }

/* Joias */
.jewel-item-icon { display: block; width: 30px; height: 30px; margin: 2px auto 3px; background-image: url('../assets/img/items/jewel-icons.png'); background-size: 200% 200%; background-repeat: no-repeat; filter: drop-shadow(0 1px 3px #000); }
.jewel-bless { width:28px; height:28px; margin:3px auto 4px; background-position:0 0; }
.jewel-soul { width:28px; height:28px; margin:3px auto 4px; background-position:100% 0; }
.jewel-life { width:34px; height:34px; margin:0 auto 0; background-position:0 100%; }
.jewel-chaos { width:26px; height:26px; margin:5px auto 5px; background-position:100% 100%; }

/* Materiais de evento: desenhos próprios, legíveis mesmo nas células pequenas. */
.event-item-icon { position:relative; display:block; width:30px; height:30px; margin:2px auto; filter:drop-shadow(0 1px 3px #000); }
.quest-item-icon { position:relative; display:block; width:30px; height:30px; margin:2px auto; filter:drop-shadow(0 1px 3px #000); }
.quest-item-icon::before,.quest-item-icon::after { content:''; position:absolute; box-sizing:border-box; }
.quest-scroll-emperor::before { inset:4px 7px; border:1px solid #d8b760; border-radius:2px; background:repeating-linear-gradient(0deg,#e8d596 0 2px,#8a6429 3px 4px); transform:rotate(-6deg); box-shadow:0 0 5px #d8a93f; }
.quest-scroll-emperor::after { left:7px; right:7px; top:5px; bottom:5px; border-top:2px solid #755121; border-bottom:2px solid #755121; transform:rotate(-6deg); }
.quest-broken-sword::before { left:13px; top:2px; width:5px; height:24px; border-radius:2px 2px 0 0; background:linear-gradient(90deg,#4d535d,#e3ebeb,#4b5159); transform:rotate(35deg); box-shadow:0 0 3px #aebcca; }
.quest-broken-sword::after { left:8px; top:17px; width:14px; height:5px; background:linear-gradient(#8f652a,#e6bd5f,#6e491a); transform:rotate(35deg); }
.quest-soul-wizard::before { inset:5px; border:2px solid #a782ff; border-radius:50%; background:radial-gradient(circle,#f4e6ff 0 11%,#9a65ec 17%,#3b1768 44%,#120c22 70%); box-shadow:0 0 7px #8649e7; }
.quest-soul-wizard::after { left:13px; top:2px; width:4px; height:26px; background:#e4c8ff; transform:rotate(45deg); opacity:.7; }
.quest-tear-elf::before { left:9px; top:2px; width:13px; height:25px; border-radius:70% 30% 68% 32%; transform:rotate(45deg); background:linear-gradient(135deg,#edffff,#70ddde 40%,#207f94 70%,#104551); box-shadow:0 0 6px #6af3ef; }
.quest-tear-elf::after { left:12px; top:8px; width:6px; height:13px; border-radius:50%; background:rgba(240,255,255,.7); transform:rotate(45deg); }
.event-item-icon::before,.event-item-icon::after { content:''; position:absolute; box-sizing:border-box; }
.event-devil-eye::before { inset:5px 3px 6px; border-radius:56% 44% 55% 45%; transform:rotate(-24deg); background:radial-gradient(circle at 58% 49%,#ffe38b 0 8%,#ff7b1a 10% 24%,#772000 34%,#230807 62%,transparent 64%); box-shadow:0 0 6px #ff4800; }
.event-devil-eye::after { left:7px; top:4px; width:18px; height:24px; border:2px solid #a42800; border-color:#ff8a18 transparent #762000 transparent; border-radius:50%; transform:rotate(28deg); }
.event-devil-key::before { left:12px; top:3px; width:8px; height:23px; border-radius:5px 5px 2px 2px; background:linear-gradient(90deg,#74390a,#ffd359,#9d550a); box-shadow:0 0 3px #f4ad29; }
.event-devil-key::after { left:7px; top:3px; width:16px; height:12px; border:4px solid #e9a836; border-radius:50%; box-shadow:10px 15px 0 -2px #e9a836,5px 18px 0 -2px #e9a836; }
.event-devil-invitation::before { inset:3px 7px; border:1px solid #c1a66c; background:linear-gradient(90deg,#6d3f1b,#d5b46d 22%,#785026 48%,#e0c178 76%,#6b3a19); clip-path:polygon(16% 0,84% 0,100% 12%,88% 90%,50% 100%,12% 90%,0 12%); }
.event-devil-invitation::after { left:12px; top:10px; width:7px; height:10px; background:#871c11; border-radius:50% 50% 43% 43%; box-shadow:0 0 4px #ffcc54; }
.event-blood-bone::before { left:10px; top:2px; width:10px; height:26px; background:linear-gradient(90deg,#6a170f,#e7d6bd 35%,#fff2d7 55%,#782019); border-radius:8px; transform:rotate(22deg); box-shadow:-5px -1px 0 -1px #e8d8be,6px 2px 0 -1px #e8d8be; }
.event-blood-bone::after { left:7px; top:4px; width:16px; height:22px; border:1px solid #9d271a; border-radius:50%; transform:rotate(22deg); }
.event-archangel-scroll::before { inset:4px 6px; border:1px solid #b89752; border-radius:2px; background:linear-gradient(90deg,#875b2f,#ead39a 16%,#fff0bf 50%,#b58146 84%,#6d4728); box-shadow:inset 0 0 0 2px #d1b271; }
.event-archangel-scroll::after { left:10px; top:10px; width:10px; height:2px; background:#805529; box-shadow:0 4px #805529,0 8px #805529; }
.event-invisibility-cloak::before { left:5px; top:3px; width:20px; height:25px; clip-path:polygon(25% 0,75% 0,94% 35%,78% 100%,50% 84%,22% 100%,6% 35%); background:linear-gradient(90deg,#34244b,#100b1e 45%,#45306a); border:1px solid #d1ae58; box-shadow:0 0 5px #5d3f94; }
.event-invisibility-cloak::after { left:12px; top:9px; width:6px; height:8px; border:1px solid #bca25d; border-radius:50% 50% 20% 20%; }

.inv-slot.potion-hp, .inv-slot.potion-mp { background: radial-gradient(circle, #313328, #10110e 70%); border-color: #c4ac68; box-shadow: inset 0 0 0 2px #090a08, inset 0 0 7px #000; }
.inv-slot.potion-hp:hover, .inv-slot.potion-mp:hover { border-color: #f0d47a; box-shadow: inset 0 0 0 2px #090a08, 0 0 8px #c892255e; }
.inv-slot.potion-hp .generated-item-icon, .inv-slot.potion-mp .generated-item-icon { width:30px; height:30px; margin:2px auto 3px; background-image:url('../assets/img/items/potion-icons.png') !important; background-size:200% 100% !important; background-position:0 0 !important; }
.inv-slot.potion-mp .generated-item-icon { background-position:100% 0 !important; }

@media (max-width: 720px) {
    .mu-inventory-window { width: calc(100% - 16px) !important; padding: 12px !important; left: auto !important; transform: none !important; position: relative !important; }
    .mu-inventory-window .inventory-grid { grid-template-columns: repeat(5, 1fr); padding: 5px; }
}

/* ---- Posicionamento Clássico do Inventário (Acima do seu ícone na barra) ---- */
#menu-modal-items.mu-inventory-window {
    position: fixed !important;
    bottom: 85px !important;
    left: 50% !important;
    transform: translateX(-15%) !important;
    margin: 0 !important;
    z-index: 1005 !important;
}

body:has(#mu-trade-window[style*="display: flex"]) #menu-modal-items.mu-inventory-window {
    bottom: 85px !important;
    left: calc(50% - 370px) !important;
    transform: none !important;
}

body:has(#mu-trade-window[style*="display: flex"]) #mu-trade-window.mu-trade-overlay {
    position: fixed !important;
    bottom: 85px !important;
    top: auto !important;
    left: calc(50% - 15px) !important;
    transform: none !important;
    padding: 0 !important;
    background: transparent !important;
}

body.game-ui-active:not(.trade-active) #menu-modal-items.mu-inventory-window,
body.game-ui-active:not(.trade-active) #menu-modal-attributes.mu-attributes-window {
    position:fixed !important;
    top:8px !important;
    bottom:auto !important;
    margin:0 !important;
    transform:none !important;
    z-index:10020 !important;
    touch-action:none;
}
.floating-panel-drag-handle { cursor:move; user-select:none; touch-action:none; }
.floating-panel-drag-handle button { cursor:pointer; }
.mu-classic-window.is-dragging { cursor:grabbing; box-shadow:0 18px 42px rgba(0,0,0,.92) !important; }

/* ==========================================
   EFEITOS VISUAIS DE LEVEL DE EQUIPAMENTO (Bless / Soul)
   Aplicado diretamente nos ícones (Excluindo Asas)
   ========================================== */

/* Níveis +1 ao +6 (Efeito Bless: Escurece progressivamente o ícone) */
.inv-slot-box:not(#eq-wings)[data-level="1"] .equipment-item-icon, .inv-slot-box:not(#eq-wings)[data-level="1"] .generated-item-icon,
.eq-slot.filled:not(#eq-wings)[data-level="1"] .eq-item-icon { filter: brightness(0.9); }

.inv-slot-box:not(#eq-wings)[data-level="2"] .equipment-item-icon, .inv-slot-box:not(#eq-wings)[data-level="2"] .generated-item-icon,
.eq-slot.filled:not(#eq-wings)[data-level="2"] .eq-item-icon { filter: brightness(0.8); }

.inv-slot-box:not(#eq-wings)[data-level="3"] .equipment-item-icon, .inv-slot-box:not(#eq-wings)[data-level="3"] .generated-item-icon,
.eq-slot.filled:not(#eq-wings)[data-level="3"] .eq-item-icon { filter: brightness(0.7); }

.inv-slot-box:not(#eq-wings)[data-level="4"] .equipment-item-icon, .inv-slot-box:not(#eq-wings)[data-level="4"] .generated-item-icon,
.eq-slot.filled:not(#eq-wings)[data-level="4"] .eq-item-icon { filter: brightness(0.65); }

.inv-slot-box:not(#eq-wings)[data-level="5"] .equipment-item-icon, .inv-slot-box:not(#eq-wings)[data-level="5"] .generated-item-icon,
.eq-slot.filled:not(#eq-wings)[data-level="5"] .eq-item-icon { filter: brightness(0.55); }

.inv-slot-box:not(#eq-wings)[data-level="6"] .equipment-item-icon, .inv-slot-box:not(#eq-wings)[data-level="6"] .generated-item-icon,
.eq-slot.filled:not(#eq-wings)[data-level="6"] .eq-item-icon { filter: brightness(0.45); }

/* Níveis +7 ao +9 (Efeito Soul inicial: Brilho Azulado no ícone) */
.inv-slot-box:not(#eq-wings)[data-level="7"] .equipment-item-icon, .inv-slot-box:not(#eq-wings)[data-level="7"] .generated-item-icon,
.eq-slot.filled:not(#eq-wings)[data-level="7"] .eq-item-icon { filter: brightness(1.1); drop-shadow: 0 0 4px rgba(100, 180, 255, 0.6); }

.inv-slot-box:not(#eq-wings)[data-level="8"] .equipment-item-icon, .inv-slot-box:not(#eq-wings)[data-level="8"] .generated-item-icon,
.eq-slot.filled:not(#eq-wings)[data-level="8"] .eq-item-icon { filter: brightness(1.2); drop-shadow: 0 0 6px rgba(100, 180, 255, 0.8); }

.inv-slot-box:not(#eq-wings)[data-level="9"] .equipment-item-icon, .inv-slot-box:not(#eq-wings)[data-level="9"] .generated-item-icon,
.eq-slot.filled:not(#eq-wings)[data-level="9"] .eq-item-icon { 
    filter: brightness(1.3); 
    animation: itemGlowSoul 2s ease-in-out infinite alternate;
}

/* Níveis +10 ao +13 (Brilho Intenso Dourado e Pulsante) */
.inv-slot-box:not(#eq-wings)[data-level="10"] .equipment-item-icon, .inv-slot-box:not(#eq-wings)[data-level="10"] .generated-item-icon,
.inv-slot-box:not(#eq-wings)[data-level="11"] .equipment-item-icon, .inv-slot-box:not(#eq-wings)[data-level="11"] .generated-item-icon,
.inv-slot-box:not(#eq-wings)[data-level="12"] .equipment-item-icon, .inv-slot-box:not(#eq-wings)[data-level="12"] .generated-item-icon,
.inv-slot-box:not(#eq-wings)[data-level="13"] .equipment-item-icon, .inv-slot-box:not(#eq-wings)[data-level="13"] .generated-item-icon,
.eq-slot.filled:not(#eq-wings)[data-level="10"] .eq-item-icon,
.eq-slot.filled:not(#eq-wings)[data-level="11"] .eq-item-icon,
.eq-slot.filled:not(#eq-wings)[data-level="12"] .eq-item-icon,
.eq-slot.filled:not(#eq-wings)[data-level="13"] .eq-item-icon { 
    filter: brightness(1.4); 
    animation: itemGlowHigh 1.5s ease-in-out infinite alternate;
}

/* Animações de brilho */
@keyframes itemGlowSoul {
    0% { filter: brightness(1.2) drop-shadow(0 0 4px rgba(50, 150, 255, 0.6)); }
    100% { filter: brightness(1.5) drop-shadow(0 0 10px rgba(50, 180, 255, 1)); }
}

@keyframes itemGlowHigh {
    0% { filter: brightness(1.3) drop-shadow(0 0 6px rgba(255, 200, 50, 0.7)); }
    100% { filter: brightness(1.6) drop-shadow(0 0 12px rgba(255, 230, 100, 1)); }
}

/* Identidade visual dos três tiers da Fairy Elf. A regra fica no ícone para
   valer igualmente no inventário e nos equipamentos, inclusive com +level. */
.elf-set-wind {
    filter:hue-rotate(165deg) saturate(1.85) brightness(1.18) drop-shadow(0 0 4px rgba(67,154,255,.72)) !important;
}
.elf-set-guardian {
    filter:grayscale(.2) saturate(.42) brightness(1.72) contrast(1.05) drop-shadow(0 0 4px rgba(244,249,255,.7)) !important;
}
.elf-set-red-spirit {
    filter:hue-rotate(310deg) saturate(2.2) brightness(1.16) drop-shadow(0 0 5px rgba(255,55,66,.72)) !important;
}

/* A aparência visual é do item: o mapa continua usando a skin normal. */
.dw-set-bone {
    filter:grayscale(.12) saturate(.18) brightness(1.88) contrast(1.08) drop-shadow(0 0 4px rgba(242,246,255,.78)) !important;
}
.dw-set-legendary {
    filter:hue-rotate(172deg) saturate(2.2) brightness(1.2) contrast(1.08) drop-shadow(0 0 5px rgba(49,137,255,.8)) !important;
}
.dw-set-dark-soul {
    filter:grayscale(.48) sepia(.58) saturate(1.05) brightness(1.24) contrast(1.13) drop-shadow(0 0 5px rgba(217,177,85,.78)) !important;
}
.dk-set-scale {
    filter:drop-shadow(0 0 5px rgba(63,184,102,.72)) !important;
}
.dk-set-dragon {
    filter:drop-shadow(0 0 5px rgba(232,169,62,.78)) !important;
}
.dk-set-great-dragon {
    filter:drop-shadow(0 0 5px rgba(218,185,92,.8)) !important;
}

/* Hover do inventário não desloca nem muda a leitura do ícone. */
.mu-inventory-window .inv-slot:hover,.mu-inventory-window .inv-slot-box:hover,.mu-inventory-window .eq-slot:hover { transform:none!important; }
.mu-inventory-window .eq-slot.filled:not(.item-excellent):hover .eq-item-icon,.mu-inventory-window .eq-slot.filled:not(.item-excellent):hover .equipment-item-icon { filter:grayscale(40%) contrast(110%) drop-shadow(0 2px 3px #000); opacity:.9; }
/* Todas as artes ocupam o centro geométrico da célula, inclusive imagens altas. */
.mu-inventory-window .inv-slot-box>.equipment-item-icon,.mu-inventory-window .inv-slot-box>.generated-item-icon,.mu-inventory-window .inv-slot-box>.jewel-item-icon,.mu-inventory-window .inv-slot-box>.event-item-icon,.mu-inventory-window .inv-slot-box>.quest-item-icon { position:absolute; left:50%; top:50%; margin:0!important; transform:translate(-50%,-50%); }

/* Camada de refinamento: as cores próprias dos sets usam filter!important.
   Por isso o escurecimento de Bless e o brilho de Soul vivem no slot, não no
   ícone. Assim os dois sistemas coexistem em qualquer classe e painel. */
.inv-slot-box.equipment-type:not(#eq-wings)[data-level]::after,
.mu-inventory-window .eq-slot.filled:not(#eq-wings)[data-level]::after {
    content:'';
    position:absolute;
    inset:2px;
    border-radius:3px;
    pointer-events:none;
    z-index:2;
}
.inv-slot-box.equipment-type[data-level="1"]::after,
.mu-inventory-window .eq-slot.filled[data-level="1"]::after { background:rgba(0,0,0,.10); }
.inv-slot-box.equipment-type[data-level="2"]::after,
.mu-inventory-window .eq-slot.filled[data-level="2"]::after { background:rgba(0,0,0,.18); }
.inv-slot-box.equipment-type[data-level="3"]::after,
.mu-inventory-window .eq-slot.filled[data-level="3"]::after { background:rgba(0,0,0,.27); }
.inv-slot-box.equipment-type[data-level="4"]::after,
.mu-inventory-window .eq-slot.filled[data-level="4"]::after { background:rgba(0,0,0,.35); }
.inv-slot-box.equipment-type[data-level="5"]::after,
.mu-inventory-window .eq-slot.filled[data-level="5"]::after { background:rgba(0,0,0,.43); }
.inv-slot-box.equipment-type[data-level="6"]::after,
.mu-inventory-window .eq-slot.filled[data-level="6"]::after { background:rgba(0,0,0,.52); }

.inv-slot-box.equipment-type[data-level="7"]::after,
.mu-inventory-window .eq-slot.filled[data-level="7"]::after { box-shadow:inset 0 0 6px rgba(72,166,255,.68), 0 0 5px rgba(72,166,255,.52); }
.inv-slot-box.equipment-type[data-level="8"]::after,
.mu-inventory-window .eq-slot.filled[data-level="8"]::after { box-shadow:inset 0 0 9px rgba(72,166,255,.84), 0 0 8px rgba(72,166,255,.72); }
.inv-slot-box.equipment-type[data-level="9"]::after,
.mu-inventory-window .eq-slot.filled[data-level="9"]::after { box-shadow:inset 0 0 12px rgba(89,185,255,.95), 0 0 11px rgba(89,185,255,.84); animation:itemRefinementSoul 1.7s ease-in-out infinite alternate; }

.inv-slot-box.equipment-type[data-level="10"]::after,
.inv-slot-box.equipment-type[data-level="11"]::after,
.inv-slot-box.equipment-type[data-level="12"]::after,
.inv-slot-box.equipment-type[data-level="13"]::after,
.mu-inventory-window .eq-slot.filled[data-level="10"]::after,
.mu-inventory-window .eq-slot.filled[data-level="11"]::after,
.mu-inventory-window .eq-slot.filled[data-level="12"]::after,
.mu-inventory-window .eq-slot.filled[data-level="13"]::after { box-shadow:inset 0 0 13px rgba(255,205,70,.88), 0 0 12px rgba(255,205,70,.9); animation:itemRefinementHigh 1.35s ease-in-out infinite alternate; }

@keyframes itemRefinementSoul {
    from { opacity:.62; transform:scale(.94); }
    to { opacity:1; transform:scale(1); }
}
@keyframes itemRefinementHigh {
    from { opacity:.68; transform:scale(.92); }
    to { opacity:1; transform:scale(1.03); }
}

/* ---- Item trancado (botão do meio do mouse) ---- */
/* A peça trancada não pode ser vendida, anunciada nem negociada. A marca é um
   cadeado no canto, com uma borda âmbar que se lê de relance no meio da grade. */
.inv-slot-box.is-locked {
    border-color: #c9a24a;
    box-shadow: inset 0 0 0 1px #3a2c0d, 0 0 7px rgba(201, 162, 74, .45);
}
/* O cadeado é um elemento próprio (.slot-lock), e não um ::after.

   Cada slot só tem UM ::after, e o brilho do refino já o usava:
   `.inv-slot-box.equipment-type:not(#eq-wings)[data-level]::after` tem
   especificidade maior (o #eq-wings dentro do :not conta como id) e vencia
   sempre. Resultado: peça refinada nunca mostrava o cadeado — era por isso
   que uns itens do set exibiam a marca e outros não. */
.slot-lock {
    position: absolute;
    z-index: 7;
    left: 2px;
    bottom: 1px;
    font-size: 11px;
    line-height: 11px;
    font-style: normal;
    text-shadow: 0 1px 2px #000;
    pointer-events: none;
}

/* O mesmo cadeado no painel de equipamento. */
.eq-slot.is-locked {
    border-color: #c9a24a;
    box-shadow: inset 0 0 0 1px #3a2c0d, 0 0 7px rgba(201, 162, 74, .45);
}
.eq-slot.is-locked > .slot-lock {
    position: absolute;
    z-index: 7;
    left: 2px;
    bottom: 1px;
    font-size: 11px;
    line-height: 11px;
    text-shadow: 0 1px 2px #000;
    pointer-events: none;
}