/* =====================================================================
   Janelas unificadas — acabamento de aço escuro do painel de Amigos.
   Este arquivo fica por último na página para concentrar o tema dos menus.
   ===================================================================== */

:root {
    --mu-steel-edge: #73858a;
    --mu-steel-light: #b9c7c8;
    --mu-steel-mid: #405057;
    --mu-steel-dark: #101718;
    --mu-panel-black: #070a0a;
    --mu-cyan: #85e7f5;
    --mu-excellent: #38cf77;
    --mu-common: #8a9ca1;
}

/* Moldura externa em aço, fundo com profundidade e borda interna. */
.mu-classic-window,
.mu-social-window,
.move-portal-panel,
.market-panel {
    border: 2px solid var(--mu-steel-edge) !important;
    border-radius: 3px !important;
    background:
        linear-gradient(135deg, rgba(108, 123, 126, .14), transparent 18%),
        linear-gradient(155deg, #202728 0%, #101516 42%, #070a0a 100%) !important;
    box-shadow:
        0 0 0 2px #070909,
        0 0 0 4px #394348,
        0 15px 38px rgba(0, 0, 0, .82),
        inset 0 0 0 1px rgba(216, 237, 237, .17),
        inset 0 0 26px rgba(0, 0, 0, .88) !important;
}

.mu-classic-window::after,
.mu-social-window::after {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(173, 196, 198, .24);
    box-shadow: inset 0 0 22px rgba(0, 0, 0, .55);
    pointer-events: none;
    z-index: 0;
}

.mu-classic-window > *,
.mu-social-window > * { position: relative; z-index: 1; }

.mu-classic-window .mu-classic-window-head,
.mu-social-window .mu-classic-window-head,
.move-portal-panel > header {
    min-height: 38px;
    margin: 0 0 12px !important;
    padding: 0 10px 8px !important;
    border: 1px solid rgba(149, 173, 177, .45) !important;
    border-left-color: rgba(205, 225, 225, .64) !important;
    border-top-color: rgba(205, 225, 225, .64) !important;
    background: linear-gradient(180deg, rgba(71, 84, 87, .75), rgba(16, 22, 23, .9)) !important;
    box-shadow: inset 0 1px rgba(235, 255, 255, .16), inset 0 -7px 15px rgba(0, 0, 0, .45) !important;
}

.mu-classic-window .mu-classic-window-head h2,
.mu-social-window .mu-classic-window-head h2 {
    color: #f0f6f5 !important;
    font: 700 17px/1 Georgia, serif !important;
    letter-spacing: .15px;
    text-shadow: 1px 1px #000, 0 0 8px rgba(204, 242, 245, .17) !important;
}

/* Um único cabeçalho de identidade por janela: ícone do HUD + categoria + título. */
.mu-classic-window .mu-classic-window-head.menu-window-identity,
.mu-social-window .mu-classic-window-head.menu-window-identity {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 56px !important;
    padding: 7px 10px !important;
    margin: 0 0 10px !important;
}

.menu-window-brand,
.menu-window-head-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.menu-window-brand > div { min-width: 0; }
.menu-window-brand small {
    display: block;
    margin: 0 0 2px;
    color: #88aeb6;
    font: 700 11px/1 Arial, sans-serif;
    letter-spacing: 1.35px;
}

.menu-window-brand h2 {
    margin: 0 !important;
    white-space: nowrap;
}

.menu-window-icon {
    display: block;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    background: center/contain no-repeat;
    filter: drop-shadow(0 2px 3px #000) drop-shadow(0 0 5px rgba(97, 212, 238, .22));
}

.menu-window-icon.menu-friends-icon { background-image: url('../assets/img/ui/menu-icon-friends-v2.png'); }
.menu-window-icon.menu-guild-icon { background-image: url('../assets/img/ui/menu-icon-guild-v2.png'); }
.menu-window-icon.menu-inventory-icon { background-image: url('../assets/img/ui/menu-icon-inventory.png'); }
.menu-window-icon.menu-attributes-icon { background-image: url('../assets/img/ui/menu-icon-attributes.png'); }
.menu-window-icon.menu-move-window-icon {
    border-radius: 50%;
    background-image: radial-gradient(circle at 50% 50%, transparent 34%, #49d9ff 36% 42%, #153b58 45% 54%, #071218 57%);
    box-shadow: 0 0 8px rgba(73, 217, 255, .55), inset 0 0 8px #07131b;
}
.menu-window-icon.menu-market-window-icon {
    border: 1px solid #537d78;
    border-radius: 3px;
    background-color: #0c1716;
    background-image: url('../assets/img/ui/zen-ground-pile-clear.png'), radial-gradient(circle at 50% 50%, #f3d46e 0 16%, #ad7922 18% 35%, #362307 37% 48%, transparent 50%);
    background-size: 28px 28px, 100% 100%;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    box-shadow: inset 0 0 8px #000, 0 0 7px rgba(94, 225, 183, .25);
}

.menu-window-head-actions { margin-left: auto; }
.menu-window-head-actions b {
    color: #66e59d;
    font: 700 11px Arial, sans-serif;
    white-space: nowrap;
}

/* Não repetir no corpo as informações que já estão no cabeçalho. */
.friends-float .friends-panel > header,
.guild-float .guild-panel > header { display: none !important; }

.friends-float .friends-panel,
.guild-float .guild-panel {
    padding-top: 2px !important;
}

/* X animado: um pequeno pulso metálico ao passar/clicar, sem tela escura. */
.mu-classic-close,
.move-portal-close,
.mu-classic-close-btn,
.market-modal-close {
    display: inline-grid !important;
    place-items: center !important;
    width: 23px !important;
    min-width: 23px !important;
    height: 23px !important;
    padding: 0 !important;
    border: 1px solid #82969b !important;
    border-radius: 2px !important;
    background: linear-gradient(145deg, #425055, #111718 62%) !important;
    color: #e6f7f7 !important;
    font: 700 18px/18px Arial, sans-serif !important;
    text-shadow: 0 1px #000 !important;
    cursor: pointer !important;
    transition: border-color .16s ease, color .16s ease, filter .16s ease, transform .16s ease !important;
}

.mu-classic-close:hover,
.move-portal-close:hover,
.mu-classic-close-btn:hover,
.market-modal-close:hover {
    color: #fff !important;
    border-color: var(--mu-cyan) !important;
    filter: brightness(1.28) drop-shadow(0 0 5px rgba(126, 231, 245, .62));
    /* Um pulso único deixa o botão vivo sem o efeito de piscar continuamente. */
    animation: mu-close-pulse .42s ease-out 1;
}

.mu-classic-close:active,
.move-portal-close:active,
.mu-classic-close-btn:active,
.market-modal-close:active { transform: scale(.86) rotate(90deg) !important; }

/* /move usa o mesmo cabeçalho dos painéis sociais, sem a antiga caixa solta. */
.move-portal-panel { padding: 10px !important; }
.move-portal-panel .move-window-head {
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    min-height:56px !important;
    margin:0 0 10px !important;
    padding:7px 10px !important;
}
.move-portal-panel .move-window-head h2 { margin:0 !important; color:#f0f6f5 !important; font:700 17px/1 Georgia,serif !important; }
.move-portal-panel .move-window-head small { display:block; margin:0 0 2px; color:#88aeb6; font:700 11px/1 Arial,sans-serif; letter-spacing:1.35px; }
.move-portal-panel > p { margin:0 4px 12px !important; }
.move-portal-panel .move-portal-close { position:static !important; flex:0 0 23px; }

/* Baú alinhado ao mesmo painel: cabeçalho e conteúdo têm a mesma largura interna. */
.mu-storage-window { box-sizing:border-box !important; padding:10px !important; }
.mu-storage-window .mu-classic-window-head { box-sizing:border-box !important; width:100% !important; margin:0 0 10px !important; }
.mu-storage-window #storage-chest-currencies,
.mu-storage-window #storage-chest-items { width:100% !important; box-sizing:border-box !important; }

/* Mercado e Reset passam a usar a moldura, cabeçalho e ícone do restante da interface. */
#menu-modal-market.market-window-main { border-color:var(--mu-steel-edge) !important; border-radius:3px !important; background:linear-gradient(155deg,#202728 0%,#101516 42%,#070a0a 100%) !important; }
#menu-modal-market .mu-classic-window-head.menu-window-identity { display:flex !important; align-items:center !important; justify-content:space-between !important; min-height:56px !important; padding:7px 10px !important; margin:0 0 10px !important; border:1px solid rgba(149,173,177,.45) !important; background:linear-gradient(180deg,rgba(71,84,87,.75),rgba(16,22,23,.9)) !important; }
#menu-modal-market .mu-classic-window-head::before { display:none !important; }
#menu-modal-market .mu-classic-window-head h2 { margin:0 !important; color:#f0f6f5 !important; font:700 17px/1 Georgia,serif !important; }
#menu-modal-market .mu-classic-window-head small { display:block; margin:0 0 2px; color:#88aeb6; font:700 11px/1 Arial,sans-serif; letter-spacing:1.35px; }
#menu-modal-market .mu-classic-close-btn { display:inline-grid !important; place-items:center !important; }
#menu-modal-market .mu-classic-close-btn {
    width:23px !important; min-width:23px !important; height:23px !important; padding:0 !important;
    border:1px solid #82969b !important; border-radius:2px !important;
    background:linear-gradient(145deg,#425055,#111718 62%) !important;
    color:#e6f7f7 !important; font:700 18px/18px Arial,sans-serif !important;
}
#menu-modal-market .mu-classic-close-btn:hover { border-color:var(--mu-cyan) !important; color:#fff !important; animation:mu-close-pulse .42s ease-out 1; }
#menu-modal-market .mu-classic-close-btn:active { transform:scale(.86) rotate(90deg) !important; }
.mu-reset-window { border-color:var(--mu-steel-edge) !important; }
.mu-reset-window .mu-classic-window-head {
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    min-height:46px !important;
    padding:5px 10px !important;
}
.mu-reset-window .mu-classic-window-head h2 { margin:0 !important; }

@keyframes mu-close-pulse {
    50% { box-shadow: 0 0 0 1px rgba(126, 231, 245, .38), 0 0 10px rgba(126, 231, 245, .5), inset 0 0 8px rgba(126, 231, 245, .27); }
}

/* Abas e botões compartilham o brilho do menu selecionado. */
.mu-classic-window .guild-tab-btn,
.mu-social-window .guild-tab-btn,
.mu-classic-window .mu-classic-btn,
.mu-social-window .mu-classic-btn,
.mu-classic-window .attr-card button {
    border-color: #61757b !important;
    background: linear-gradient(180deg, #3a474c, #12191b 68%) !important;
    color: #e1eeee !important;
    box-shadow: inset 0 1px rgba(237, 255, 255, .16), inset 0 -8px 14px rgba(0, 0, 0, .34) !important;
    transition: transform .16s ease, filter .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}

.mu-classic-window .guild-tab-btn.active,
.mu-social-window .guild-tab-btn.active {
    border-color: #a7e9f4 !important;
    background: linear-gradient(180deg, #527782, #16242a 70%) !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(217, 252, 255, .35), 0 0 11px rgba(87, 209, 232, .36) !important;
}

.mu-classic-window .mu-classic-btn:hover,
.mu-social-window .mu-classic-btn:hover,
.mu-classic-window .attr-card button:hover:not(:disabled) {
    transform: translateY(-1px) !important;
    border-color: var(--mu-cyan) !important;
    filter: brightness(1.2);
    box-shadow: inset 0 0 10px rgba(115, 228, 244, .2), 0 0 9px rgba(115, 228, 244, .25) !important;
}

.mu-classic-window .attr-card button:hover:not(:disabled) { animation: mu-attribute-rune 1s ease-in-out infinite; }
@keyframes mu-attribute-rune { 50% { color: #fff !important; box-shadow: inset 0 0 12px rgba(96, 255, 166, .35), 0 0 11px rgba(76, 233, 138, .55) !important; } }

/* O hub continua a ser a origem dos ícones; nos menus o painel social os reutiliza. */
.social-panel-icon { filter: drop-shadow(0 1px 2px #000) drop-shadow(0 0 5px rgba(99, 218, 244, .25)); }
.friends-panel header h3 { color: #edf8f8 !important; }

/* Inventário: células uniformes (5 x 10) e sem sobras geométricas. */
#menu-modal-items .inventory-grid {
    display: grid !important;
    grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    grid-auto-flow: row !important;
    gap: 4px !important;
    align-items: stretch !important;
    align-content: start !important;
    /* Sem altura fixa: a célula é quadrada por aspect-ratio e a grade cresce
       com ela. Antes eram 5 colunas x 10 linhas com célula de 58x36 —
       retangular, o que esticava o ícone quadrado do item. Amarrar a altura em
       pixels sempre desalinhava de novo quando a largura mudava. */
    height: auto !important;
    overflow: hidden !important;
    border-color: #54666b !important;
    background: linear-gradient(145deg, #151a1a, #080b0b) !important;
}

/* Grade de equipamento: todos os 15 espaços conservam exatamente a mesma
   medida, inclusive Asa, Pet e Botas quando vazios. */
#menu-modal-items .mu-equipment-layout {
    display: grid !important;
    /* Slots de 52 para 78px. O pedido era enxergar melhor o item EQUIPADO, e
       o gargalo era a própria célula — aumentar só o ícone não adiantava,
       porque ele esbarrava na borda do slot. */
    grid-template-columns: repeat(5, 78px) !important;
    grid-template-rows: repeat(3, 78px) !important;
    gap: 4px !important;
    width: max-content !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding: 8px !important;
    box-sizing: border-box !important;
}

#menu-modal-items .mu-equipment-layout .eq-slot {
    display: grid !important;
    place-items: center !important;
    width: 78px !important;
    min-width: 78px !important;
    height: 78px !important;
    min-height: 78px !important;
    padding: 3px !important;
    box-sizing: border-box !important;
}

#menu-modal-items .inv-slot,
#menu-modal-items .inv-slot-box {
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    border-color: #536166 !important;
    background: linear-gradient(145deg, #293033, #0c1011 65%) !important;
}

/* Qualidade da peça é visível no slot, não apenas no tooltip. */
#menu-modal-items .eq-slot.filled:not(.item-excellent),
#menu-modal-items .inv-slot.filled:not(.item-excellent),
#menu-modal-items .inv-slot-box.filled:not(.item-excellent) {
    border-color: var(--mu-common) !important;
    box-shadow: inset 0 0 0 1px #101415, inset 0 0 9px rgba(108, 127, 129, .19) !important;
}

#menu-modal-items .eq-slot.item-excellent,
#menu-modal-items .inv-slot.item-excellent,
#menu-modal-items .inv-slot-box.item-excellent {
    border-color: var(--mu-excellent) !important;
    /* Não usar shorthand `background`: nos slots equipados ele apagava o
       background-image do sprite do item. */
    background-color: #102116 !important;
    box-shadow: inset 0 0 0 1px rgba(174, 255, 201, .42), inset 0 0 12px rgba(37, 210, 101, .24), 0 0 6px rgba(37, 210, 101, .25) !important;
}

/* ---- Borda por raridade ----

   A regra logo ACIMA pintava TODA peça não-excelente com a mesma cor
   (--mu-common), com (1,3,1) e !important: ela vencia as .item-quality-*
   de inventory.css (0,1,0) e o inventário inteiro ficava com uma borda só.
   O Ancient, por ser "excelente" para efeito de código, ainda herdava o
   verde do Excelente.

   Esta vem DEPOIS das duas — mesma especificidade, e aí a ordem decide — e
   lê a cor da própria tabela de raridades, publicada como --rarity pelo JS.
   Uma regra para as oito raridades, sem paleta duplicada no CSS. */
#menu-modal-items .eq-slot.filled.has-rarity,
#menu-modal-items .inv-slot.filled.has-rarity,
#menu-modal-items .inv-slot-box.filled.has-rarity,
.mu-inventory-window .eq-slot.filled.has-rarity,
.mu-inventory-window .inv-slot-box.filled.has-rarity {
    border-color: var(--rarity) !important;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .75), 0 0 7px color-mix(in srgb, var(--rarity), transparent 62%) !important;
}


.item-class-line.item-class-mismatch,
.item-class-line.item-class-mismatch b {
    color: #ff6262 !important;
    text-shadow: 0 1px #270000;
}

/* Roxo marca requisito de segunda classe; vermelho permanece exclusivo para
   classe-base errada e atributos insuficientes. */
.item-class-line.item-class-advanced-missing,
.item-class-line.item-class-advanced-missing b,
.item-requirement-advanced-missing {
    color:#ca8dff !important;
    text-shadow:0 1px #21002e, 0 0 4px rgba(183,104,255,.42);
}
.item-advanced-class-unmet {
    border-color:#b575ff !important;
    box-shadow:inset 0 0 13px rgba(154,74,255,.28), 0 0 7px rgba(154,74,255,.36) !important;
}

#menu-modal-items .eq-slot.item-excellent:hover,
#menu-modal-items .inv-slot.item-excellent:hover,
#menu-modal-items .inv-slot-box.item-excellent:hover {
    border-color: #99ffc2 !important;
    box-shadow: inset 0 0 12px rgba(37, 210, 101, .35), 0 0 12px rgba(37, 210, 101, .45) !important;
}

/* ---- Poder do equipamento ---- */
/* O número grande é o resumo; a trilha abaixo mostra o que cada marco libera,
   incluindo os que ainda faltam — é o que dá objetivo à próxima troca de peça. */
/* margin-bottom: o bloco encostava no título "Status Avançados" logo abaixo. */
.mu-attributes-window .power-panel { display:grid; gap:7px; margin:0 0 14px; padding:9px; border:1px solid #6b5a30; background:linear-gradient(155deg,rgba(48,40,20,.92),rgba(10,10,8,.97)); }
.mu-attributes-window .stats-panel h3 + .power-panel { margin-top:0; }
.power-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.power-head strong { color:#f4d98b; font:700 24px/1 Georgia,serif; text-shadow:0 2px 4px #000; }
.power-rank { padding:2px 8px; border:1px solid #a5854a; background:rgba(10,8,4,.75); color:#f0dfae; font:700 11px Georgia,serif; letter-spacing:1px; text-transform:uppercase; }
.power-bar { height:7px; border:1px solid #5d5636; background:#0a0b08; overflow:hidden; }
.power-bar i { display:block; height:100%; background:linear-gradient(90deg,#8a6c22,#f2cf6a); box-shadow:0 0 8px #f2cf6a88; }
.power-next { color:#bfc7b6; font:11px/1.3 Arial,sans-serif; }
.power-next b { color:#f2d98d; }
.power-milestones { display:grid; gap:3px; margin:0; padding:0; list-style:none; }
.power-milestones li { display:grid; grid-template-columns:13px 78px 46px minmax(0,1fr); align-items:center; gap:6px; padding:3px 6px; border:1px solid #3d3f33; background:rgba(8,10,8,.7); color:#8d968a; font:11px/1.25 Arial,sans-serif; }
.power-milestones li > i { font-style:normal; font-size:11px; text-align:center; color:#5f6a5c; }
.power-milestones li.reached > i { color:#8fd06a; }
.power-milestones li b em { display:block; font:700 10px Arial,sans-serif; font-style:normal; letter-spacing:.6px; text-transform:uppercase; color:#d9b463; }
.power-milestones li b { color:#9aa393; font:700 11px Georgia,serif; }
.power-milestones li small { color:#7e8778; font:700 11px Consolas,monospace; }
.power-milestones li span { overflow-wrap:anywhere; }
.power-milestones li.reached { border-color:#6f8a4e; background:rgba(19,30,15,.8); color:#cfe3bd; }
.power-milestones li.reached b { color:#b6e08c; }
/* O próximo marco é destaque de ALVO, não de conquista: borda tracejada e
   fundo apagado. Preenchido e dourado, ele era lido como já liberado. */
.power-milestones li.is-next { border-style:dashed; border-color:#8a7440; background:rgba(20,17,10,.7); color:#b9ac8b; }
.power-milestones li.is-next b { color:#d9b463; }
.power-milestones li.is-next > i { color:#8a7440; }
.power-set { padding:5px 7px; border:1px solid #4a5f64; background:rgba(8,14,15,.72); color:#cfe0e2; font:11px/1.35 Arial,sans-serif; }
.power-set b { color:#8fd9e8; }
.power-set.is-empty { color:#8b9694; }
.set-rule { color:#9aa8a4; font-size:11px; }
.set-rule-warning { color:#e0a55f; font-size:11px; }
/* Status: duas colunas estáveis, título centralizado e números com a mesma métrica. */
.mu-attributes-window .stats-panel {
    margin-top: 9px !important;
    padding: 10px !important;
    border: 1px solid rgba(149, 173, 177, .48) !important;
    background: linear-gradient(155deg, rgba(42, 51, 53, .94), rgba(9, 13, 14, .97)) !important;
}

.mu-attributes-window .stats-panel h3 {
    margin: 0 0 8px !important;
    padding: 0 0 7px !important;
    border-bottom: 1px solid rgba(123, 151, 156, .48) !important;
    color: #a9dce5 !important;
    font: 700 11px/1 Georgia, serif !important;
    letter-spacing: 1.3px !important;
    text-align: center !important;
    text-transform: uppercase;
}

.mu-attributes-window .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
}

.mu-attributes-window .stat-box {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 58px !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 27px !important;
    padding: 5px 7px !important;
    border: 1px solid #3e5055 !important;
    background: linear-gradient(90deg, #101718, #080c0d) !important;
    font: 700 11px/1 Arial, sans-serif !important;
}

.mu-attributes-window .stat-box span:first-child { color: #cad8d8 !important; white-space: nowrap; }
.mu-attributes-window .stat-box span:last-child {
    min-width: 0;
    color: #55eca0 !important;
    font: 700 12px/1.1 Arial, sans-serif !important;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.mu-attributes-window .attribute-shortcuts {
    margin-top: 9px !important;
    padding: 8px !important;
    border-color: rgba(149, 173, 177, .48) !important;
    color: #e5f0ef !important;
    font: 700 11px/1 Arial, sans-serif !important;
    letter-spacing: .25px;
    text-align: center !important;
}

@media (max-width: 440px) {
    .mu-attributes-window .stats-grid { grid-template-columns: 1fr !important; }
}

/* Pequenas telas mantêm a geometria sem criar barra de rolagem interna. */
@media (max-width: 620px) {
    #menu-modal-items .inventory-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; grid-auto-rows:auto !important; height:auto !important; }
}