/* Dark Mage of Mossfen — trading between players (v1.60, ui/trade.js, ui/player-menu.js): the trade window, the
   request that asks you, and the little menu a right-click on another player opens. Same look as shop.css and
   items.css. Nothing flashes: a lock, a ready side or a change shows only as a softly coloured border. */

/* ---- the trade window (on the right, where the Shop sits) ------------------------------------ */
#trade {
  top: 12px; right: 12px; z-index: 5;
  width: min(424px, calc(100% - 24px));
  max-height: calc(100% - 100px);
  overflow-y: auto;
  padding: 10px 14px 12px;
}
#trade header { align-items: center; }
#trade .win-title b { color: #ffe9a8; font-weight: 700; }
#trade header .win-close { margin-left: 10px; }
#trade-gold { display: inline-block; }

.trade-side {
  margin-bottom: 8px; padding: 8px 10px; border-radius: 4px;
  background: rgba(11, 15, 12, 0.6); border: 1px solid rgba(206, 184, 118, 0.16);
  transition: border-color 0.4s ease-out;
}
.trade-side.is-locked { border-color: rgba(155, 216, 111, 0.5); }
.trade-side.is-ready { border-color: rgba(255, 215, 106, 0.65); }
.trade-side.is-changed { border-color: rgba(255, 166, 92, 0.8); }
.trade-head {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font: 700 13px/1 var(--f-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim);
}
.trade-chip {
  padding: 3px 8px; border-radius: 999px; border: 1px solid var(--edge);
  font: 700 11px/1 var(--f-display); letter-spacing: 0.1em; color: var(--ink-faint);
}
.trade-chip.is-locked { color: #b7e58f; border-color: rgba(155, 216, 111, 0.5); }
.trade-chip.is-ready { color: #ffd76a; border-color: rgba(255, 215, 106, 0.6); }
.trade-grid { margin: 8px 0 6px; }
.trade-coins {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font: 700 13px/1 var(--f-display); letter-spacing: 0.05em; color: var(--ink-dim);
}
.trade-coins b.coin { font-size: 15px; }
.trade-coins input, .trade-pick input {
  width: 8.5em; padding: 5px 7px; border-radius: 4px; text-align: right;
  font: 400 14px/1 var(--f-num); color: var(--ink); background: #0b1210; border: 1px solid var(--edge);
}
.trade-pick input { width: 4.5em; }
.trade-coins input:focus, .trade-pick input:focus { outline: 2px solid #f3d68a; outline-offset: 0; border-color: transparent; }
.trade-coins .link-btn, .trade-pick .link-btn { margin: 0; }

/* your bag, under your side */
.trade-bag { border-top: 1px solid var(--edge); padding-top: 8px; }
.trade-note { margin: 0; font-size: 12.5px; color: var(--ink-faint); }
.trade-baggrid { margin: 8px 0; }
.bag-cell.is-offered img { opacity: 0.4; }
.bag-cell.is-offered::after {
  content: '✓'; position: absolute; left: 3px; top: 2px;
  font: 400 12px/1 var(--f-num); color: #b7e58f; text-shadow: 0 0 2px #000, 1px 1px 0 #000;
}
.bag-cell.is-kept { cursor: not-allowed; }
.bag-cell.is-kept img { opacity: 0.3; filter: grayscale(1); }
.trade-pick { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; min-height: 40px; font-size: 13.5px; }
.trade-pick strong { font: 700 15px/1.1 var(--f-display); letter-spacing: 0.02em; }
.trade-pick .why { color: var(--ink-faint); }
.trade-pick .sk-upgrade { padding: 6px 12px; }

.trade-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.trade-actions .link-btn { margin: 0 0 0 auto; }
.trade-actions .sk-upgrade { min-width: 86px; text-align: center; }

/* the Inspect window sits beside it, as beside the Shop */
body.trade-open #inspect { left: auto; transform: none; right: calc(min(424px, 100% - 24px) + 24px); }
@media (max-width: 1060px) {
  body.trade-open #inspect { right: auto; left: 50%; transform: translateX(-50%); }
}
body.trade-open #help { visibility: hidden; }

/* ---- someone asks you to trade -------------------------------------------------------------- */
#trade-ask {
  top: 72px; left: 50%; transform: translateX(-50%); z-index: 7;
  width: min(340px, calc(100% - 24px));
  padding: 10px 14px 12px;
}
#trade-ask p { margin: 0 0 8px; font-size: 15px; }
#trade-ask p b { color: #ffe9a8; }
.trade-ask-time { --c: var(--edge-strong); height: 6px; }
.trade-ask-time b { width: 100%; transition: none; }
.trade-ask-btns { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.trade-ask-btns .link-btn { margin: 0; }

/* ---- right-click on another player ----------------------------------------------------------- */
#player-menu { position: fixed; z-index: 8; display: grid; gap: 6px; min-width: 150px; padding: 8px 10px; }
#player-menu .win-meta { white-space: nowrap; }
#player-menu .win-meta b { color: #ffe9a8; }
#player-menu .sk-upgrade { justify-self: stretch; text-align: center; }

@media (max-width: 760px) {
  #trade { top: 12px; bottom: 84px; max-height: none; }
  #trade-ask { top: 150px; }                     /* below the status window */
}
@media (prefers-reduced-motion: reduce) {
  .trade-side { transition: none; }
}