#player-trade { position:fixed; inset:0; margin:auto; height:fit-content; z-index:1600; box-sizing:border-box; width:min(660px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:auto; padding:0; border:3px solid var(--ink); border-radius:12px; background:var(--parchment); color:var(--ink); box-shadow:var(--ledge); font:700 13px/1.45 var(--read); overscroll-behavior:contain; }
#player-trade::backdrop { background:rgb(19 36 28 / 55%); }
#player-trade *, #player-trade *::before { box-sizing:border-box; }
.trade-heading { display:flex; align-items:center; gap:12px; padding:14px 18px; background:var(--evergreen); color:var(--paper); border-bottom:3px solid var(--ink); }
.trade-heading small { color:#e3edc4; font-size:10px; letter-spacing:.13em; }
#player-trade h2 { margin:2px 0 0; font:800 21px/1.25 var(--read); overflow-wrap:anywhere; }
.trade-emblem { display:grid; place-items:center; width:44px; height:44px; flex:none; background:#224e35; border:2px solid #a1be74; border-radius:9px; font-size:30px; color:var(--honey); }
.trade-body { padding:14px 18px 16px; }
.trade-steps { display:flex; gap:6px; list-style:none; margin:0 0 12px; padding:0; }
.trade-steps li { flex:1; text-align:center; padding:6px 3px; border:1px solid #d2bc8b; border-radius:5px; color:#715d38; background:#eee3c7; font-size:12px; }
.trade-steps [aria-current] { background:#2c6340; color:#fff6de; border-color:#254f33; }
#player-trade-note { margin:0 0 12px; min-height:20px; }
#player-trade-note.trade-alert, #trade-gift { padding:9px 11px; background:#fff0be; border-left:4px solid #a46a11; border-radius:3px; }
#player-trade h3 { margin:0; font-size:16px; }
#player-trade button, #player-trade input, #player-trade select { min-height:44px; max-width:100%; font:700 13px var(--read); border:2px solid #79613c; border-radius:6px; color:var(--ink); }
#player-trade button { padding:8px 12px; background:var(--raised); box-shadow:inset 0 -3px 0 #ae8b4333; cursor:pointer; }
#player-trade button:hover:not(:disabled) { background:#ffe5a0; }
#player-trade button:disabled { opacity:.55; cursor:default; }
#player-trade :is(button,input,select):focus-visible { outline:3px solid #33754e; outline-offset:2px; }
#player-trade .trade-primary { background:var(--evergreen); color:#fff6de; border-color:#254a31; }
#player-trade .trade-primary:hover:not(:disabled) { background:#326e43; }
.trade-columns { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.trade-columns section { background:#fffbef; border:2px solid #d9bf87; border-radius:8px; padding:12px; min-width:0; }
.trade-columns section+section { border-color:#a8bb90; }
.trade-side-head { display:flex; align-items:center; justify-content:space-between; gap:6px; flex-wrap:wrap; }
.trade-badge { font-size:11px; border-radius:4px; background:#ece4d4; padding:3px 7px; color:#67573c; }
.trade-badge.is-ready { background:#dbeccd; color:#264c2c; }
.trade-summary { font-size:12px; margin:6px 0 10px; color:#6c5839; font-variant-numeric:tabular-nums; }
#trade-partner { margin:4px 0 0; font-size:12px; color:#546442; overflow-wrap:anywhere; }
.trade-columns ul { padding:0; margin:0; list-style:none; max-height:160px; overflow-y:auto; scrollbar-gutter:stable; }
.trade-item-card { display:flex; align-items:center; gap:8px; padding:9px 0; border-top:1px solid #e8dac0; }
.trade-item-card canvas, #trade-selected canvas { width:36px; height:36px; object-fit:contain; image-rendering:pixelated; flex:none; }
.trade-item-copy { flex:1; min-width:0; overflow-wrap:anywhere; }
.trade-item-copy strong { display:block; font-size:13px; }
.trade-item-count { font-weight:900; font-size:15px; font-variant-numeric:tabular-nums; }
.trade-item-copy small { display:block; font-size:11px; color:#66543a; }
.trade-item-copy .trade-changed { color:#815112; font-weight:900; }
#player-trade .trade-remove { padding:0; width:36px; min-width:36px; min-height:44px; border:0; background:transparent; box-shadow:none; font-size:22px; color:#846444; }
.trade-empty { padding:22px 6px; text-align:center; color:#887457; border:1px dashed #d2c2a3; border-radius:6px; font-weight:500; }
#trade-edit { padding:12px; margin:12px 0; border:1px solid #d4bd8f; border-radius:8px; background:#eddfbc77; }
.trade-editor-fields { display:grid; align-items:center; grid-template-columns:minmax(0,1fr) 110px; gap:10px; }
#trade-edit label { display:flex; flex-direction:column; gap:4px; min-width:0; font-size:12px; }
#trade-edit input, #trade-edit select { width:100%; padding:6px 8px; background:#fffdf5; }
#trade-edit small { display:block; font-size:11px; margin-top:5px; color:#655236; }
#trade-selected { display:flex; align-items:center; gap:8px; min-height:42px; font-size:12px; padding:6px 0; }
.trade-editor-actions, .trade-actions { display:flex; gap:8px; justify-content:space-between; flex-wrap:wrap; }
.trade-quantities { display:flex; gap:5px; }
.trade-quantities button { min-width:44px; }
#trade-status { font-size:12px; color:#546342; margin:12px 0; }
.trade-actions .trade-primary { flex:1; }
#player-trade .trade-quiet { display:block; margin:12px auto 0; border-color:transparent; background:transparent; box-shadow:none; color:#775b39; }
#player-trade [hidden] { display:none; }
@media(max-width:540px) { #player-trade { width:calc(100vw - 12px); max-height:calc(100dvh - 12px); } .trade-body { padding:12px; } .trade-heading { padding:12px; } #player-trade h2 { font-size:18px; } .trade-columns { grid-template-columns:1fr; gap:8px; } .trade-columns section { padding:10px; } .trade-columns ul { max-height:170px; } .trade-editor-fields { grid-template-columns:minmax(0,1fr) 100px; } .trade-editor-actions { gap:10px; } #trade-set { flex:1; } .trade-empty { padding:10px; } .trade-item-card { padding:6px 0; } }

/* Requests use show(), so they need the same viewport anchoring as the modal exchange. */
#player-trade[data-phase="request"] { width:min(420px,calc(100vw - 24px)); height:fit-content; }
#player-trade[open] { display:flex; flex-direction:column; overflow:hidden; }
#player-trade .trade-heading { flex:none; }
#player-trade .trade-body { overflow-y:auto; min-height:0; }
#trade-bag { display:grid; grid-template-columns:repeat(auto-fill,minmax(52px,1fr)); gap:6px; max-height:130px; overflow-y:auto; padding:4px; margin:8px -4px; }
#player-trade .trade-bag-item { position:relative; display:grid; place-items:center; padding:4px 3px 18px; min-height:60px; background:#fff8df; border:2px solid #ccb580; }
.trade-bag-item canvas { width:32px; height:32px; image-rendering:pixelated; }
.trade-stack { position:absolute; right:3px; bottom:1px; font-size:10px; font-variant-numeric:tabular-nums; }
#player-trade .trade-bag-item[aria-pressed="true"] { border-color:#285e3c; background:#e4efcf; box-shadow:inset 0 0 0 1px #285e3c; }
#player-trade .trade-bag-item.is-offered::before { content:'✓'; position:absolute; left:3px; top:0; color:#28613a; }
#trade-selected strong, #trade-selected small { display:block; }
#trade-selected { min-width:0; overflow-wrap:anywhere; }
#player-trade .trade-actions { position:sticky; bottom:-16px; background:var(--parchment); padding:10px 0; border-top:1px solid #cdb47d; z-index:1; }
@media(max-height:600px) { .trade-heading { padding:8px 12px; } .trade-body { padding:10px 12px; } .trade-steps { display:none; } }

#player-trade #trade-close { margin-left:auto; width:40px; min-width:40px; min-height:40px; padding:0; background:#fff7dd; font-size:24px; }