/* ===== css/social.css =====
   Modais de troca, party, guilda e solicitações sociais (Estilo MU Online Clássico). */
.online-modal {
    position: fixed;
    z-index: 1002;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.75);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, visibility .15s ease;
}
.online-modal.visible { opacity: 1; visibility: visible; }

/* Caixa principal estilo janela de diálogo clássica do MU Online */
.online-modal > div {
    position: relative;
    width: min(320px, 94vw);
    padding: 20px;
    pointer-events: auto;
    background: radial-gradient(circle, #1a2228 0%, #090d10 100%);
    border: 3px solid #484f58;
    border-radius: 4px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.95), inset 0 0 15px rgba(0, 0, 0, 0.9);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Cabeçalho clássico em tom branco/dourado com fonte serifada */
.online-modal h3 { 
    margin: 0 0 8px; 
    color: #ffffff; 
    font-family: 'Cinzel', 'Times New Roman', serif; 
    font-size: 17px; 
    letter-spacing: 1px;
    text-align: center;
    border-bottom: 1px solid #30363d; 
    padding-bottom: 8px; 
    text-shadow: 2px 2px 3px #000;
}

.online-modal p { 
    color: #c9d1d9; 
    font-size: 13px; 
    text-align: center;
    line-height: 1.45; 
    margin-bottom: 16px; 
    text-shadow: 1px 1px 2px #000;
}

/* Botões de Ação do Menu de Jogadores (/trade, /party, /guild) */
.online-modal button { 
    margin: 4px 0; 
    width: 100%;
    background: linear-gradient(to bottom, #21262d, #12161f);
    border: 1px solid #484f58;
    color: #c9d1d9;
    padding: 9px 12px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.15s ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 4px rgba(0,0,0,0.4);
}

.online-modal button:hover {
    background: linear-gradient(to bottom, #1f6feb, #1158c7);
    border-color: #58a6ff;
    color: #ffffff;
    box-shadow: 0 0 8px rgba(88, 166, 255, 0.5);
}

/* Estilo para os botões de Confirmação estrito ao estilo MU (OK / CANCEL) */
.online-modal-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.online-modal-buttons button {
    text-align: center;
    justify-content: center;
    background: linear-gradient(to bottom, #30363d, #161b22);
    border: 2px solid #6e7681;
    color: #ffffff;
    font-family: 'Cinzel', serif;
    font-weight: bold;
    letter-spacing: 1px;
}

.online-modal button[data-online-decline], 
.online-modal-buttons button.cancel-btn { 
    background: linear-gradient(to bottom, #4a1515, #260a0a); 
    border-color: #da3633;
}
.online-modal button[data-online-decline]:hover,
.online-modal-buttons button.cancel-btn:hover {
    background: linear-gradient(to bottom, #da3633, #8b0000);
    border-color: #f85149;
}

/* Botão de Fechar (X) Clássico */
.online-close { 
    position: absolute; 
    right: 8px; 
    top: 6px; 
    padding: 2px 6px !important; 
    background: transparent !important; 
    border: none !important;
    font-size: 16px; 
    color: #8b949e;
    cursor: pointer;
    width: auto !important;
}
.online-close:hover { 
    color: #ff7b72 !important; 
    background: transparent !important; 
    box-shadow: none !important; 
}

#online-player-actions > div { width: min(280px, 88vw); }
#online-player-actions h3 { padding-right: 24px; text-align: left; }

.mu-player-context{position:fixed;z-index:10050;width:180px;padding:7px;border:2px solid #77715b;background:linear-gradient(145deg,#24201b,#090a0b);box-shadow:0 8px 22px #000,inset 0 0 0 1px #080808;color:#f4e5b4;font:700 12px Georgia,serif}.mu-player-context[hidden]{display:none}.mu-player-context strong{display:block;padding:6px 7px;border-bottom:1px solid #615943}.mu-player-context button{display:block;width:100%;margin-top:4px;padding:8px;border:1px solid #514d42;background:#151617;color:#eee8d4;text-align:left;font:700 12px Georgia,serif}.mu-player-context button:hover{border-color:#e2bd52;background:#373021;color:#fff2bd}.player-inspect-panel{width:min(390px,94vw)!important}.player-inspect-equipment{display:grid;grid-template-columns:repeat(5,58px);grid-template-rows:repeat(3,58px);justify-content:center;gap:3px;margin:auto;padding:9px;border:2px solid #777a78;background:linear-gradient(135deg,#111213,#3a3c3d 48%,#080909);box-shadow:inset 0 0 0 2px #050505,inset 0 0 20px #000}.player-inspect-slot{width:58px!important;min-width:0!important;height:58px!important;min-height:58px!important;padding:3px!important;overflow:hidden!important;cursor:default!important}.player-inspect-slot:hover{z-index:5}.player-inspect-slot::before{content:'';position:absolute;inset:4px;z-index:0;opacity:.3;background-image:url('../assets/img/items/equipment-slot-silhouettes-source.png');background-repeat:no-repeat;background-size:400% 300%;filter:grayscale(1) contrast(.9) brightness(.9);pointer-events:none}.player-inspect-slot.filled::before{display:none}.player-inspect-slot.slot-wings{grid-column:1;grid-row:1}.player-inspect-slot.slot-helm{grid-column:3;grid-row:1}.player-inspect-slot.slot-pet{grid-column:5;grid-row:1}.player-inspect-slot.slot-weapon{grid-column:1;grid-row:2}.player-inspect-slot.slot-pendant{grid-column:2;grid-row:2}.player-inspect-slot.slot-armor{grid-column:3;grid-row:2}.player-inspect-slot.slot-shield{grid-column:4;grid-row:2}.player-inspect-slot.slot-gloves{grid-column:1;grid-row:3}.player-inspect-slot.slot-ring1{grid-column:2;grid-row:3}.player-inspect-slot.slot-pants{grid-column:3;grid-row:3}.player-inspect-slot.slot-ring2{grid-column:4;grid-row:3}.player-inspect-slot.slot-boots{grid-column:5;grid-row:3}.player-inspect-slot.slot-helm::before{background-position:0 0}.player-inspect-slot.slot-wings::before{background-position:33.333% 0}.player-inspect-slot.slot-pet::before{background-position:66.667% 0}.player-inspect-slot.slot-weapon::before{background-position:100% 0}.player-inspect-slot.slot-pendant::before{background-position:0 50%}.player-inspect-slot.slot-armor::before{background-position:33.333% 50%}.player-inspect-slot.slot-shield::before{background-position:66.667% 50%}.player-inspect-slot.slot-gloves::before{background-position:100% 50%}.player-inspect-slot.slot-ring1::before{background-position:0 100%}.player-inspect-slot.slot-pants::before{background-position:33.333% 100%}.player-inspect-slot.slot-ring2::before{background-position:0 100%}.player-inspect-slot.slot-boots::before{background-position:100% 100%}.player-inspect-slot i{position:relative;z-index:1;color:#526064;font:20px Georgia,serif;font-style:normal}.player-inspect-slot.is-empty{cursor:default!important}.player-inspect-slot .player-inspect-item-icon{position:relative;z-index:1;display:block;width:42px!important;height:42px!important;margin:0!important;background-repeat:no-repeat;filter:drop-shadow(0 2px 3px #000)}.player-inspect-slot[data-level]{box-shadow:inset 0 0 7px #000}.player-inspect-slot:focus-visible{outline:1px solid #dfc56d;outline-offset:2px}@media(max-width:360px){.player-inspect-equipment{grid-template-columns:repeat(5,50px);grid-template-rows:repeat(3,50px);gap:2px;padding:6px}.player-inspect-slot{width:50px!important;height:50px!important;min-height:50px!important}.player-inspect-slot .player-inspect-item-icon{width:36px!important;height:36px!important}}

.pk-map-announcement{position:fixed;z-index:28000;top:18vh;left:50%;width:min(590px,calc(100vw - 38px));padding:15px 28px;opacity:0;transform:translate(-50%,-24px) scale(.94);pointer-events:none;text-align:center;color:#fff0e8;background:linear-gradient(90deg,#260606e8,#6e1212f4,#260606e8);border:1px solid #f05252;box-shadow:0 0 0 2px #240303,0 0 34px #e82c2c80;transition:opacity .25s,transform .25s}.pk-map-announcement.is-visible{opacity:1;transform:translate(-50%,0) scale(1)}.pk-map-announcement small,.pk-map-announcement strong,.pk-map-announcement p{display:block}.pk-map-announcement small{color:#ffbc83;font:700 9px Georgia,serif;letter-spacing:1.7px}.pk-map-announcement strong{margin:4px 0;color:#fff3d4;font:700 21px Georgia,serif;text-shadow:0 2px 5px #260000}.pk-map-announcement p{margin:0;color:#ffd3c4;font:600 13px Georgia,serif}
.mu-classic-event-message{position:fixed;z-index:28010;top:28vh;left:50%;width:max-content;max-width:calc(100vw - 18px);margin:0;opacity:0;transform:translate(-50%,-5px);pointer-events:none;white-space:nowrap;text-align:center;color:#ffe034;font:700 clamp(12px,1.55vw,21px)/1.32 Arial,sans-serif;text-shadow:1px 1px 0 #4a3300,0 2px 3px #000,0 0 7px rgba(255,178,0,.55);transition:opacity .16s ease,transform .16s ease}.mu-classic-event-message.is-visible{opacity:1;transform:translate(-50%,0)}

/* Comandos via D: primeiro escolhe a ação, depois escolhe o alvo no mapa. */
.mu-command-menu{position:fixed;z-index:10040;left:20px;top:calc(50% - 182px);width:172px;padding:12px 12px 24px;border:4px solid #17191a;border-radius:2px;background:linear-gradient(135deg,#151819,#54575a 4%,#212426 11%,#54575a 49%,#191b1c 53%,#3c3f40 100%);box-shadow:0 0 0 2px #050606,0 13px 28px #000,inset 0 0 0 2px #797d7d,inset 0 0 30px #020303;color:#e4e8e8;font-family:Georgia,serif}.mu-command-menu::before{content:'';position:absolute;inset:8px;border:1px solid #050606;box-shadow:inset 0 0 18px #000;pointer-events:none}.mu-command-menu[hidden]{display:none!important}.mu-command-menu header,.mu-command-menu p,.mu-command-menu>button{position:relative;z-index:1}.mu-command-menu header{display:flex;align-items:center;justify-content:space-between;padding:4px 3px 9px;border-bottom:1px solid #8b8d8c}.mu-command-menu header strong{color:#f2f3f2;font-size:14px;text-shadow:1px 1px #000}.mu-command-menu header button{width:19px;height:19px;padding:0;border:1px solid #8b8d8c;background:linear-gradient(#2e3132,#111314);color:#f4f4f4;font:700 15px/15px Arial}.mu-command-menu p{margin:11px 4px;color:#eceeed;font:11px/1.35 Arial,sans-serif}.mu-command-menu>button[data-command]{display:flex;align-items:center;justify-content:center;gap:8px;width:128px;margin:7px auto;padding:8px 6px;border:1px solid #7d6d46;background:linear-gradient(145deg,#0b0c0c,#272827 48%,#0a0b0b);box-shadow:inset 0 0 0 1px #020202,inset 0 0 9px #000;color:#eeece3;font:700 11px Georgia,serif;text-align:center}.mu-command-menu>button[data-command] i{display:none}.mu-command-menu>button[data-command]:hover,.mu-command-menu>button[data-command].selected{border-color:#d2b75e;color:#f5d66b;background:linear-gradient(145deg,#2c2a21,#0d0d0c);box-shadow:inset 0 0 11px rgba(212,183,89,.19)}

/* ---- Janela de Trade Clássica do MU Online (Estilo da Imagem) ---- */
.mu-trade-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1005;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.mu-trade-container {
    width: 340px;
    background: radial-gradient(circle, #1c2128 0%, #0d1117 100%);
    border: 3px solid #484f58;
    border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.9), inset 0 0 15px rgba(0,0,0,0.8);
    color: #c9d1d9;
    overflow: hidden;
}

.mu-trade-header {
    background: linear-gradient(to bottom, #21262d, #161b22);
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #30363d;
    font-family: 'Cinzel', serif;
    font-weight: bold;
    color: #e3b341;
    font-size: 14px;
}

.mu-trade-close-x {
    background: transparent;
    border: none;
    color: #ff7b72;
    font-size: 18px;
    cursor: pointer;
    font-weight: bold;
}

.mu-trade-body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mu-trade-section {
    background: #090d10;
    border: 1px solid #30363d;
    border-radius: 4px;
    padding: 8px;
}

.mu-trade-user-info {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #8b949e;
    margin-bottom: 6px;
}
.mu-trade-user-info strong { color: #58a6ff; font-size: 12px; }

.mu-trade-item-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 36px);
    gap: 4px;
    background: #12161f;
    padding: 4px;
    border: 1px solid #21262d;
    border-radius: 4px;
    margin-bottom: 6px;
}

.mu-trade-slot {
    background: #1a222c;
    border: 1px solid #30363d;
    border-radius: 3px;
    cursor: pointer;
}
.mu-trade-slot:hover { border-color: #58a6ff; }
.trade-item-icon { display:block; width:100%; height:100%; background-repeat:no-repeat; background-position:center; background-size:contain; filter:drop-shadow(0 1px 2px #000); }
.trade-item-fallback { display:grid; width:100%; height:100%; place-items:center; color:#dbe8ec; font:700 14px Georgia,serif; }
.mu-trade-slot .jewel-item-icon { width:25px; height:25px; margin:5px auto; }

.mu-trade-zen-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}
.mu-trade-zen-row input {
    flex: 1;
    background: #161b22;
    border: 1px solid #30363d;
    color: #e3b341;
    padding: 3px 6px;
    border-radius: 3px;
    font-family: monospace;
    font-weight: bold;
    text-align: right;
}

.mu-trade-warning-box {
    background: #160d0d;
    border: 1px solid #5a1d1d;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 11px;
    color: #d29922;
    line-height: 1.3;
    text-align: center;
}
.warning-title { color: #da3633; font-weight: bold; }

.mu-trade-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 4px;
    border-top: 1px solid #30363d;
}

.trade-action-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mu-trade-footer button {
    background: linear-gradient(to bottom, #21262d, #12161f);
    border: 1px solid #484f58;
    color: #c9d1d9;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
}
.mu-trade-footer button:hover { background: #30363d; color: #fff; }

.trade-orb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle, #30363d 0%, #12161f 100%);
    border: 2px solid #6e7681;
    cursor: pointer;
    transition: all 0.2s;
}
.trade-orb.accepted {
    background: radial-gradient(circle, #238636 0%, #0e3b16 100%);
    border-color: #3fb950;
    box-shadow: 0 0 8px #3fb950;
}
.trade-orb.partner-accepted { box-shadow:0 0 0 2px #d29922, 0 0 9px #d29922; }

.trade-cancel-x {
    width: 22px;
    height: 22px;
    background: linear-gradient(to bottom, #da3633, #670606);
    border: 1px solid #f85149;
    border-radius: 3px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    cursor: pointer;
    font-weight: bold;
}
.trade-cancel-x:hover { background: #f85149; }

/* ---- Trade e inventário lado a lado, sem renderizar fora do jogo. ---- */
body:not(.trade-active) #mu-trade-window { display:none !important; }
/* No trade, a janela do inventário é uma extensão da mesa: só o X inferior
   cancela a negociação e ambos os painéis permanecem coerentes. */
body.trade-active #menu-modal-items .inventory-close-control { display:none !important; }
body.trade-active #menu-modal-items.mu-inventory-window {
    position: fixed !important;
    top: 50% !important;
    left: calc(50% - 352px) !important;
    transform: translate(-100%, -50%) !important;
    margin: 0 !important;
    z-index: 1007 !important;
    width: 326px !important;
}

/* A cena da cidade tem uma regra própria para menus comuns. No trade ela não
   pode reposicionar o inventário: a mesa fica à esquerda e a mochila à direita. */
body.game-ui-active:has(#view-city[style*="block"]).trade-active #menu-modal-items.mu-inventory-window,
body.game-ui-active:has(#view-hunt[style*="block"]).trade-active #menu-modal-items.mu-inventory-window {
    position: fixed !important;
    top: 50% !important;
    bottom: auto !important;
    left: calc(50% - 352px) !important;
    right: auto !important;
    width: 326px !important;
    margin: 0 !important;
    transform: translate(-100%, -50%) !important;
    z-index: 1007 !important;
}

body.trade-active #mu-trade-window.mu-trade-overlay {
    background: transparent !important;
    display:block !important;
    padding:0 !important;
    z-index: 1005 !important;
}

.mu-trade-container {
    position: fixed !important;
    top:50%;
    left:calc(50% + 12px);
    transform:translateY(-50%);
    z-index: 1006 !important;
}

body.game-ui-active:has(#view-city[style*="block"]).trade-active .mu-trade-container,
body.game-ui-active:has(#view-hunt[style*="block"]).trade-active .mu-trade-container {
    position: fixed !important;
    top: 50% !important;
    left: calc(50% + 12px) !important;
    transform: translateY(-50%) !important;
}

@media (max-width: 760px) {
    body.trade-active #mu-trade-window.mu-trade-overlay { display:flex!important; padding-top:16px!important; overflow:auto; align-items:flex-start!important; justify-content:center!important; }
    body.trade-active .mu-trade-container { position:relative!important; top:auto; left:auto; transform:none; }
    body.trade-active #menu-modal-items.mu-inventory-window { top:auto !important; bottom:12px !important; left:50% !important; transform:translateX(-50%) !important; }
}

.player-command-active{position:fixed;z-index:10045;left:50%;top:82px;transform:translateX(-50%);display:grid;gap:3px;min-width:205px;padding:9px 18px;border:1px solid #e0bf62;background:linear-gradient(180deg,rgba(40,34,20,.96),rgba(8,9,9,.96));box-shadow:0 0 0 2px #15120b,0 8px 18px rgba(0,0,0,.65);color:#fff4c6;text-align:center;font:700 14px Georgia,serif;pointer-events:none}.player-command-active span{color:#e4e7e4;font:11px Arial,sans-serif}.player-command-active b{color:#f7d66a;text-shadow:0 1px #000}