/* =============================================================
   Meu Bairro — visual da janela de TROCAS (estilo Habbo + ouro)
   Segue o padrão .mb-modal do jogo; dourado #FFD700 no lugar
   de verde (regra permanente de UI do jogo).
   ============================================================= */

.mb-trade-card {
  width: min(760px, 94vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  border: 3px solid #FFD700 !important;
  box-shadow: 0 16px 50px #0009, 0 0 24px #ffd70033 !important;
}

.mb-trade-head {
  background: linear-gradient(#3a2f14, #241c0a) !important;
  border-bottom: 2px solid #FFD700;
  color: #FFD700 !important;
  font-family: var(--mb-pixel-font, monospace);
  font-size: 13px;
}

/* ---- painéis lado a lado (Você | Parceiro) ---- */
.mb-trade-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 14px 4px;
  overflow: hidden;
}

.mb-trade-panel {
  background: #101018;
  border: 2px solid #4a3d1e;
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mb-trade-me { border-color: #FFD700; }
.mb-trade-partner { border-color: #6b5f3a; }

.mb-trade-pname {
  font-family: var(--mb-pixel-font, monospace);
  font-size: 10px;
  color: #FFD700;
  letter-spacing: .03em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mb-trade-ok {
  margin-left: auto;
  background: #FFD700;
  color: #1a1405;
  font-size: 9px;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 800;
}
.mb-trade-ok.hidden { display: none; }

/* ---- grade 3x3 de slots ---- */
.mb-trade-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.mb-trade-slot {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  border: 2px dashed #4a4433;
  background: #0a0a10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
}

.mb-trade-slot.filled {
  border: 2px solid #FFD700;
  background: #1c1a10;
  cursor: pointer;
  transition: transform .08s;
}
.mb-trade-panel.mb-trade-partner .mb-trade-slot.filled { cursor: default; }
.mb-trade-slot.filled:hover { transform: scale(1.05); }
.mb-trade-panel.mb-trade-partner .mb-trade-slot.filled:hover { transform: none; }

.mb-trade-slot img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  pointer-events: none;
}
.mb-trade-emoji { font-size: 30px; pointer-events: none; }

.mb-trade-slot em,
.mb-trade-pick em {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  font-style: normal;
  font-size: 8px;
  line-height: 1.2;
  padding: 1px 2px;
  background: #000a;
  color: #ffe9a8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.mb-trade-qty {
  position: absolute;
  top: 2px; right: 4px;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  color: #FFD700;
  text-shadow: 1px 1px 0 #000;
  pointer-events: none;
}

/* ---- moedas ---- */
.mb-trade-coins {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #ffe9a8;
}
.mb-trade-coins small { color: #a89c6a; font-size: 11px; }
.mb-trade-coins input {
  width: 90px;
  background: #0a0a10;
  border: 2px solid #FFD700;
  border-radius: 8px;
  color: #FFD700;
  font-weight: 800;
  padding: 5px 8px;
  font-size: 14px;
}
.mb-trade-coins input:disabled { opacity: .5; }
.mb-trade-coins b { color: #FFD700; }

/* ---- botões ---- */
.mb-trade-accept {
  background: linear-gradient(#ffe27a, #d4a900);
  border: 2px solid #fff2b0;
  color: #241c05;
  border-radius: 10px;
  padding: 10px;
  font-weight: 900;
  font-family: var(--mb-pixel-font, monospace);
  font-size: 11px;
  cursor: pointer;
  letter-spacing: .04em;
}
.mb-trade-accept.accepted {
  background: linear-gradient(#fff3c4, #FFD700);
  box-shadow: 0 0 12px #ffd700aa;
}
.mb-trade-accept:disabled { opacity: .45; cursor: default; }

.mb-trade-wait {
  font-size: 11px;
  color: #a89c6a;
  text-align: center;
  min-height: 16px;
}

.mb-trade-foot { padding: 8px 14px 12px; text-align: center; }
.mb-trade-cancel {
  background: #2a2025;
  border: 2px solid #a33;
  color: #ffb3b3;
  border-radius: 10px;
  padding: 8px 18px;
  font-weight: 700;
  cursor: pointer;
}

/* ---- seletor de inventário ---- */
.mb-trade-picker-wrap {
  border-top: 2px solid #4a3d1e;
  margin-top: 6px;
  padding: 8px 14px 4px;
}

.mb-trade-picker-title {
  font-family: var(--mb-pixel-font, monospace);
  font-size: 10px;
  color: #FFD700;
  margin-bottom: 8px;
}
.mb-trade-picker-title small { color: #a89c6a; font-family: system-ui, sans-serif; font-size: 10px; }

.mb-trade-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 6px;
  max-height: 150px;
  overflow-y: auto;
  padding-bottom: 8px;
}

.mb-trade-pick {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  border: 2px solid #4a4433;
  background: #14141c;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  transition: transform .08s, border-color .08s;
}
.mb-trade-pick:hover { transform: scale(1.06); border-color: #FFD700; }
.mb-trade-pick img { width: 68%; height: 68%; object-fit: contain; pointer-events: none; }
.mb-trade-pick.depleted { opacity: .35; cursor: default; }
.mb-trade-pick.depleted:hover { transform: none; border-color: #4a4433; }

/* ---- convite ---- */
.mb-trade-invite { width: min(380px, 92vw); }
.mb-trade-invite-body { padding: 16px; text-align: center; color: #ffe9a8; }
.mb-trade-invite-btns { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }
.mb-trade-invite-btns button {
  border-radius: 10px;
  padding: 10px 20px;
  font-weight: 800;
  cursor: pointer;
  font-family: var(--mb-pixel-font, monospace);
  font-size: 10px;
}
#mbTradeInviteYes { background: linear-gradient(#ffe27a, #d4a900); border: 2px solid #fff2b0; color: #241c05; }
#mbTradeInviteNo { background: #2a2025; border: 2px solid #a33; color: #ffb3b3; }

/* ---- toast ---- */
.mb-trade-toast {
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translate(-50%, 20px);
  background: #211b0a;
  color: #ffe9a8;
  border: 2px solid #FFD700;
  border-radius: 10px;
  padding: 10px 16px;
  opacity: 0;
  z-index: 7000;
  transition: .18s;
  font-size: 14px;
}
.mb-trade-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---- mobile ---- */
@media (max-width: 560px) {
  .mb-trade-panels { grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 8px 2px; }
  .mb-trade-panel { padding: 6px; gap: 6px; }
  .mb-trade-emoji { font-size: 22px; }
  .mb-trade-picker { max-height: 110px; }
  .mb-trade-coins input { width: 70px; }
}