/* Player trade (item 50, src/trade-ui.js): the invite card (top centre, not modal, under the party invite card) and the
   two-sided trade window. Same green/gold palette as the party frame. Phones: the sides stack, buttons stay 36px+. */
#trade-invite{position:absolute;z-index:4;top:118px;left:50%;transform:translateX(-50%);display:grid;gap:5px;box-sizing:border-box;width:min(300px,calc(100vw - 24px));padding:8px 10px;border:1.5px solid #e2c36b;border-radius:10px;background:#2b2a1ef2;box-shadow:0 4px 14px #0008;color:#fff8dc;font:12px Tahoma,"Noto Sans Thai",sans-serif;text-align:center}
#trade-invite[hidden],.trade-invite-buttons [hidden],.trade-amount[hidden]{display:none}
.trade-invite-text{margin:0;font-weight:bold}
.trade-invite-count{color:#f4dfa8;font-size:10px;font-variant-numeric:tabular-nums}
.trade-invite-buttons{display:flex;gap:8px;justify-content:center}
.trade-invite-buttons button{min-height:36px;padding:4px 14px;border:1px solid #e2c36b99;border-radius:8px;background:#0004;color:#fff8dc;font:bold 12px Tahoma,"Noto Sans Thai",sans-serif;cursor:pointer}
.trade-invite-buttons .trade-accept{background:#2f6b3a;border-color:#8fcf8a}
.trade-invite-buttons button:hover,.trade-invite-buttons button:focus-visible{filter:brightness(1.2)}
#trade-dialog{box-sizing:border-box;width:min(760px,calc(100vw - 16px));max-height:calc(100dvh - 16px);margin:auto;padding:0;overflow:hidden;border:2px solid #e2c36b;border-radius:14px;background:#1f2a22;color:#fff8dc;font:13px Tahoma,"Noto Sans Thai",sans-serif;box-shadow:0 10px 40px #000b}
#trade-dialog[open]{display:flex;flex-direction:column}
#trade-dialog::backdrop{background:#0008}
.trade-head{display:flex;align-items:center;gap:10px;padding:10px 14px;background:linear-gradient(#3a4a2c,#2a3622);border-bottom:1px solid #e2c36b66}
.trade-head h2{flex:1;min-width:0;margin:0;overflow:hidden;font-size:16px;text-overflow:ellipsis;white-space:nowrap;color:#ffe9a8}
.trade-time{color:#cfe8c9;font-size:11px;font-variant-numeric:tabular-nums}
.trade-close{width:36px;height:36px;border:1px solid #ffffff44;border-radius:50%;background:#0004;color:#fff8dc;font-size:20px;line-height:1;cursor:pointer}
.trade-close:hover,.trade-close:focus-visible{background:#b8452f}
.trade-notice{min-height:18px;margin:0;padding:6px 14px 0;color:#cfe8c9;font-size:12px}
.trade-notice:empty{display:none}
.trade-notice[data-kind="bad"]{color:#ffb4a3}
.trade-notice[data-kind="warn"]{color:#ffe08a}
.trade-body{flex:1;min-height:0;overflow:auto;padding:10px 14px;overscroll-behavior:contain}
.trade-sides{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.trade-side{display:grid;gap:8px;padding:8px;border:1px solid #8fcf8a66;border-radius:10px;background:#0002}
.trade-side[data-side="theirs"]{border-color:#e2c36b66}
.trade-side-head{display:flex;align-items:center;gap:6px}
.trade-side-head h3{flex:1;min-width:0;margin:0;overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}
.trade-badge{padding:1px 8px;border-radius:9px;background:#0005;color:#cfe8c9;font-size:10px;white-space:nowrap}
.trade-badge[data-state="locked"]{background:#7a5d1d;color:#fff3c4}
.trade-badge[data-state="confirmed"]{background:#2f6b3a;color:#e9ffe2}
.trade-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.trade-slot,.trade-bag-item{position:relative;display:grid;place-items:center;gap:1px;min-width:0;min-height:58px;padding:4px 3px;border:1px solid #ffffff2a;border-radius:8px;background:#0003;color:#fff8dc;font:10px/1.2 Tahoma,"Noto Sans Thai",sans-serif;cursor:pointer}
.trade-slot.empty{border-style:dashed;cursor:default;opacity:.45}
.trade-slot.changed,.trade-coins-value.changed{outline:2px solid #ffe08a;outline-offset:1px;animation:trade-flash 1.2s ease-out 2}
@keyframes trade-flash{50%{background:#ffe08a33}}
.trade-slot img,.trade-bag-item img{width:28px;height:28px;object-fit:contain;pointer-events:none}
.trade-slot-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trade-slot-count{color:#cfe8c9;font-variant-numeric:tabular-nums}
.trade-slot-refine{position:absolute;top:2px;right:3px;color:#ffd36b;font-weight:bold}
.trade-side[data-side="mine"] .trade-slot:not(.empty):hover,.trade-bag-item:not(:disabled):hover,.trade-bag-item:not(:disabled):focus-visible{background:#2f6b3a88}
.trade-coins-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.trade-coins-label{color:#ffe9a8;font-weight:bold}
.trade-coins-input{width:110px;min-height:32px;padding:2px 6px;border:1px solid #e2c36b88;border-radius:6px;background:#0006;color:#fff8dc;font:13px Tahoma,sans-serif}
.trade-coins-have{color:#cfe8c9;font-size:11px}
.trade-coins-value{padding:2px 6px;border-radius:6px;font-weight:bold;font-variant-numeric:tabular-nums}
.trade-bag-title{margin:12px 0 6px;font-size:12px;color:#ffe9a8}
.trade-bag{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px}
.trade-bag-item:disabled{cursor:default;opacity:.45}
.trade-bag-item.worn{opacity:.4}
.trade-worn{color:#ffb4a3;font-size:9px}
.trade-empty{grid-column:1/-1;margin:0;color:#cfe8c9;font-size:12px}
.trade-amount{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:8px;padding:6px 8px;border:1px solid #e2c36b66;border-radius:8px;background:#0003}
.trade-amount-name{flex:1;min-width:90px;font-weight:bold}
.trade-step,.trade-put{min-width:36px;min-height:36px;border:1px solid #8fcf8a88;border-radius:8px;background:#0004;color:#fff8dc;font:bold 15px Tahoma,"Noto Sans Thai",sans-serif;cursor:pointer}
.trade-put{padding:0 14px;background:#2f6b3a;font-size:13px}
.trade-amount-input{width:70px;min-height:32px;padding:2px 6px;border:1px solid #e2c36b88;border-radius:6px;background:#0006;color:#fff8dc;font:13px Tahoma,sans-serif;text-align:center}
.trade-summary{margin:10px 0 0;padding:6px 8px;border-radius:8px;background:#0003;color:#f4dfa8;font-size:12px}
.trade-actions{display:flex;gap:8px;justify-content:flex-end;padding:10px 14px;border-top:1px solid #e2c36b44;background:#0002}
.trade-actions button{min-height:40px;padding:6px 16px;border:1px solid #ffffff44;border-radius:9px;background:#0004;color:#fff8dc;font:bold 13px Tahoma,"Noto Sans Thai",sans-serif;cursor:pointer}
.trade-actions .trade-lock{border-color:#e2c36b;background:#6b5420}
.trade-actions .trade-confirm{border-color:#8fcf8a;background:#2f6b3a}
.trade-actions .trade-cancel{border-color:#ff9a7e88}
.trade-actions button:disabled{cursor:default;opacity:.45}
.trade-actions button:not(:disabled):hover,.trade-actions button:not(:disabled):focus-visible{filter:brightness(1.2)}
@media (max-width:620px){
 .trade-sides{grid-template-columns:1fr}
 .trade-slots{grid-template-columns:repeat(4,1fr)}
 .trade-actions{justify-content:stretch}
 .trade-actions button{flex:1;padding:6px 8px}
 #trade-invite{top:96px}
}
@media (max-height:480px){
 #trade-dialog{max-height:calc(100dvh - 8px)}
 .trade-head{padding:6px 10px}
 .trade-body{padding:6px 10px}
 .trade-actions{padding:6px 10px}
 .trade-sides{grid-template-columns:1fr 1fr}
 .trade-slot,.trade-bag-item{min-height:46px}
}